Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2006
    Thanked 1 Time in 1 Post

    <map> ... </map>


    I have a <div> with a background image on which i would like to use the <map></map> tags to set a link at a certain spot.

    Now I can do the map function on an image that is shown after the map has been declared with the usemap attribute, but is there a way to do this on a div as well or do I have other means to set links at certain spots of a background image?

  2. #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Splendora, Texas, United States of America
    Thanked 317 Times in 311 Posts
    You can do this (without the map element), but it depends on whether or not the selectable region is rectangular.

    Edit: The selectable region must be rectangular. However, now that I think about it, I would recommend against using the technique since it would result in duplicated content and decrease accessibility.

    <div><a href="/"><img alt="…" width="…" height="…" src="…"></a></div>
    In the above code, the image element would be completely transparent (or a repeat of the content underneath). The anchor element would be positioned over the “selectable” area of the background and the image within would be styled such that its width and height are of the same dimensions as this selectable area. With this, you would have a fall‐back in case (A) the images fail to load and (B) in case CSS is disabled. The fall‐back in the case of (B) would be pretty poor though since you couldn’t see anything unless you used the mentioned repeat of content. In the case of (A), if the anchor image failed to load but the background image did not, you would end up with duplicate text over the background image. If the reverse happened and the anchor image loaded, but the background image did not, then you would have an invisible link unless you used the mentioned repeat of content. (A) would, however, work fine if both images failed to load.
    Last edited by Arbitrator; 06-03-2007 at 02:00 PM. Reason: I described the technique that I was referencing.
    For every complex problem, there is an answer that is clear, simple, and wrong.

    CSS Specifications


Posting Permissions

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