Assigning usemap to a css defined background image

[mikes]

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

Code:

A.panel { width: 200px; height: 100px; display: block; background: url(/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?

[mikes]

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

[mikes]

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(/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!

[Author]

Posts