Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Imagemap buttons dont work.

    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?

    Code:
      <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>

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    what are the buttons supposed to do?

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    a. link to an internal HTML file which appears in the iframe
    b. roll-over

    thanks
    Last edited by LlamaFromHell; 08-12-2011 at 07:36 PM.

  • #4
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    If your curious even before i added the target and mouseover tags it didn't work.

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Try following code. Its working:
    Code:
    <!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>

  • #6
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    sorry but that bit of code doesn't help me at all :/

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    It is just as sample for you.. you can cross verify your code with this working code and sort out you problem

  • #8
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Cross-checking didn't help

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

  • #9
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    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:

    Code:
    <!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>

  • Users who have thanked vikram1vicky for this post:

    LlamaFromHell (08-16-2011)

  • #10
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #11
    New Coder
    Join Date
    Aug 2011
    Location
    Fuquay Varina NC
    Posts
    21
    Thanks
    1
    Thanked 2 Times in 2 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •