SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Image map not working

    Hi,

    I have created an image map and it is not working in any browsers.

    Here is the code:

    <div id="locations_left_right"><img src="images/map3.png" width="90%" usemap="#imgmap201331112850" border="0">

    <map id="imgmap201331112850" name="imgmap201331112850">
    <area shape="circle" alt="Sheffield" coords="403,789,25" href="clinics_sheffield.html" />
    <area shape="circle" alt="Wilmslow" coords="321,835,23" href="clinics_wilmslow.html" />
    <area shape="circle" alt="Birmingham" coords="351,933,25" href="clinics_birmingham.html" /><area shape="circle" alt="Watford" coords="559,1043,23" href="clinics_watford.html" />
    <area shape="circle" alt="Brentwood" title="" coords="608,1058,26" href="clinics_brentwood.html.html" />
    <area shape="circle" alt="Maidenhead" coords="512,1092,24" href="clinics_maidenhead.html" />
    <area shape="circle" alt="London, Wimpole Street" coords="571,1093,25" href="clinics_london_wimpole_street" />
    <area shape="circle" alt="Hayward's Heath" coords="554,1148,24" href="clinics_haywards_heath.html" />
    <area shape="circle" alt="Southampton" coords="474,1186,24" href="clinics_southampton.html" />
    <area shape="circle" alt="Bournemouth" coords="395,1209,23" href="clinics_bournemouth.html" />
    </map>
    </div>

    Any help with this would be greatly appreciated. Thanks.

  2. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    The code is good. The problem can be from coords according to image size.
    For shape="circle" the first 2 coords give the center of the circle, the 3rd coord is for radius; coords="x_px, y_px, radius_length_px"'.
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Hmm. You can have; rect | circle | poly | and COORDS="left, top, right, bottom". For rect: left-x, top-y, right-x, bottom-y; the circle, which specifies a circular region using COORDS="centre-x, centre-y, radius"; poly, which specifies a polygonal region using COORDS="x1, y1, x2, y2, ..., xN, yN". The first x and y coordinate pair and the last should be the same to close the polygon.

    Coordinate values are relative to the top left corner of the object and may be expressed as pixels or percentages. Though the image map dimensions for the IMG should be defined in pixels NOT percentages. What is the size of the image itself, i.e. width and height attribute values in pixels? As those numbers look big and without the map itself it's harder to see where they are supposed to be.

  4. #4
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks for your replies. It is to do with the image not being a fixed width.

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes, like I mentioned in post #3 that IMG should be defined in Pixels not Percentages, glad you got it working though.


Tags for this Thread

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
  •