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>
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>
Comment