SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Map not working on a Mac

    Hi

    I have created an image map (code below). Can't figure out what I am doing wrong.

    Code:
    <img src="http://ectpro.co/dyer/wp-content/uploads/2013/06/service-circles.jpg" usemap="#services" />
    
    <map name="services">
    <area shape="circle" coords="315,80,65"    href="http://ectpro.co/dyer/services#Needs">
    <area shape="circle" coords="110,290,65"   href="http://ectpro.co/dyer/services#Delivery">
    <area shape="circle" coords="315,290,65"   href="http://ectpro.co/dyer/services#Client">
    <area shape="circle" coords="520,290,65"   href="http://ectpro.co/dyer/services#Orientation">
    <area shape="circle" coords="315,500,65"   href="http://ectpro.co/dyer/services#Preparation">
    </map>
    
    
    
    <br/>&nbsp;<br/>
    <a name="Client"></a><br/><img src="http://ectpro.co/dyer/wp-content/uploads/2013/06/services-01a.jpg" width="800" />
    
    <a name="Needs"></a><br/><img src="http://ectpro.co/dyer/wp-content/uploads/2013/06/services-02a.jpg" width="800" />
    
    <a name="Orientation"></a><br/><img src="http://ectpro.co/dyer/wp-content/uploads/2013/06/services-03a.jpg" width="800" />
    
    <a name="Preparation"></a><br/><img src="http://ectpro.co/dyer/wp-content/uploads/2013/06/services-04a.jpg" width="800" />
    
    <a name="Delivery"></a><br/><img src="http://ectpro.co/dyer/wp-content/uploads/2013/06/services-05a.jpg" width="800" />

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Add a width="600" to the img tag. Your image is 480 pixels width, but the actual size to get the clickable areas to fall within the circles is to enlarge the image. This works:

    <img src="http://ectpro.co/dyer/wp-content/uploads/2013/06/service-circles.jpg" width="600" alt="" usemap="#services">
    Steve Husting


Bookmarks

Posting Permissions

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