Solved

HTML map hotspots not working in Firefox

Posted on 2011-09-06
8
263 Views
Last Modified: 2012-06-27
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>

Open in new window

0
Comment
Question by:TrialUser
  • 2
  • 2
  • 2
  • +1
8 Comments
 
LVL 16

Expert Comment

by:sjklein42
ID: 36493142
Firefox is ignoring the non-standard attribute useMap on the href tag.  

Similar problem solved here:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_26875761.html

Uses javascript to set the useMap attribute.
0
 
LVL 5

Expert Comment

by:winthropj
ID: 36493185
It seems to work if you specify the link path as href="./product.aspx?prd=9308222&s=1"
<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>

Open in new window

0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 250 total points
ID: 36493225
Maybe because you have two 'name' attributes when there should be only one.

<map name="ProductsOnSale" name = "mapProduct" id="mapProduct">
0
 

Author Comment

by:TrialUser
ID: 36495323
Removed the name attribute still doesnt work
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 36497348
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>

Open in new window

0
 
LVL 5

Assisted Solution

by:winthropj
winthropj earned 250 total points
ID: 36498235
It was working for me without the image. It showed the outline and when mousing over the different areas showed the proper path info.
0
 
LVL 16

Expert Comment

by:sjklein42
ID: 36498286
Buggy behavior all depends on which version of Firefox you are running.
0
 

Author Closing Comment

by:TrialUser
ID: 36578031
thx
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now