i want to make it so the image that appears in the image map is controlled using CSS.
how could i do that?How do you mean control the image?well when you set up and image map you add something like src=http://www.webdeveloper.com/forum/archive/index.php/"image.gif" now can the image you are mapping be controlled in the CSS code.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.
MNSlike this
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"theimage.gif" WIDTH=400 HEIGHT=50 ALT="" BORDER="0" usemap="#theimage">
<map name="theimage">
<area shape="rect" coords="1,1,100,50" href=http://www.webdeveloper.com/forum/archive/index.php/"page1.htm">
<area shape="rect" coords="101,1,200,50" href=http://www.webdeveloper.com/forum/archive/index.php/"page2.htm">
<area shape="rect" coords="201,1,300,50" href=http://www.webdeveloper.com/forum/archive/index.php/"page3.htm">
<area shape="rect" coords="301,1,400,50" href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">
</map>
the IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"theimage.gif" is what i want to be in the CSS and not in the HTMLstyle 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=http://www.webdeveloper.com/forum/archive/index.php/"theimage.gif" alt="SOME TEXT HERE" usemap="#theimage">
I think that is what you want.
MNS????
i need to change the SRC not the width etcWell 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.
MNSyes that is it.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=http://www.webdeveloper.com/forum/archive/index.php/"page1.htm">
<area shape="rect" coords="101,1,200,50" href=http://www.webdeveloper.com/forum/archive/index.php/"page2.htm">
<area shape="rect" coords="201,1,300,50" href=http://www.webdeveloper.com/forum/archive/index.php/"page3.htm">
<area shape="rect" coords="301,1,400,50" href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">
</map>
</div>
Best shot I got...LOL
MNSit does not workWe 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.
i can't say much more then that.
the background image does not act a a replacement for the imageI have been in contact with "The Coding Gods" and what you ask is not possible. The "Gods" have spoken!!
LOL
MNSI'm pretty sure you're confusing all of us. Originally posted by chris9902
the IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"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?
how could i do that?How do you mean control the image?well when you set up and image map you add something like src=http://www.webdeveloper.com/forum/archive/index.php/"image.gif" now can the image you are mapping be controlled in the CSS code.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.
MNSlike this
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"theimage.gif" WIDTH=400 HEIGHT=50 ALT="" BORDER="0" usemap="#theimage">
<map name="theimage">
<area shape="rect" coords="1,1,100,50" href=http://www.webdeveloper.com/forum/archive/index.php/"page1.htm">
<area shape="rect" coords="101,1,200,50" href=http://www.webdeveloper.com/forum/archive/index.php/"page2.htm">
<area shape="rect" coords="201,1,300,50" href=http://www.webdeveloper.com/forum/archive/index.php/"page3.htm">
<area shape="rect" coords="301,1,400,50" href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">
</map>
the IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"theimage.gif" is what i want to be in the CSS and not in the HTMLstyle 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=http://www.webdeveloper.com/forum/archive/index.php/"theimage.gif" alt="SOME TEXT HERE" usemap="#theimage">
I think that is what you want.
MNS????
i need to change the SRC not the width etcWell 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.
MNSyes that is it.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=http://www.webdeveloper.com/forum/archive/index.php/"page1.htm">
<area shape="rect" coords="101,1,200,50" href=http://www.webdeveloper.com/forum/archive/index.php/"page2.htm">
<area shape="rect" coords="201,1,300,50" href=http://www.webdeveloper.com/forum/archive/index.php/"page3.htm">
<area shape="rect" coords="301,1,400,50" href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">
</map>
</div>
Best shot I got...LOL
MNSit does not workWe 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.
i can't say much more then that.the background image does not act a a replacement for the imageI have been in contact with "The Coding Gods" and what you ask is not possible. The "Gods" have spoken!!
LOL
MNSI'm pretty sure you're confusing all of us. Originally posted by chris9902
the IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"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?