SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    NSW, Australia
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Client Side Image Maps

    I purchased "HTML, XHTML & CSS sixth edition" by Elizabeth Castro recently and have been going through it at work.

    Chapter 6, page 117, discusses creatign a client side image map, which allows you to have an image with clickable areas. I've checked my coding against her example, and I can't get the clickable areas to work. i.e, they won't come up as links as they should. Coding for the page is as follows: (My first fully validated page!! )
    Quote Originally Posted by My 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>
    <title>Max Fox Electrical and Inland Hot Water: The Electrical, Motor, Pool and Hot Water Specialists</title>
    <meta http-equiv="Content-Language" content="en-au" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="Max Fox, Electrical, Inland, Hot, Water, Electric, Motors, Pumps, Pressure, Cleaners, Power, Tools, Hot, Water, Solar, welders, chlorinators, " />
    <meta name="Description" content="Max Fox Electrical and Inland Hot Water is a locally owned and operated company specialising in electric motors, electric and solar hot water installations and commercial electrical installations and mainainence...." />

    <link rel="stylesheet" type="text/css" href="styles.css" />

    </head>
    This is the code which is supposed to turn the image into clickable links. The coords are x and y for top left and bottom right of the various sections respectively:
    <body>
    <p>
    <map name="Header" id="Header">
    <area shape="rect" coords="10.26, 1.10, 13.06, 1.69" href="testindex.htm" alt="Link to Home Page" />
    <area shape="rect" coords="3.61, 0.98, 10.04, 1.68" href="HWS/HWS.htm" alt="Link to Hot Water Page" />
    <area shape="rect" coords="10.26, 1.10, 13.06, 1.69" href="http://hia.com.au/" target="_blank" alt="Link to HIA Website" />
    <area shape="rect" coords="10.99, 0.03, 11.97, 1.07" href="http://www.toolsforyourtrade.com.au" target="_blank" alt="Link to the Tools for your Trade website" />
    </map>
    <img src="Header.jpg" border="0" width="981" height="105" alt="Header image map with links" usemap="#Header" />
    </p>

    </body>

    </html>

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't have decimal places in your coordinates can you?

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And to think I won't have access to the book again for a week or so (the only bad thing about libraries - you have to eventualy return the book so others can use them).

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    NSW, Australia
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    she doesn't mention, as far as i can see, about the legality of decimal places. She says to use the co-ordinates from the file info panel in photoshop to get the right co-ordinates, which is what I have done.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You may have found an error in the book then. I'd check www.peachpit.com and www.cookwood.com for any erratas then.

  6. #6
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Save yourself a lot of time mate - nobody codes imagemaps by hand any more...

    Download a trial version of Dreamweaver from http://www.adobe.com/products/dreamweaver/ (or any other editor that supports image maps) and you'll be surprised how easily you can create image maps.
    procureNET.biz
    Global B2B Trade & eProcurement

  7. #7
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R3DL1N3
    she doesn't mention, as far as i can see, about the legality of decimal places. She says to use the co-ordinates from the file info panel in photoshop to get the right co-ordinates, which is what I have done.
    In the wrong metric - your coordinate system should be set to pixels - not inches, not centimeters, not whatever metric you are using... That appears to be the heart of your problem here. Your image seems to be set to inches at 75dpi, (I'm guessing... 13.06*75=979.5, almost your 981) - you need the pixel locations as inches means exactly two things to most browsers... and jack left town, took his **** with him.

    Pretty much, you multiply your existing numbers by 75, round them off to whole numbers, and you should be good to go.

    See how your width is set to 981px and the height is set to 105? That means your coordinates should be from 0..980 on the X axis and 0..104 on the Y.

    It is THEORETICALLY POSSIBLE to do it with percentages instead of pixels (according to the spec), though I've never actually seen that done.

  8. #8
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is Liz's code with decimals - it "works" (though I am not sure why you would need them) - so would yours I imagine if you had different coordinates (remove all of yours and superimpose just one of Liz's areas/links and mouse over about 400 pixels from the left and you will get a link). No mistake in Liz's code here.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="content-type"
     content="text/html; charset=iso-8859-1" />
      <title>Creating a client-side image map</title>
    </head>
    <body>
    <p>
    <map name="banner" id="banner">
    <area shape="rect" coords="395.11, 18.11, 445.11, 35.11"
     href="http://www.cookwood.com/html6ed/examples/links/newinfo.html"
     alt="new information" />
    <area shape="rect" coords="395, 38, 445, 55"
     href="http://www.cookwood.com/html6ed/examples/links/pressrelease.html"
     alt="press releases" />
    <area shape="rect" coords="395, 58, 445, 75"
     href="http://www.cookwood.com/html6ed/examples/links/events.html"
     alt="events" />
    </map>
    <img
     src="http://www.cookwood.com/html6ed/examples/links/clickimage.gif"
     alt="SE banner" usemap="#banner" height="100"
     width="450" />
    </p>
    <div id="content">
    <h1>Starsearch Enterprises</h1>
    <a href="http://www.cookwood.com/html6ed/examples/links/newinfo.html">New
    programs</a><br />
    <a
     href="http://www.cookwood.com/html6ed/examples/links/pressrelease.html">Press
    releases</a><br />
    <a href="http://www.cookwood.com/html6ed/examples/links/events.html">Upcoming
    events</a><br />
    <a href="http://www.cookwood.com/html6ed/examples/links/infoSE.html">About
    Starsearch
    Enterprises</a><br />
    </div>
    </body>
    </html>

  9. #9
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wanted to add that deathshadow is absolutely right - if you had the right metric set (pixels) then the coordinates from the inspector/info panel would be proper. I just wanted to point out that decimals are useless here (though apparently not invalid) and that Liz's suggested method is a viable one.

    Depending on how complex the map is it might be easier to use a tool (such as Dreaweaver, which was mentioned) to spit out the coordinates/code for you. I am assuming you're on Windows - GeoHTML, which is a small standalone app specifically for image map creation, might make life a little easier - it's even free.

  10. #10
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R3DL1N3
    she doesn't mention, as far as i can see, about the legality of decimal places. She says to use the co-ordinates from the file info panel in photoshop to get the right co-ordinates, which is what I have done.
    From page 116, step 4 (where you were following along):
    Make sure that the units are pixels (by clicking the tiny arrow next to the cross hairs at the bottom of the Info window).

    --------------

    Liz is really thorough (the book has been out for a long time and seen many editions) and would not steer you wrong - as long as you follow all the intructions. Note than when set to pixels you will no longer be seeing decimals in the Info panel.

    The important thing is that it will work now and you are armed with a great book to continue to learn from .

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    NSW, Australia
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys..yeah it was set to centimetres not pixels. oops.

    I fixed that and yeah its a goer now. After the problems I had with FP Im going to avoid using any of those programs except for the coding side of thigns. Numbered lines make it so much easier when you're trying to validate and correct any problems.

    And yeah, this has been a great book to work out of so far. I have learnt so much in the first few chapters alone.

  12. #12
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R3DL1N3
    After the problems I had with FP Im going to avoid using any of those programs except for the coding side of thigns. Numbered lines make it so much easier when you're trying to validate and correct any problems.
    There are some excellent free text editors with syntax highlighting, snippets, line numbers etc. for Windows and one spectacular CSS editor.

    I highly recommend Araneae for .html, .php, .js etc - any code.

    Topstyle lite makes CSS easier to edit, create and learn - you can even preview changes in realtime.

    For the most part that is all you need (you could even use Araneae for your CSS - it does nicely).

    I like nimble focused tools, with no fluff, best - these are two exemplary examples and they are even Windows only - go figure - makes me a little jealous . The right tools will help you improve your code and coding habits instead of compromise them like FP can.


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
  •