Jen53403
Programmer
- Jul 17, 2006
- 22
I have an unordered list of links to different pages, and each list item has an "onmouseover" attribute that triggers a Javascript function mouseOver(prod). This function changes the src of the main image on the page to a different image file, depending on the value of prod. So the user can move his mouse over the list of items and view a picture of the item his mouse is hovering over. When the mouse is not hovering over any of the list items, the image src reverts to a default file. This is accomplished using an "onmouseout" attribute attached to the ul.
This all works the way it should, but I have one issue with it. There is a very small space between each list item that is not a "hotspot" and where the main image would switch back to the default. So the user moves his mouse over all the items, and the default image flashes briefly between each item. I hope this makes sense. How can I eliminate this annoying little problem? Here is the relevant code:
This all works the way it should, but I have one issue with it. There is a very small space between each list item that is not a "hotspot" and where the main image would switch back to the default. So the user moves his mouse over all the items, and the default image flashes briefly between each item. I hope this makes sense. How can I eliminate this annoying little problem? Here is the relevant code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<script type="text/javascript">
function mouseOver(prod)
{
document.display.src = "prod_imgs/" + prod + ".jpg";
}
function mouseOut()
{
document.display.src = "prod_imgs/all_products.jpg";
}
</script>
</head>
<body>
<div id="product-tabs">
<ul onmouseout="mouseOut()">
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('temp')">Temperature</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('level')">Level</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('pressure')">Pressure</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('flow')">Flow meters</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('sanitary')">Sanitary</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('controls')">Controls</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('valves')">Valves</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('pneumatics')">Pneumatics</a></li>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="mouseOver('heat_exchanger')">Heat exchangers</a></li>
</ul>
</div>
<div id="product-images">
<img src="prod_imgs/all_products.jpg" alt="product images" name="display">
</div>
</body>
</html>
