Display image on mouseover

[i_am_james]

Right, got a question for the java genious's out there.

I've got links to different albums on my website. What I want to do is when I mouseover one of the links, I want a square thumbnail of the album art, say 60x60 or whatever to show up, and when i move off, the image goes away..kinda like a preview.


any ideas how to do this, or any tutorials where I can learn myself? thanks guys! x

[TryingToLearn]

Give this a try...

http://groan-zone.net/jscript/mouseover.html

[i_am_james]

No thats not quite what i'm looking for. I want a box to appear with the album art inside when i move my mouse over the link. Thanks for the reply though.

[TryingToLearn]

Maybe something like this…

<script language="JavaScript">
function mouseOver()
{
   document.getElementById("image").setAttribute('src',test.gif');
}

function mouseOut()
{	
   document.getElementById("image").setAttribute('src','test1.GIF');
}
</script>

<a onMouseOver="javascript: mouseOver();" onMouseOut="javascript: mouseOut();">Test</a>

<img src="test.GIF" id="image" />

[hexburner]

Just put the javascript below into for example ToolTip.js and put a script-tag in the HTML document's headers to include the JS-file.
Example at http://www.fish4code.net/test/tooltip/

Usage:

<a href="javascript:;" onmouseover="ShowToolTip('myimage.jpg','My image');" onmouseout="HideToolTip();">View this</a>

window.addEvent=function(e,ev,f,c){if(e.addEventListener){e.addEventListener(ev,f,c);}else if(e.attachEvent){var r=e.attachEvent('on'+ev,f);return r;}else{e['on'+ev]=f;}};
function $N(v,d){var r=document.createElement(v);r.id=d;return r;};
function $s(v){return(v.style);}
function $ac(p,c){p.appendChild(c);}
 
var mOX = 10;
var mOY = 12;
var ttlayer = null;
var ToolTipEnabled = false;
var IE = /MSIE/.test(navigator.userAgent) && navigator.platform == "Win32";
var mx, my;
 
function initToolTip() {
    ttlayer=$N('div', 'tooltip-layer');s=$s(ttlayer);s.display='none';s.backgroundColor='#ffffff';s.border='1px solid #bbbbbb';s.padding='10px';s.position='absolute';s.zIndex='999999';
    $ac(document.body,ttlayer);
    if (!IE){document.captureEvents(Event.MOUSEMOVE)}
    document.onmousemove = getMouseXY;    
}
window.addEvent(window,"load",initToolTip,false);
 
function ShowToolTip(src, alt) {
    if (!ToolTipEnabled && ttlayer){
        // You can set the width and the height for the image to appear
        ttlayer.innerHTML = (src=='' ? alt : '<img src="'+src+'" alt="'+alt+'" border="0"/>');
        ttlayer.style.display = 'block';
        ToolTipEnabled = true;
    }
}
 
function HideToolTip() {
    ToolTipEnabled = false;
    if (ttlayer) ttlayer.style.display = 'none';
}
 
function getMouseXY(e) {
    if (ttlayer!=null&&ToolTipEnabled){
        if(IE){mx=event.clientX+document.body.scrollLeft;my=event.clientY+document.documentElement.scrollTop}
        else{mx=e.pageX;my=e.pageY}
        if(mx<0){mx=0;}if(my<0){my=0}
        var s=$s(ttlayer);
        var bh=document.body.clientHeight-12+document.documentElement.scrollTop;
        if(my+ttlayer.offsetHeight<bh){s.top=(my+mOY)+'px'}
        else if(my-ttlayer.offsetHeight<=0){s.top=(my-ttlayer.offsetHeight-mOY)+'px'}
        else{s.top=(my-ttlayer.offsetHeight>0?my-ttlayer.offsetHeight-mOY:my+mOY)+'px'}
        if(mx+ttlayer.offsetWidth<document.body.clientWidth){s.left=(mx+mOX)+'px'}
        else{s.left=(mx-ttlayer.offsetWidth-mOX>0?mx-ttlayer.offsetWidth-mOX:mx+mOX)+'px'}
    }
    return true
}