www.webdeveloper.com
Results 1 to 5 of 5

Thread: using image map on bacground image

  1. #1
    Join Date
    Feb 2011
    Posts
    90

    using image map on bacground image

    Hi,

    How can I use image map on background image that define in the css:
    Code:
    body{
    			background:white url('mivzakon_004.png') no-repeat center top;
    		}
    I want to set image map for it and define part of the image as a link.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,148
    You can't use a background image for an image map. Image maps require an <img> tag. The only way I can think of to do something like this would be to stack two <div>s using position:absolute and z-index, giving the bottom <div> your desired background image and using a transparent gif or png in an <img> tag to use for your image map. Good luck!

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    I made an image map as a background while still maintaining the clickable areas: Example Need more info on how, let me know.

  4. #4
    Join Date
    Feb 2011
    Posts
    90
    Quote Originally Posted by Major Payne View Post
    I made an image map as a background while still maintaining the clickable areas: Example Need more info on how, let me know.
    Hi,
    First thank you very much.

    Something confusing me in your implementation.
    from what I see you indeed used the img tag.

    So far what do you need the background image if you use the img tag?
    And the map is only for the image in the image tab and not for the image in the background, am I wrong?

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    The image map itself was put in as a background on the CSS. I took the same image and loaded it into my Xara graphics program and set it to full transparency and saved it as a .png. Then you'll maintain the image map as a background, but it has the clickable area on the transparent image.

    I know you expected to just code the image map as a background and have its clickable areas still work, but not going to work that way for now. Since there are more ways to skin a cat, maybe someone will come up with a working example where only one image is used and called as a BG image. Thinking on it. Sorry if my idea didn't do exactly what you wanted. I do have some other ideas.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles