Using mouseover to display a picture

Question

I am trying to add a script to my site where I can mouseover a clickable text link and before clicking a description with a picture would appear in a specified box location. Please see something very similar on Subway's site: http://www.subway.com/applications/Menu/frmMenuPanel.aspx?CC=USA&LC=ENG&MenuID=36

Answer 1

On the image you can use either mouseover/out or mouseenter/leave if just doing it on IE.

You can then make visible a div that has an absolute position, with a zIndex = 1000 (or some large number), so that it will be on top of everything.

You may want to use setTimeout to delay before hiding the div again.

http://www.quirksmode.org/js/events_mouse.html

Answer 2

You work with two 'events' on the anchor tag to handle this; onemousover and onmouseout. You can then, in javascript, change the innerHTML property of your chosen div.

<div id="myDiv">
  Description
</div>
<a href="#" onmouseover="document.getElementById('myDiv').innerHTML = '<b>replaced txt</b>';"
            onmouseout="document.getElementById('myDiv').innerHTML = 'Description';">Wave</a>

You could specify images to inject or any HTML you want.

Answer 3

Okay, say you want to show a detail of an animal with a title in another spot on the page when you hover over a thumbnail link.

1> Make an array of large image picture names and labels.

var images=['cow_face.jpg','cat_tail.jpg','bat_ear.jpg'];
var image_labels=['A Holstein snacking','A sniddly cat','A listening bat'];

2> Set up a switching function

function switch(new_im_number){
 var zoom_img=document.getElementbyId('zoom_area');
 var label=document.getElementById('img_label');
 if(zoom_area==null || label==null){ return false; }

 zoom_img.src=images[new_im_number];
 label.innerHTML=image_labels[new_im_number];
 }

3> Set up your html.

<a href='cow.html'><img id='im_0' onmouseover='switch(0)' src='cow.jpg'></a><br>
<a href='cat.html'><img id='im_1' onmouseover='switch(1)' src='cat.jpg'></a><br>
<a href='bat.html'><img id='im_2' onmouseover='switch(2)' src='bat.jpg'></a><br>
<br>
<img id='zoom_area' src='blank.jpg'><br>
<span id='img_label'>No Zoom Yet</span>

You could also make an object instead of an array of images and then use words to retrieve each on, instead of array key numbers.

var images={'bat':'bat_lg.jpg','cat':'cat_face.jpg','sandwich':'grilled_cheese.jpg'};

and then your func invocation would be

onmouseover="switch('bat')"