Grow your CSS skills. Land your dream job.

Assigning usemap to a css defined background image

  • # October 31, 2008 at 2:24 am

    I have a bit of CSS that does an image replacement:

    Code:
    A.panel { width: 200px; height: 100px; display: block; background: url(http://cdn.css-tricks.com/images/imagename.gif) no-repeat bottom center; text-indent: -9999px; }

    and I need to turn the image into an imagemap:
    EDIT: I need to attach the usemap attribute to the image in a non-standard way:

    Code:
    [window.]document.images["imagename.gif"].useMap=”#imageMap”;

    I don’t know js though . I just made that bit up by cobbling together a few examples but it doesn’t seem to work.

    Does anyone know how to accomplish this?

    # October 31, 2008 at 2:33 am

    I don’t know a whole bunch about image maps but the little i do know says that you are suppose to have coordinates for the links.

    like described in this tutorial. the other thing you can do is google image maps. I found 33,400,000 results using this query – how to make an image map
    http://www.htmlcodetutorial.com/images/ … p_220.html

    # October 31, 2008 at 2:46 am

    The coords are detailed in an html map tag. I didn’t include them because I need to assign the usemap attribute to the image before it can see them.

    Normally you do a image map like this:

    Code:

    That’s off the top of my head so the syntax may be off but that’s basically the standard way.

    But I can’t use the <img> statement in that example. I need to define the image in a CSS image replacement (ie- background-image: url(‘images/imagename.gif’);) so I have no way to assign the usemap attribute.

    I’m hoping to use a DOM statement to attach it but I have never used DOM before. I’m guessing at syntax and can’t find an example that assigns it by name instead of by id.

    Hope that makes sense. I’m pretty worn out atm

    # October 31, 2008 at 2:51 pm

    Well, a good night’s sleep didn’t give me any inspiration :(

    I found a DOM statement that does just what I want but it assigns the usemap to an img by id instead of by name. I have no way of assigning an id to an image defined in this way:

    Code:
    A.panel { width: 200px; height: 100px; display: block; background: url(http://cdn.css-tricks.com/images/imagename.gif) no-repeat bottom center; text-indent: -9999px; }

    I could assign an id to the A tag in question but then the DOM statement would attempt to attach the usemap attribute to the A tag instead of to the image.

    <sigh>

    What I’m trying to accomplish through all this is to modify the garage door technique to work off of an image map instead of a single link. That way the image behind the panel can have different areas of the image assigned to different links. If I can get it working, it should be a very interesting effect!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".