Forum Moderators: open
but I can't locate the javascript code to place in the <head> to make it work?
CSS
img.mouseover {display: none;}
div.example:hover img.mouseover {display: block;}
HTML
<div class="example">
<img alt="" class="mouseover" src="example.jpg" />
</div>
In English this tells the browser to change the CSS attributes of the image when the div it is within has it's state change (hover on the div, you can change it to whatever you want of course).
This will not work in IE until version 7 comes out (Beta 2 earliest) so if you absolutely need this to work in IE6 please post in better detail exactly what you're trying to do not recall seeing that JS code you posted before.
John
I understand what you're suggestions are, however, I am using this in wordpress for links displayed in the sidebar, & an online contact modified links.php for me in order to incorporate the above code on the presumption that I had the correct javascript in the head, which I managed to accidentally delete & now can't find.
onMouseOver="showThumbnail('http://www.domain.com/filename.jpg',event)"
ShowThumbnail() is a user defined function -- what goes into that function is the issue. If it's not already defined in either 1) the head or 2) an external js file, then you need to have that function coded again or find it in a backup somewhere.
Also note that 'event' is a user defined variable -- that must also be taken care of.
This is probably nothing more than a copy/paste typo in your post, but you are missing an open parenthesis:yes, I made a type when I removed the url
onMouseOver="showThumbnail('http://www.domain.com/filename.jpg',event)"
ShowThumbnail() is a user defined function -- what goes into that function is the issue. If it's not already defined in either 1) the head or 2) an external js file, then you need to have that function coded again or find it in a backup somewhere.Also note that 'event' is a user defined variable -- that must also be taken care of.
yes, but I don't know the code, I know pretty much nothing about writing javascript.. I had a cut & paste code, but lost the part that goes into the head. I want a thumbnailed image to be displayed when visitor mouses over the text link, but can't find the code for this. Basically, I need a resource with a cut & paste for this code, or some tool that will generate the code for me, so when user mouses over text link a small image pops up.
ok, so here's the code & it seems to function; but I have some display issues.. the image is showing extremely slightly by the right border of the browser window, as the text links are in the sidebar of wordpress. I know nothing about page coordinates, but need to mess with the numbers to get the image to show better than where it does now.
<script>
var thumb = null;
function showThumbnail(which,e)
{
thumb = document.getElementById('thumb');
if( thumb && thumb.style.visibility == 'hidden' )
{
thumb.style.left = e.pageX? pageXOffset + e.clientX + 20 : document.body.scrollLeft + e.x + 20;
thumb.style.top = e.pageY? pageYOffset + e.clientY : document.body.scrollTop + e.y;
thumb.style.visibility = 'visible';
thumb.innerHTML = '<img src="' + which + '">';
}
}
function closeThumbnail()
{
if( thumb )
thumb.style.visibility = 'hidden';
}
</script>
