Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Apr 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile CSS equivalent of image map

    Hello,
    Can someone tell me what is the CSS equivalent of HTML image maps?
    I was thinking maybe sprites could do it even though they aren't exactly made as a replacement for image maps.

    Thank you.
    Last edited by ShannenS; 04-16-2010 at 12:24 AM.

  • #2
    New Coder
    Join Date
    Apr 2010
    Location
    Norfolk, UK
    Posts
    34
    Thanks
    0
    Thanked 2 Times in 2 Posts
    It might be easier if you tell us exactly what you want to do.

    You can put a div within another, position it using css then use javascript to use it as a link:
    Code:
    <div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
    Not ideal for search engines though.

  • #3
    New Coder
    Join Date
    Apr 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok well someone asked me to implement a feature in their site that, when clicked, changes the layout and title of the page without refreshing so that when the user clicks a part of the page it reverts the style and title back to the original page.

    What I have so far is this:

    Hidden style:
    Code:
    body 
    { 
    background-image:url(google.gif');
    }
    
    body * { display: none !important; }
    Link to activate style:
    Code:
    <a href=javascript:(function(){var%20s=document.createElement('link');s.setAttribute('href','style3.css');s.setAttribute('rel','stylesheet');s.setAttribute('type','text/css');document.getElementsByTagName('head')[0].appendChild(s);})();title()>activate</a>
    title() (javascript):
    Code:
    function fix()
    {
    	var s = "Google";
    	document.title = s;	
    }
    </script>
    This changes the whole content of the page to google.gif which is a two frame gif of google.com. The reason it is a gif is because googles default action is to place the focus on the search box when that happens there is a blinking line in the box.

    The only problem is that you have to refresh to get it back which makes and form data disappear. I need it so that when the user clicks on a small part of the image the style resets back to default without refreshing. I was going to include some kind of image map (hence me wanting to find the CSS equivalent of an image map) in the "Hidden" style sheet.


    If you need more info let me know.

  • #4
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by ShannenS View Post
    Can someone tell me what is the CSS equivalent of HTML image maps?
    It could be done with divs and anchor tags as in the example below.

    However why use CSS when the map tag works well, is not deprecated, and will likely be unchanged in HTML5?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang='en'>
    <head>
    <meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
    <title>CSS Imagemap</title>
    <style type="text/css">
    div.map img.map {
    width:200px;
    height:200px;
    position:relative;
    }
    div.map a {
    width:100px;
    height:100px;
    text-decoration: none;
    display:block;
    position:relative;
    }
    div.map a.map1 {
    top: -200px;
    left: 0;
    }
    div.map a.map2 {
    top: -200px;
    left: 0;
    }
    div.map a.map3 {
    top: -400px;
    left: 100px;
    }
    div.map a.map4 {
    top: -400px;
    left: 100px;
    }
    </style>
    </head>
    <body>
    <h1>CSS Imagemap</h1>
    <p>Here is a CSS version of an image map.  Links are associated with each quadrant of the image below using divs and CSS.</p>
    <div class="map">
    <img src="pic.png" class="map" alt="">
    <div><a href="#1" title="link 1" class="map1">&nbsp;</a></div>
    <div><a href="#2" title="link 2" class="map2">&nbsp;</a></div>
    <div><a href="#3" title="link 3" class="map3">&nbsp;</a></div>
    <div><a href="#4" title="link 4" class="map4">&nbsp;</a></div>
    </div>
    </body>
    </html>
    The above has the advantage of being sort of SE friendly. I say sort of because it has blank link text - one of the key things that SEs need to work out what is at the other end of the link. Using the a tag's title attribute will go part way to alleviating this short coming.

    If you do need to go down the route of using something like the above, please be aware that it is more of a proof of concept, than a suggestion for working code. I'm sure there are better ways of implementing this.
    Last edited by mbaker; 04-14-2010 at 02:00 PM. Reason: Added quote from first post for context.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #5
    New Coder
    Join Date
    Apr 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    How do I replace the page contents with that page you have posted without refreshing or redirecting the page? Don't worry about making it SE friendly because it is not supposed to be.

  • #6
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by ShannenS View Post
    How do I replace the page contents with that page you have posted without refreshing or redirecting the page? Don't worry about making it SE friendly because it is not supposed to be.
    Here is a version that switches between two versions of the page without a refresh or redirect.

    However, while I don't fully understand what you are trying to achieve, I'm sure there must be a simpler way to do it than displaying gif images of what the visitor should be seeing, if only you knew how to modify what they should be seeing so that it does what you want it to do.

    That said, here's the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang='en'>
    <head>
    <meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
    <title>CSS Imagemap</title>
    <style type="text/css">
    div#nomap {
    }
    div#withmap {
    display:none;
    }
    div.map {
    height:200px;
    overflow:hidden;
    }
    div.map img.map {
    width:200px;
    height:200px;
    position:relative;
    }
    div.map a {
    width:100px;
    height:100px;
    text-decoration: none;
    display:block;
    position:relative;
    }
    div.map a.map1 {
    top: -200px;
    left: 0;
    }
    div.map a.map2 {
    top: -200px;
    left: 0;
    }
    div.map a.map3 {
    top: -400px;
    left: 100px;
    }
    div.map a.map4 {
    top: -400px;
    left: 100px;
    }
    </style>
    <!-- styley.js avaiable from http://developer.apple.com/internet/webcontent/examples/styley_source.html -->
    <script src="styley.js" type="text/javascript"></script>
    <script type="text/javascript">
    function switchdiv(toid,fromid) {
    /*alert("switching from "+fromid+" to "+toid);*/
    setStyleById(toid, "display", "inherit");
    setStyleById(fromid, "display", "none");
    return false;
    }
    </script>
    </head>
    <body>
    <h1>CSS Imagemap</h1>
    <div id="container">
      <div id="nomap">
        <p>To switch to the image version of this page <a href="javascript:switchdiv('withmap','nomap')">click here</a>.</p>
      </div>
      <div id="withmap">
        <p>Here is a CSS version of an image map.  Links are associated with each quadrant of the image below using divs and CSS.</p>
        <div class="map">
          <img src="pic.png" class="map" alt="">
          <div><a href="#1" title="link 1" class="map1">&nbsp;</a></div>
          <div><a href="#2" title="link 2" class="map2">&nbsp;</a></div>
          <div><a href="#3" title="link 3" class="map3">&nbsp;</a></div>
          <div><a href="#4" title="link 4" class="map4">&nbsp;</a></div>
        </div>
        <p>To switch to the no image version of this page <a href="javascript:switchdiv('nomap','withmap')">click here</a>.</p>
      </div>
    </div>
    </body>
    </html>
    Last edited by mbaker; 04-15-2010 at 03:55 PM. Reason: Deleted redundant </script> tag
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #7
    New Coder
    Join Date
    Apr 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Don't worry about the reason why just believe me its easier using an animated gif =).

    Anyway I download scriptley and made 200x200 pic.png but all it does is print "false" on a page.

    See screenshots attached.
    Attached Thumbnails Attached Thumbnails CSS equivalent of image map-step1.png  
    Attached Images Attached Images  

  • #8
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by ShannenS View Post
    I download scriptley and made 200x200 pic.png but all it does is print "false" on a page.
    OK, so I should have tested in more browsers. I get the same result (false) when I view my file with Internet Explorer 8 and with Firefox 3.6.

    My code does work in Google Chrome 4.1.

    I'll go and have a look.

    ...

    I've found the problem. By deleting from the switchdiv() function the line:
    Code:
    return false;
    this example works in Firefox 3.6 and Google Chrome 4.1. However in IE 8 the div switching works, but the CSS image map does not work.

    I'll go and have another look.

    ...

    Ok, I've found a way to get it to work in IE 8. To the style for div.map a add:
    Code:
    background:url(transprent.gif);
    However please don't ask why it should make it work as I don't know. I found this by accident while investigating what was happening - at least I found that the image map worked if the div.map a style had a background and the only one that I know of that lets you see the underlying image is to use a transparent image over the top of the image you want to add the map to.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • Users who have thanked mbaker for this post:

    ShannenS (04-16-2010)

  • #9
    New Coder
    Join Date
    Apr 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow thanks works exactly as expected. Sorry for making you have to hack it for IE8. I use chrome but the person I'm making it for and most of his users also use IE8.


  •  

    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
    •