change the image of an image map

[chris9902]

i want to make it so the image that appears in the image map is controlled using CSS.

how could i do that?

[toicontien]

How do you mean control the image?

[chris9902]

well when you set up and image map you add something like src="image.gif" now can the image you are mapping be controlled in the CSS code.

[MotherNatrsSon]

Post the whole line of code for your image map??

I am not familiar enough with the code for them but if I see all the tags I can probaly figure out how to style it.

MNS

[chris9902]

like this


<IMG SRC="theimage.gif" WIDTH=400 HEIGHT=50 ALT="" BORDER="0" usemap="#theimage">

<map name="theimage">
<area shape="rect" coords="1,1,100,50" href="page1.htm">
<area shape="rect" coords="101,1,200,50" href="page2.htm">
<area shape="rect" coords="201,1,300,50" href="page3.htm">
<area shape="rect" coords="301,1,400,50" href="mailto:you@yourserver.com">
</map>


the IMG SRC="theimage.gif" is what i want to be in the CSS and not in the HTML

[MotherNatrsSon]

style the img tag and if you have more than one image assign an id or class to it

img { width: 400px;
height:50px;
border: 0;
}

If you need a class

.map { width: 400px;
height:50px;
border: 0;
}

<img class="map" src="theimage.gif" alt="SOME TEXT HERE" usemap="#theimage">

I think that is what you want.

MNS

[chris9902]

???? :confused:

[chris9902]

i need to change the SRC not the width etc

[MotherNatrsSon]

Well that reply was helpful.

Do you want to make the image a background image in the CSS and then have it work as an image map? More details in your reply would be good.

MNS

[chris9902]

yes that is it.

[MotherNatrsSon]

Ok. Lets try this then. I am not sure if it will work but give it a go....

CSS

#theimage { width: 400px;
height:50px;
border: 0;
background-image: url(theimage.gif);
background-repeat: no-repeat;
background position: top center;
}

HTML

<div id="theimage" usemap="#theimage">
<map name="theimage">
<area shape="rect" coords="1,1,100,50" href="page1.htm">
<area shape="rect" coords="101,1,200,50" href="page2.htm">
<area shape="rect" coords="201,1,300,50" href="page3.htm">
<area shape="rect" coords="301,1,400,50" href="mailto:you@yourserver.com">
</map>
</div>

Best shot I got...LOL

MNS

[chris9902]

it does not work

[terribrill]

We need a little more description of what is happening instead of-doesn't work. I don't want to be rude, just a little more description would be GREAT!!! Thanks.:)

[chris9902]

i can't say much more then that.

the background image does not act a a replacement for the image

[MotherNatrsSon]

I have been in contact with "The Coding Gods" and what you ask is not possible. The "Gods" have spoken!!

LOL

MNS

[Aronya1]

I'm pretty sure you're confusing all of us. Originally posted by chris9902
the IMG SRC="theimage.gif" is what i want to be in the CSS and not in the HTML
CSS is intended as a way for you to create a set of display rules for the user's browser to follow, ie: Every time it encounters the <h1> tag, it will display the text in a certain color, at a certain size, centered, etc. MotherNatrsSon's code attacks your issue as well as anything, given the limited description you've given.
Originally posted by chris9902
the background image does not act a a replacement for the image
What background image?
Want to take a shot at explaining exactly what it is you want to happen?