HTML map hotspots not working in Firefox
I have the attached code to generate hotspots in a map that will redirect to another page. ITt works fine on IE but does not seem to work on Firefox. It seems only a very small portion in the bottom of the image seems to work. Please help. thanks
<div style="Z-INDEX: 102; LEFT: 189px; POSITION: absolute; TOP: 157px; " >
<img style="Z-INDEX: 102; LEFT: 4px; POSITION: absolute; TOP: 4px; width: 500px; height: 280px;border:0px;" src="/images/Sale.jpg" width="145" height="126" alt="ProductsOnSale" usemap="#mapProduct" />
<map name="ProductsOnSale" name = "mapProduct" id="mapProduct">
<area shape="rect" coords="15,125,145,280" href="/product.aspx?prd=9308222&s=1" alt="15 Sheet Capacity" />
<area shape="rect" coords="136,125,260,280" href="/product.aspx?prd=9308206&s=1" alt="20 Sheet Capacity" />
<area shape="rect" coords="251,125,380,280" href="/product.aspx?prd=9308230&s=1" alt="25 Sheet Capacity" />
<area shape="rect" coords="371,125,500,280" href="/product.aspx?prd=9308214&s=1" alt="65 Sheet Capacity" />
</map>
</div>
It seems to work if you specify the link path as href="./product.aspx?prd=9
<div style="Z-INDEX: 102; LEFT: 189px; POSITION: absolute; TOP: 157px; " >
<img style="Z-INDEX: 102; LEFT: 4px; POSITION: absolute; TOP: 4px; width: 500px; height: 280px;border:0px;" src="/images/Sale.jpg" width="145" height="126" alt="ProductsOnSale" usemap="#mapProduct" />
<map name="ProductsOnSale" name = "mapProduct" id="mapProduct">
<area shape="rect" coords="15,125,145,280" href="./product.aspx?prd=9308222&s=1" alt="15 Sheet Capacity" />
<area shape="rect" coords="136,125,260,280" href="./product.aspx?prd=9308206&s=1" alt="20 Sheet Capacity" />
<area shape="rect" coords="251,125,380,280" href="./product.aspx?prd=9308230&s=1" alt="25 Sheet Capacity" />
<area shape="rect" coords="371,125,500,280" href="./product.aspx?prd=9308214&s=1" alt="65 Sheet Capacity" />
</map>
</div>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Removed the name attribute still doesnt work
Ok, this works in Firefox but Only if the image is actually displayed. Until I substituted an image in there, the hotspots didn't work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Usemap</title>
</head>
<body>
<h1>Usemap</h1>
<div style="z-index: 102; left: 189px; position: absolute; top: 157px; " >
<img style="z-index: 102; left: 4px; position: absolute; top: 4px; width: 500px; height: 280px; border:0px;" src="flowercrop22.jpg" alt="ProductsOnSale" usemap="#mapProduct" />
<map name = "mapProduct" id="mapProduct">
<area shape="rect" coords="15,125,145,280" href="./product.aspx?prd=9308222&s=1" alt="15 Sheet Capacity" />
<area shape="rect" coords="136,125,260,280" href="./product.aspx?prd=9308206&s=1" alt="20 Sheet Capacity" />
<area shape="rect" coords="251,125,380,280" href="./product.aspx?prd=9308230&s=1" alt="25 Sheet Capacity" />
<area shape="rect" coords="371,125,500,280" href="./product.aspx?prd=9308214&s=1" alt="65 Sheet Capacity" />
</map>
</div>
</body>
</html>SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Buggy behavior all depends on which version of Firefox you are running.
ASKER
thx
Similar problem solved here:
https://www.experts-exchange.com/questions/26875761/Please-help-me-figure-out-how-to-use-multiple-image-maps-one-for-each-image-loaded-by-clicking-a-link-Thanks.html
Uses javascript to set the useMap attribute.