Log In · Register

 
 
 Closed TopicStart new topic
Image map co ordinates, Help please.
wordstoasong
post May 4 2008, 04:01 PM
Post #1


Senior Member
***

Group: Member
Posts: 30
Joined: Jan 2008
Member No: 612,365
http://tammys-tackshop.webs.com/

So someone suggested a image map for me to use.
I just can't figure out my co ordinates for this.

I'm using this basic code: Click.

So how do I figure out my co ordinates for my link areas?

Any help would be great. Thanks.
 
Insurmountable
post May 4 2008, 07:40 PM
Post #2


Cornflakes :D
*******

Group: Staff Alumni
Posts: 4,541
Joined: Dec 2005
Member No: 322,923
well if you have photoshop read this:
http://www.createblog.com/forums/index.php...t&p=2707337
 
Marlons
post May 4 2008, 07:43 PM
Post #3


Thread Killer
******

Group: Staff Alumni
Posts: 1,012
Joined: Jun 2007
Member No: 530,544
If you use Firefox, get the Measure tool add on, and use that to get your Coords.
 
wordstoasong
post May 6 2008, 11:10 AM
Post #4


Senior Member
***

Group: Member
Posts: 30
Joined: Jan 2008
Member No: 612,365
Ok, I did the firefox measrueing, and I still don't think I have it right.

Here's my final code:
CODE
<DIV ALIGN=CENTER>

<MAP NAME="map1">
<AREA
   HREF="http://tammys-tackshop.webs.com/index.htm" ALT="home" TITLE="home"
   SHAPE=RECT COORDS="87,23,82,22">
<AREA
   HREF="http://tammys-tackshop.webs.com/bio.htm" ALT="bio" TITLE="bio"
   SHAPE=RECT COORDS="53,26,48,24">
<AREA
   HREF="http://tammys-tackshop.webs.com/gallery.htm" ALT="gallery" TITLE="gallery"
   SHAPE=RECT COORDS="106,23,100,20">
<AREA
   HREF="http://tammys-tackshop.webs.com/products.htm" ALT="products" TITLE="products"
   SHAPE=RECT COORDS="131,28,126,25">
<AREA
   HREF="http://tammys-tackshop.webs.com/faq.htm" ALT="faq" TITLE="faq"
   SHAPE=RECT COORDS="76,30,67,27">
<AREA
   HREF="http://tammys-tackshop.webs.com/order.htm" ALT="order" TITLE="order"
   SHAPE=RECT COORDS="91,27,86,23">
</MAP>

<IMG SRC="http://i61.photobucket.com/albums/h54/teelerthekitty/Art/Banners/tammystackshop.png"
   ALT="map of GH site" BORDER=0 WIDTH=300 HEIGHT=300
   USEMAP="#map1"><BR>

</DIV>


When I put it on my site, I have nothing there.
 
miyashu
post May 6 2008, 12:46 PM
Post #5


cake or DEATH
*****

Group: Staff Alumni
Posts: 631
Joined: Sep 2005
Member No: 223,586
Try using this instead and see if it works. I've reorganized a few things in your code:

CODE
<DIV ALIGN=CENTER><IMG SRC="http://i61.photobucket.com/albums/h54/teelerthekitty/Art/Banners/tammystackshop.png" ALT="map of GH site" BORDER=0 WIDTH=300 HEIGHT=300 USEMAP="#map1">

<MAP NAME="map1">
<AREA
   HREF="http://tammys-tackshop.webs.com/index.htm" ALT="home" TITLE="home"
   SHAPE=RECT COORDS="87,23,82,22">
<AREA
   HREF="http://tammys-tackshop.webs.com/bio.htm" ALT="bio" TITLE="bio"
   SHAPE=RECT COORDS="53,26,48,24">
<AREA
   HREF="http://tammys-tackshop.webs.com/gallery.htm" ALT="gallery" TITLE="gallery"
   SHAPE=RECT COORDS="106,23,100,20">
<AREA
   HREF="http://tammys-tackshop.webs.com/products.htm" ALT="products" TITLE="products"
   SHAPE=RECT COORDS="131,28,126,25">
<AREA
   HREF="http://tammys-tackshop.webs.com/faq.htm" ALT="faq" TITLE="faq"
   SHAPE=RECT COORDS="76,30,67,27">
<AREA
   HREF="http://tammys-tackshop.webs.com/order.htm" ALT="order" TITLE="order"
   SHAPE=RECT COORDS="91,27,86,23">
</MAP>
</DIV>
 
wordstoasong
post May 6 2008, 12:59 PM
Post #6


Senior Member
***

Group: Member
Posts: 30
Joined: Jan 2008
Member No: 612,365
Nope, tired it. Can't get it to work. I'll post my whole code for the main page.

CODE
<html>


<head>

<title>Tammy’s Tack Shop</title>

</head>

<body>
<style type="text/css">

body {
/* edits the scrollbar and background */
scrollbar-arrow-color: #000000;
scrollbar-track-color:#ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
background-color: #1F80D9;
cursor: normal;
background-image:

url("");
background-repeat: repeat-y;
background-align: left;
overflow-x: hidden;  }


a:link{
/* edits all the links */
color: #CC0066;
  font:14px century gothic;
text-decoration: none;
text-transform: Uppercase;
letter-spacing: 0px;
cursor:normal;
}

a:visited{
/* edits all the visited links */
color: #CC0066;
  font:14px century gothic;
text-decoration: none;
text-transform: Uppercase;
letter-spacing: 0px;
cursor:normal;
}

a:hover{
/* edits all the hovered links */
color: #CC0066;
  font:14px century gothic;
text-decoration: none;
text-transform: Uppercase;
letter-spacing: 0px;
cursor:normal;
}

input, select, textarea, iframe.htmleditor,

.textfield, .button {
/* edits the buttons, dropdowns, etc. */
border: 1px solid #000000;
font: 12px century gothic;
background-color: transparent;
color: #000000;
letter-spacing:0px;
}


p {
/* edits all of the paragraphs */
align: justify;

}

b {
/* edits all the bolded words */
color: #CC0066;
font-weight: bold;
letter-spacing:0px;
font: 14px arial bold;
text-transform: none;
}

I, EM {
/* edits all the italic words */
color: #CC0066;
letter-spacing:0px;
font: 12px century gothic;
text-transform:none;
background-color:none;
}

u {
/* edits all the underlined words */
color: #CC0066;
letter-spacing:0px;
font-size: 12px;
text-transform:none;
font-style:none;
background-color:none;
}


body, div {
font: 12px century gothic;
line-height:normal;
color: #000000;
letter-spacing:0px;
text-align:justify;
text-transform:none;

}
</style>

<div style="position: absolute; width: ##px; height: ##px; margin-left: 0px; margin-top: 0px; overflow: auto;">
<img src="http://i61.photobucket.com/albums/h54/teelerthekitty/Art/Banners/tammystackshop.png">

</div>


<div style="position: absolute; width: 373px; height: 450px; margin-left: 410px; margin-top: 70px; overflow: auto;">
<b>UPDATES:</b> Site is up and running for you to enjoy. The red dots will be changed soon, so in the mean time, you have to deal with them. =]
<br>
<br>Welcome to the newly re-designed Tammy’s Tack Shop.
<br>We are happy to serve you with new products and information about our stuff.
<br><br>Located in Kenora, Ontario, you won’t find any other handmade products likes ours anywhere else except here.
<br><br>Our polo wraps and saddle pads are made of soft colorful fleece, with Velcro straps for the wraps and solid color binding for the pads.
<br><br>Looking for something custom? Email us! We'll be happy to help you out!
<br><br>Also, we have new products coming out soon, so keep a watchful eye on our new works. We hope you enjoy our new site, and please do come back soon!
<br><br>An extra huge thank you to Tay Smith for creating the lovely layout design.

</div>


</body>
</html>

<script type="text/javascript" language="javascript">
function stopWrite()
{null;}
document.write = stopWrite;
</script>
<style type="text/css">
iframe {display: none;}
</style>





<DIV ALIGN=CENTER><IMG SRC="http://i61.photobucket.com/albums/h54/teelerthekitty/Art/Banners/tammystackshop.png" ALT="map of GH site" BORDER=0 WIDTH=300 HEIGHT=300 USEMAP="#map1">

<MAP NAME="map1">
<AREA
   HREF="http://tammys-tackshop.webs.com/index.htm" ALT="home" TITLE="home"
   SHAPE=RECT COORDS="87,23,82,22">
<AREA
   HREF="http://tammys-tackshop.webs.com/bio.htm" ALT="bio" TITLE="bio"
   SHAPE=RECT COORDS="53,26,48,24">
<AREA
   HREF="http://tammys-tackshop.webs.com/gallery.htm" ALT="gallery" TITLE="gallery"
   SHAPE=RECT COORDS="106,23,100,20">
<AREA
   HREF="http://tammys-tackshop.webs.com/products.htm" ALT="products" TITLE="products"
   SHAPE=RECT COORDS="131,28,126,25">
<AREA
   HREF="http://tammys-tackshop.webs.com/faq.htm" ALT="faq" TITLE="faq"
   SHAPE=RECT COORDS="76,30,67,27">
<AREA
   HREF="http://tammys-tackshop.webs.com/order.htm" ALT="order" TITLE="order"
   SHAPE=RECT COORDS="91,27,86,23">
</MAP>
</DIV>
 
miyashu
post May 6 2008, 01:13 PM
Post #7


cake or DEATH
*****

Group: Staff Alumni
Posts: 631
Joined: Sep 2005
Member No: 223,586
ooh wait i think i got it.

take this part in your code:

CODE
<div style="position: absolute; width: ##px; height: ##px; margin-left: 0px; margin-top: 0px; overflow: auto;">
<img src="http://i61.photobucket.com/albums/h54/teelerthekitty/Art/Banners/tammystackshop.png">

</div>


and put that in with the image map stuff, like this:

CODE
<div style="position: absolute; width: ##px; height: ##px; margin-left: 0px; margin-top: 0px; overflow: auto;">
<img src="http://i61.photobucket.com/albums/h54/teelerthekitty/Art/Banners/tammystackshop.png" BORDER=0 USEMAP="#map1">
<MAP NAME="map1">
<AREA
   HREF="http://tammys-tackshop.webs.com/index.htm" ALT="home" TITLE="home"
   SHAPE=RECT COORDS="87,23,82,22">
<AREA
   HREF="http://tammys-tackshop.webs.com/bio.htm" ALT="bio" TITLE="bio"
   SHAPE=RECT COORDS="53,26,48,24">
<AREA
   HREF="http://tammys-tackshop.webs.com/gallery.htm" ALT="gallery" TITLE="gallery"
   SHAPE=RECT COORDS="106,23,100,20">
<AREA
   HREF="http://tammys-tackshop.webs.com/products.htm" ALT="products" TITLE="products"
   SHAPE=RECT COORDS="131,28,126,25">
<AREA
   HREF="http://tammys-tackshop.webs.com/faq.htm" ALT="faq" TITLE="faq"
   SHAPE=RECT COORDS="76,30,67,27">
<AREA
   HREF="http://tammys-tackshop.webs.com/order.htm" ALT="order" TITLE="order"
   SHAPE=RECT COORDS="91,27,86,23">
</MAP>
</DIV>


hopefully this won't fail. but in case it does, i'll keep trying!
 
wordstoasong
post May 6 2008, 01:31 PM
Post #8


Senior Member
***

Group: Member
Posts: 30
Joined: Jan 2008
Member No: 612,365
whoops! Just tired that and my information went poof. lol
 
wordstoasong
post May 6 2008, 04:05 PM
Post #9


Senior Member
***

Group: Member
Posts: 30
Joined: Jan 2008
Member No: 612,365
Got it fixed. Thanks everyone. =]
 
miyashu
post May 6 2008, 04:45 PM
Post #10


cake or DEATH
*****

Group: Staff Alumni
Posts: 631
Joined: Sep 2005
Member No: 223,586
That's good to hear ^.^.

Topic closed.
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic