hey...the title may seem confusing but see what i wanna do..i want to put various links over an image..<br />
<br />
see here what i mean <!-- m --><a class="postlink" href="http://www.blendomania.de.vu/">http://www.blendomania.de.vu/</a><!-- m --><br />
<br />
and in this attachment...you see the example, you click in each one of them and you get a different link. so how do i do that??<br />
<br />
thanx in advance
I'll appreciate<!--content-->Want you are after is a client side image map. As the word implies, you simply create map (defined by coordinates) to which you can attach links to the different parts.<br />
<br />
example, say you have an image which needs two links. The left hand side should have a link different from the right hand side. The image is 200 pixels wide and 50 pixels high. You then simply create an image map where you define two sets of coordinates: coordinate set 1: 0,0,100,50<br />
(left,top,right,bottom) and coordinate set 2: 101,0,200,50 (left,top,right,bottom).<br />
<br />
Here is an example:<br />
<img src=http://www.htmlforums.com/archive/index.php/"somePic.gif" height=50 width=200 usemap="#mymap"><br />
<br />
<map name="mymap"><br />
<area shape="rect" coords="0,0,100,50" href=http://www.htmlforums.com/archive/index.php/"link1.html"><br />
<area shape="rect" cords="101,0,200,50" href=http://www.htmlforums.com/archive/index.php/"l2.html"><br />
</map><br />
<br />
You can also use: shape=circle and shape=poly. With circle you need to give 3 coordinates: center-x, center-y and radious. e.g if your link must be a 100 pixel wide circle with it's center at coordinates 50,100 your coords would be: 50,100,100. With poly you need to give two coordinates for each point in the shape you are trying to create (e.g x1,y1,x2,y2,x3,y3... etc). <br />
<br />
Here are some tutorials (I like the last one the best) :<br />
<br />
<!-- m --><a class="postlink" href="http://hotwired.lycos.com/webmonkey/96/40/index2a.html">http://hotwired.lycos.com/webmonkey/96/40/index2a.html</a><!-- m --><br />
<!-- m --><a class="postlink" href="http://www.htmlgoodies.com/tutors/cs_imap.html">http://www.htmlgoodies.com/tutors/cs_imap.html</a><!-- m --><br />
<!-- m --><a class="postlink" href="http://webdeveloper.earthweb.com/webjs/article/0,,12721_807331,00.html">http://webdeveloper.earthweb.com/webjs/ ... 31,00.html</a><!-- m --><!--content-->thank you so much!!!!!! you made my day, that's what i needed, now i can start to make the thing, Thank You! kdjoergensen for your help <!--content-->(*blush*) well.. that is what we are here for....<!--content-->
<br />
see here what i mean <!-- m --><a class="postlink" href="http://www.blendomania.de.vu/">http://www.blendomania.de.vu/</a><!-- m --><br />
<br />
and in this attachment...you see the example, you click in each one of them and you get a different link. so how do i do that??<br />
<br />
thanx in advance
I'll appreciate<!--content-->Want you are after is a client side image map. As the word implies, you simply create map (defined by coordinates) to which you can attach links to the different parts.<br /><br />
example, say you have an image which needs two links. The left hand side should have a link different from the right hand side. The image is 200 pixels wide and 50 pixels high. You then simply create an image map where you define two sets of coordinates: coordinate set 1: 0,0,100,50<br />
(left,top,right,bottom) and coordinate set 2: 101,0,200,50 (left,top,right,bottom).<br />
<br />
Here is an example:<br />
<img src=http://www.htmlforums.com/archive/index.php/"somePic.gif" height=50 width=200 usemap="#mymap"><br />
<br />
<map name="mymap"><br />
<area shape="rect" coords="0,0,100,50" href=http://www.htmlforums.com/archive/index.php/"link1.html"><br />
<area shape="rect" cords="101,0,200,50" href=http://www.htmlforums.com/archive/index.php/"l2.html"><br />
</map><br />
<br />
You can also use: shape=circle and shape=poly. With circle you need to give 3 coordinates: center-x, center-y and radious. e.g if your link must be a 100 pixel wide circle with it's center at coordinates 50,100 your coords would be: 50,100,100. With poly you need to give two coordinates for each point in the shape you are trying to create (e.g x1,y1,x2,y2,x3,y3... etc). <br />
<br />
Here are some tutorials (I like the last one the best) :<br />
<br />
<!-- m --><a class="postlink" href="http://hotwired.lycos.com/webmonkey/96/40/index2a.html">http://hotwired.lycos.com/webmonkey/96/40/index2a.html</a><!-- m --><br />
<!-- m --><a class="postlink" href="http://www.htmlgoodies.com/tutors/cs_imap.html">http://www.htmlgoodies.com/tutors/cs_imap.html</a><!-- m --><br />
<!-- m --><a class="postlink" href="http://webdeveloper.earthweb.com/webjs/article/0,,12721_807331,00.html">http://webdeveloper.earthweb.com/webjs/ ... 31,00.html</a><!-- m --><!--content-->thank you so much!!!!!! you made my day, that's what i needed, now i can start to make the thing, Thank You! kdjoergensen for your help
<!--content-->(*blush*) well.. that is what we are here for....<!--content-->