I have an image and I would like to locate 3 links over that Image. I want to control in the position of the links.
How can I do it? using another layer?
I'm not fimiliar with this kind of code. can anyone show me how to do it?
Thanks a lot!sounds like sprites (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/sprites/">http://www.alistapart.com/articles/sprites/</a><!-- m -->) to mein there...read through the article, basically you could apply a backround image to the ul, then position your li's within it accordinglyI just want to locate those link over the photo. no LI's involved.hmm...well...if youre not looking for a direct browser-independent solution....you could always go with absolute positioning and use the z-index properties to lay the links you want down on the image..three links looks like a list of links to me, which means that ul's are the most practical/semantic way to go about this...Originally posted by xataku_nakusute
hmm...well...if youre not looking for a direct browser-independent solution....you could always go with absolute positioning and use the z-index properties to lay the links you want down on the image..
why? even if you can't use a ul (which you should be able to do quite easily) you could also put them in a div with a background image.... no need for absolute positioning here...hmm...very true actually..why go through the horrible nightmare of absolute positioning over a prolly small image when you could just use the hack thats stated in the article? sorry, i just spoke the first thing that came to my mind.
just go ahead with samij586's solution.its really not a hack... its a perfetly legitament techniqueIs this what you're looking for?
<img src=http://www.webdeveloper.com/forum/archive/index.php/"your image" border=0 usemap="#mapname">
<map name="mapname">
<area coords="x1a,y1a,xa2,ya2" href=http://www.webdeveloper.com/forum/archive/index.php/"urla.html">
<area coords="x1b,y1b,xb2,yb2" href=http://www.webdeveloper.com/forum/archive/index.php/"urlb.html">
<area coords="x1c,y1c,xc2,yc2" href=http://www.webdeveloper.com/forum/archive/index.php/"urlc.html">
</map>...don't use an image map, or zindex, simply read through that article, attempt to create what your are going for, then post your questions.Any particular reason not to use an image map. I know it's not good semantic markup but it will work for most applications.
That link you provided was excellent
, and is indeed a much better way to do it.TO: weee
this is just a sample use of the z-index property:
<div style="position: absolute; top: 10%; left: 10%; z-index: -1; backgorund: #0000ff;">
Bottom Layer
</div>
<div style="position: absolute; top: 10%; left: 10%; z-index: 1; backgorund: #ff0000;">
Top Layer
</div>
now in this example, if your browser does support the property, then you should see a red <div> that says "Top Layer" with a bit of blue beneath.
using this property, you simply give it a value (negative, positive, or zero), and according to the value, itll place it in layers.
heres a lil model of the above:
"Top Layer" ----------[1]-----------
Document Layer -----[0]-----------
"Bottom Layer" ------[-1]----------
sorry for the late response
terminalbecause search engines can't see anything... here's the lynx view of a page with an image map: <!-- m --><a class="postlink" href="http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fwww.medford.k12.or.us%2Finfo%2Fdefault1.htm">http://www.delorie.com/web/lynxview.cgi ... fault1.htm</a><!-- m -->
How can I do it? using another layer?
I'm not fimiliar with this kind of code. can anyone show me how to do it?
Thanks a lot!sounds like sprites (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/sprites/">http://www.alistapart.com/articles/sprites/</a><!-- m -->) to mein there...read through the article, basically you could apply a backround image to the ul, then position your li's within it accordinglyI just want to locate those link over the photo. no LI's involved.hmm...well...if youre not looking for a direct browser-independent solution....you could always go with absolute positioning and use the z-index properties to lay the links you want down on the image..three links looks like a list of links to me, which means that ul's are the most practical/semantic way to go about this...Originally posted by xataku_nakusute
hmm...well...if youre not looking for a direct browser-independent solution....you could always go with absolute positioning and use the z-index properties to lay the links you want down on the image..
why? even if you can't use a ul (which you should be able to do quite easily) you could also put them in a div with a background image.... no need for absolute positioning here...hmm...very true actually..why go through the horrible nightmare of absolute positioning over a prolly small image when you could just use the hack thats stated in the article? sorry, i just spoke the first thing that came to my mind.
just go ahead with samij586's solution.its really not a hack... its a perfetly legitament techniqueIs this what you're looking for?
<img src=http://www.webdeveloper.com/forum/archive/index.php/"your image" border=0 usemap="#mapname">
<map name="mapname">
<area coords="x1a,y1a,xa2,ya2" href=http://www.webdeveloper.com/forum/archive/index.php/"urla.html">
<area coords="x1b,y1b,xb2,yb2" href=http://www.webdeveloper.com/forum/archive/index.php/"urlb.html">
<area coords="x1c,y1c,xc2,yc2" href=http://www.webdeveloper.com/forum/archive/index.php/"urlc.html">
</map>...don't use an image map, or zindex, simply read through that article, attempt to create what your are going for, then post your questions.Any particular reason not to use an image map. I know it's not good semantic markup but it will work for most applications.
That link you provided was excellent
, and is indeed a much better way to do it.TO: weeethis is just a sample use of the z-index property:
<div style="position: absolute; top: 10%; left: 10%; z-index: -1; backgorund: #0000ff;">
Bottom Layer
</div>
<div style="position: absolute; top: 10%; left: 10%; z-index: 1; backgorund: #ff0000;">
Top Layer
</div>
now in this example, if your browser does support the property, then you should see a red <div> that says "Top Layer" with a bit of blue beneath.
using this property, you simply give it a value (negative, positive, or zero), and according to the value, itll place it in layers.
heres a lil model of the above:
"Top Layer" ----------[1]-----------
Document Layer -----[0]-----------
"Bottom Layer" ------[-1]----------
sorry for the late response
terminalbecause search engines can't see anything... here's the lynx view of a page with an image map: <!-- m --><a class="postlink" href="http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fwww.medford.k12.or.us%2Finfo%2Fdefault1.htm">http://www.delorie.com/web/lynxview.cgi ... fault1.htm</a><!-- m -->