Imagemap buttons dont work.

LlamaFromHell

08-12-2011, 08:17 AM

I am building a website for a computer parts reseller, and I have build most of the site including this image map.
I have been coding in Dreamweaver, and in the preview mode i shows exactly where my image map areas are.
Anyway, my code is not working, when I preview my site in any browser, the image map buttons don't work.
Could you please look through my code and kindly tell me whats wrong? :confused:

<tr>
<td colspan="2"><img name="sidebar" src="images/eparts_r3_c1.jpg" width="347" height="536" border="0" alt="sidebar" usemap="#sidebar" /></td>
<td><iframe name="info_area" id="info_area" width="600" height="500" frameborder="0" src="welcome.html" /></td>
<td><img src="images/spacer.gif" width="1" height="536" border="0" alt="" /></td>
</tr>
</table><br />
<map id="sidebar" name="sidebar">
<area shape="rect" coords="190,231,339,265" onmouseover="this.src='ab_ro.jpg'"
onmouseout="this.src='ab_ro.jpg'" href="aboutus.html" alt="about us" target="info_area" />
<area shape="rect" coords="190,265,339,302" onmouseover="this.src='faq_ro.jpg'"
onmouseout="this.src='faq_ro.jpg'" href="aboutus.html" alt="faqs" target="info_area" />
<area shape="rect" coords="190,302,339,341" onmouseover="this.src='cu_ro.jpg'"
onmouseout="this.src='cu_ro.jpg'" href="aboutus.html" alt="contact" target="info_area" />
<area shape="rect" coords="171,460,267,495" onmouseover="this.src='p_ro.jpg'"
onmouseout="this.src='p_ro.jpg'" href="aboutus.html" alt="parts" target="info_area" />
</map>

bullant

08-12-2011, 08:41 AM

what are the buttons supposed to do?

LlamaFromHell

08-12-2011, 08:52 AM

a. link to an internal HTML file which appears in the iframe
b. roll-over

thanks

LlamaFromHell

08-12-2011, 11:41 PM

If your curious even before i added the target and mouseover tags it didn't work.

vikram1vicky

08-13-2011, 03:25 PM

Try following code. Its working:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<img src="11-1.jpg" alt="Map" width="670" height="552" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="77,130,168,178" href="ssd.htm" target="_blank" alt="sdsadw3q" />
<area shape="poly" coords="214,448,243,394,308,430,332,469,279,499" href="#" target="_blank" alt="wqewq" />
<area shape="circle" coords="551,370,7" href="#" alt="sadsad" />
<area shape="circle" coords="466,380,30" href="#" alt="sdsdsa" />
</map>
</body>
</html>

LlamaFromHell

08-14-2011, 08:04 PM

sorry but that bit of code doesn't help me at all :/

vikram1vicky

08-15-2011, 09:55 AM

It is just as sample for you.. you can cross verify your code with this working code and sort out you problem :)

LlamaFromHell

08-15-2011, 08:28 PM

Cross-checking didn't help :(

I uploaded my full html with the imagemap in question here:
http://eparts-test.webs.com/eparts.htm

vikram1vicky

08-16-2011, 09:18 AM

I noticed 2 errors in your page.

Closing tag </iframe> is missing.

image map code is not on the page.

Replace your page code with following code and it will work perfectly fine:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body bgcolor="#ffffff">
<table width="996" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<tr>
<tr>
<tr>
<td colspan="2">
<img width="347" height="536" border="0" usemap="#links" alt="sidebar" src="images/eparts_r3_c1.jpg" name="sidebar">
</td>
<td>
<iframe id="info_area" width="600" height="500" frameborder="0" src="welcome.html" title="info_area" name="info_area"></iframe>
</td>
</tr>
</tbody>
</table>

<map name="links" id="links">
<area shape="rect" coords="29,66,289,198" href="http://google.com" target="_blank" alt="sdsds" />
</map>
</body>
</html>

LlamaFromHell

08-16-2011, 09:58 PM

wow...it was just that I was trying to close the iframe by using /> at the end of the tag rather then making a separate end tag. I knew it was going to be something stupid like that, lol. thank you very much. :D

FuquayDentist

08-17-2011, 12:13 AM

my take these days is that you should do little coding yourself. With Drupal and Wordpress, or DotNetNuke available with thousands of templates... unless you are coding a web application, you're better off using a Content Management System that uses themes and / or templates. Just take a look at Themeforest.com to get an idea of what I'm talking about.:thumbsup: