Javascript- I need a thumbnail to be displayed when mouseover text...?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • veer165
    New Member
    • Jun 2007
    • 2

    Javascript- I need a thumbnail to be displayed when mouseover text...?

    I have a list of items... And i want a little thumbnail of each item to be displayed when the mouse is over a particular text ...
    Say if i have a list of fruits i want an apple thumbnail on the corner of the text when am over it... and a banana when am over the banana..
    Hope yall get the question.. Workin on a webpage any help would be great.. thx in advance
    Here`s wat ive got so far... it opens only 1 thumbnail which ive predefined in the script.. can ne 1 temme .. how i can u se this script to call a particular image on a particular mouseover text event....

    <script>
    <!--
    var thumb = null;
    function showThumbnail(w hich,e)
    {
    thumb = document.getEle mentById('thumb ');
    if( thumb && thumb.style.vis ibility == 'hidden' )
    {
    thumb.style.lef t = e.pageX ? pageXOffset + e.clientX + 80 : document.body.s crollLeft + e.x - 15;
    thumb.style.top = e.pageY ? pageYOffset + e.clientY : document.body.s crollTop + e.y + 20;
    thumb.style.vis ibility = 'visible';
    thumb.innerHTML = '<img src="' + which + '">';
    }
    }
    function closeThumbnail( )
    {
    if( thumb )
    thumb.style.vis ibility = 'hidden';
    }
    -->
    </script>

    <div id="thumb" style="position : absolute; visibility: hidden; border: 1px solid black"></div>


    I call the function like this:-

    <A Href=http://www.google.com target='_blank' onmouseover="sh owThumbnail('ht tp://www.myserver.co m/images/t1140107714oran gerecplayer.jpg ', event)" onmouseout="clo seThumbnail()" > My Text link</A>
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    Just change the src of the image instead:
    [CODE=javascript]imgObj.src='new image.gif';[/CODE] You could define an array which contains your thumbnails and access them using the indices.

    Comment

    Working...