I'm new to javascript/css and would like to make a version of a mouseover popup similar to the one that displays over the underlined words here: http://st.japantimes.co.jp/essay/?p=ey20141219
I can see the code that is used, but I'm not sure where/how to add in my own speech bubble image when I edit the code for my own project.

Here is an example of the code used on the referenced page:

HTML:

<a style=cursor:pointer; onclick=showChuPopup(event,'<b>’Twas</b><br />It was の省略');return false; onmouseover=showChuPopup(event,'<b>’Twas</b><br />It was の省略'); onmouseout=endChuPopup();>’Twas</a>

Javascript:

function showChuPopup(e,text){

if(document.all)e = event;



var obj = document.getElementById('chu_popup');

var obj2 = document.getElementById('chu_popup_text');

obj2.innerHTML = text;

obj.style.display = 'block';

var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);/*

if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;*/

var leftPos = e.clientX - 100;

if(leftPos<0)leftPos = 0;

obj.style.left = leftPos + 'px';

obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';} function endChuPopup() {

document.getElementById('chu_popup').style.display = 'none';} function touchHandler(e){

document.getElementById('chu_popup').style.display = 'none';}

Thanks for any help or ideas.