HTML Mapping Help(Coord)

L

liunx

Guest
<img src=http://www.htmlforums.com/archive/index.php/"http://strifel.free-host.com/1navigation2%20copy.gif" alt="Endless Nights" usemap="#endlessnights"><br />
<map name="endlessnights"><br />
<area shape="rect" coords="18,61,5,27" href=http://www.htmlforums.com/archive/index.php/"/" alt="Home"><br />
<area shape="rect" coords="69,61,40,27" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="Plot"><br />
</map><br />
<br />
Thats the code I put in. Its kind of messed up. Well, my first question is, how do you get the blue stuff surounding the pic off? My main question is what directions are the coords in? When i tried using photoshop, they dont give out the pixels. So then i used mgi photosuite and i typed in the exact pixels i wanted but it went to the wrong place. Please help!<!--content-->Hello there endlessnights,<br />
<br />
Here are the co-ordinates that you require :D <br />
As you map across the image remember to add 1px to the 'y' co-ordinate (as shown in red)<br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/"http://strifel.free-host.com/1navigation2%20copy.gif" border="0" alt="Endless Nights" usemap="#endlessnights"><br />
<map name="endlessnights"><br />
<area shape="rect" coords="20, 63, 69, 87" href=http://www.htmlforums.com/archive/index.php/"/" alt="Home"><br />
<area shape="rect" coords="70, 63, 108, 87" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="Plot"><br />
<area shape="rect" coords="109, 63, 166, 87" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="classes"><br />
<area shape="rect" coords="167, 63, 217, 87" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="races"><br />
<area shape="rect" coords="218, 63, 266, 87" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="magic"><br />
<area shape="rect" coords="267, 63, 318, 87" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="apply"><br />
<area shape="rect" coords="319, 63, 361, 87" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="staff"><br />
<area shape="rect" coords="362, 63, 423, 87" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="credits"><br />
Have a nice day :cool:<br />
<br />
coothead:<!--content-->Hi there endlessnights,<br />
<br />
If you want to do further mapping, then you may find this useful...works with IE but not Netscape :rolleyes:<br />
Notice also that for this to work the </map> must be positioned after the </form> <html><br />
<head><br />
<title>[X], [Y], Position</title><br />
<style type="text/css"><br />
<!--<br />
img{position:absolute;top:200px; left:200px;}<br />
div#I{position:absolute;top:150px;left:400px;font-size:24px;}<br />
font{ position:absolute;top:100px;left:290px;font-size:24px;font-weight:bold;text-decoration:underline;}<br />
body{background-color:#cccccc;}<br />
//--><br />
</style><br />
<br />
<script type="text/javascript" language="Javascript"><br />
<!--<br />
function capKey()<br />
{<br />
if(window.event.keyCode==109)<br />
{<br />
I.innerHTML= "(" + window.event.clientX+","+window.event.clientY+")";<br />
}<br />
}<br />
//--><br />
</script><br />
</head><br />
<body onkeypress="capKey()"><br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/"http://strifel.free-host.com/1navigation2%20copy.gif"border="0" alt="Endless Nights" usemap="#endlessnights"><br />
<br />
<map name="endlessnights"><br />
<area shape="rect" coords="20, 63, 69, 87" href=http://www.htmlforums.com/archive/index.php/"/" alt="Home"><br />
<area shape="rect" coords="70, 63, 108, 87" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="Plot"><br />
<area shape="rect" coords="109, 63, 166, 87" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="classes"><br />
<area shape="rect" coords="167, 63, 217, 87" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="races"><br />
<area shape="rect" coords="218, 63, 266, 87" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="magic"><br />
<area shape="rect" coords="267, 63, 318, 87" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="apply"><br />
<area shape="rect" coords="319, 63, 361, 87" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="staff"><br />
<area shape="rect" coords="362, 63, 423, 87" href=http://www.htmlforums.com/archive/index.php/"story.html" alt="credits"><br />
<font>Press 'M' for x,y Position of cursor tip</font><br />
<form name=form><br />
<div id=I><br />
</form><br />
</map><br />
<br />
</body><br />
</html><br />
coothead<!--content-->add this to your IMG tag...<br />
border="0"<br />
that should get rid of a link border.<br />
<br />
on your question about coordinate direction...<br />
using the RECT shape, you are specifying the top left point of a rectangle and the bottom right point.<br />
<br />
here is a page on image maps if that helps further...<br />
click (<!-- m --><a class="postlink" href="http://www.htmlite.com/lite028.php">http://www.htmlite.com/lite028.php</a><!-- m -->)<!--content-->Thanks guys! Thanks for the code too! :D<!--content-->
 
You must log in or register to reply here.
Back
Top