SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display image on mouseover

    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

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe something like this

    Code:
    <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" />

  5. #5
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code HTML4Strict:
    <a href="javascript:;" onmouseover="ShowToolTip('myimage.jpg','My image');" onmouseout="HideToolTip();">View this</a>

    Code JavaScript:
    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
    }
    FOR SALE: 1 set of morals, never used, will sell cheap


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •