Image hover using Javascript

In this post you will see how to implement image hover with iframe and div. My first try was with div and AJAX. Unfortunately in IE6, select (drop down menu) always stays on top of the hover image. Good old iframe is solution not only to put behind a select element in IE6, but to fetch a content without AJAX.

Please try the following example with IE6. Just move mouse pointer over the Spider1 or Spider2. You will see in version with div how drop down menu stays over the hover image. Other browsers (FireFox, Opera, Google Chrome ...) will have the same result with both versions.

Spider1 Spider2 - version with div
Spider1 Spider2 - version with iframe

I prepared a small JavaScript code to demonstrate the problem and to offer a solution. When user moves pointer over Spider1, JavaScript code calculates the element position on the page, sets the new div location and innerHTML property and finally shows the div element. After mouse pointer moves away, JavaScript will hide div element.

// define reference to the hidden div element
var div;
 
// set reference to the div element after page is loaded
window.onload = function () {
    div = document.getElementById('hoverbox');
}
 
// show hoverbox
function hoverbox_show(obj, src, type) {
    // define oTop and oLeft variables
    var oTop = 0,
        oLeft = 0;
    // find object position on the page
    do {
        oLeft += obj.offsetLeft;
        oTop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    // set the position of invisible div
    div.style.top  = (oTop  + 20) + 'px';
    div.style.left = (oLeft + 20) + 'px';
    // put iframe with img in div element (this will work in any browser)
    if (type === 'iframe') {
        div.innerHTML = '<iframe marginwidth="0" marginheight="0" frameborder="no" ' +
                          'width="100%" height="100%" scrolling="no" ' +
                          'src="/my/img/' + src + '"></iframe>';
    }
    // or place img inside div element (IE6 has problem with select overlay)
    else {
        div.innerHTML = '<img src="/my/img/' + src + '"/>';
    }
    // show hoverbox
    div.style.visibility = 'visible';
}
 
// hide hoverbox (hide div element)
function hoverbox_hide() {
    div.style.visibility = 'hidden';
}

Hover box is a hidden div element. You can place this div element anywhere on the page because hidden div will not interfere with other elements. I usually write div right after body tag.

/* hover box */
#hoverbox{
	position: absolute;
	width: 185px;
	height: 90px;
	visibility: hidden;
}

And here is HTML code for use JavaScript functions mentioned above.

<!-- DIV version -->
<span onmouseover="hoverbox_show(this, 'spider1_big.png', 'div')" onmouseout="hoverbox_hide()">Spider1</span>
<span onmouseover="hoverbox_show(this, 'spider2_big.png', 'div')" onmouseout="hoverbox_hide()">Spider2</span>

<!-- IFRAME version -->
<span onmouseover="hoverbox_show(this, 'spider1_big.png', 'iframe')" onmouseout="hoverbox_hide()">Spider1</span>
<span onmouseover="hoverbox_show(this, 'spider2_big.png', 'iframe')" onmouseout="hoverbox_hide()">Spider2</span>

AJAX isn't needed to fetch and display images on mouseover event. Just use div and set innerHTML if you haven't form elements on the page or you don't care about IE6. Otherwise you will have to apply this iframe trick.

On the other hand, if you want to display HTML in hover box (like tooltip), you will have to set correct URL in iframe src attribute - nothing more. Solution with div will be a little complicated because you will have to request HTML content with AJAX. I wrote a post AJAX progress bar where you can see how to use AJAX.