PDA

Click to See Complete Forum and Search --> : Links in a picture

bograxie
03-02-2007, 04:17 PM
Im not sure if this is HTML, but i'm doing something for my dad atm. He has a map with say 6 different houses on it, and he wants links over these house saying "house 1" etc...and these links once clicked they will tell you information about the house, is this possible? and how would I go about doing it?
gil davis
03-02-2007, 06:42 PM
http://www.htmlcodetutorial.com/images/images_famsupp_220.html
bograxie
03-02-2007, 06:47 PM
Thanks for the reply
Could someone tell me what POLY COORDS are?

<DIV ALIGN=CENTER>

<MAP NAME="map1">
<AREA
HREF="contacts.html" ALT="Contacts" TITLE="Contacts"
SHAPE=RECT COORDS="6,116,97,184">
<AREA
HREF="products.html" ALT="Products" TITLE="Products"
SHAPE=CIRCLE COORDS="251,143,47">
<AREA
HREF="new.html" ALT="New!" TITLE="New!"
SHAPE=POLY COORDS="150,217, 190,257, 150,297,110,257">
</MAP>

<IMG SRC="testmap.gif"
ALT="map of GH site" BORDER=0 WIDTH=300 HEIGHT=300
USEMAP="#map1"><BR>

[ <A HREF="contacts.html" ALT="Contacts">Contacts</A> ]
[ <A HREF="products.html" ALT="Products">Products</A> ]
[ <A HREF="new.html" ALT="New!">New!</A> ]
</DIV>
AmazingAnt
03-02-2007, 07:41 PM
Poly=Polygon
So that means that it's like a "connect the dots" shape, where each of the coordinates is the next dot.

That help?
bograxie
03-03-2007, 04:54 AM
Not really.
Say I had a map 600 X 800.
Would I have to type into the POLY COORDS the coordinates of where I was the link to be?
AmazingAnt
03-03-2007, 08:13 AM
That depends. If you want the link to be a square or circle, no.
On the other hand, if you want the link to match a drawing of a house or something, which was the original question, then yes, you would.

However, there are some programs out there that will build the map for you, if you don't want to. For those, you just tell it what image you plan to use, pick a shape, and click where you want it to go. Then it gives you the code to use.
bograxie
03-03-2007, 08:29 AM
Would you beable to point in the right direction of a program for MAC OSX that does this? I have had a wee look on google, but wasn't successful. Thanks for your help AmazingAnt =)
bograxie
03-03-2007, 08:35 AM
Just had a thought.
Would it be easier to have a table behind the image and just make a cell a link? Would that be better and more user friendly(for me)?
AmazingAnt
03-03-2007, 08:38 AM
I've used this one (http://www.boutell.com/mapedit/) before, although I was using the PC version. The page says it costs $10, but it lets you download the file anyway...:confused:
You'll need something that can open a jar archive, although it might already be part of OSX. Never used OSX, so I'm not quite sure.

Ahh, you went an posted again. It might, although I'm not sure how you'd do it. However, you'd be restricted to the shape of the cells. (eeeevvvviiiilll squares.)
AmazingAnt
03-03-2007, 08:41 AM
Oh, I see. They're letting people download it as a trial... :(
In that case, not sure what to use.
bograxie
03-03-2007, 10:20 AM
GREAT! I've just used it for five minutes and works ace! I think ill be purchasing it soon. Thanks very much AmazingAnt
WebJoel
03-03-2007, 11:27 AM
I was playing around with a template that I've been working on this morning and it sort~of sounds like something you'd be interested in seeing. :)
I created a quick 'house.gif' image because you mentioned it, and am using that to populate all eight <li> (image attached seperately).<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:10%;
font-size: 85%;
/*font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {line-height:1.2em;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;
font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}

#homes {position:relative; width:725px; height:290px; margin:10px auto 0 auto; border:2px dotted silver; padding:6px;}
#homes a {text-decoration:none; color:black;}
#homes a:hover {background:none;}
#homes a span {display: none; position:relative;}
#homes a:hover span {display: block; width:155px; position:absolute; top:134px; left:15px; background-color:white; line-height:2.0em; width:700px; border:3px double gray;}
#homes img {display:block;}
#homes ul {clear:left;}
#homes li {float:left; display:inline; width:165px; text-align:center; margin:7px; border:1px solid black;}
</style>

<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>

<h1 style="width:500px; margin:10px auto 10px auto; text-align:center;">Homes that are available</h1>
<div id="homes">
<p style="position:absolute; left:25px; width:683px; top:140px; text-align:center; color:gray; font-size:1.2em; font-family:verdana">Hover over any image to read details about it. Click to view larger image.</p>
<ul>
<li><a href="#"><img src="images/house.gif" alt="image one" style="width:165px; height:100px;" /><span>This is house #1. Public School, retail store nearby. Great Terms.</span></a></li>
<li><a href="#"><img src="images/house.gif" alt="image two" style="width:165px; height:100px;" /><span>This is country estate number two. Large driveway, garage.</span></a></li>
<li><a href="#"><img src="images/house.gif" alt="image three" style="width:165px; height:100px;" /><span>Three bedroom, family room. Fireplace and large sunroom. Skylight in kitchen.</span></a></li>
<li><a href="#"><img src="images/house.gif" alt="image four" style="width:165px; height:100px;" /><span>Image 4 title and another brief description.Image 4 title and another brief description.</span></a></li>
</ul>

<ul style="margin-top:50px; float:left;">
<li><a href="#"><img src="images/house.gif" alt="image five" style="width:165px; height:100px;" /><span>Image 1 title and brief description goes here.</span></a></li>
<li><a href="#"><img src="images/house.gif" alt="image six" style="width:165px; height:100px;" /><span>This home is newly renovated and ready for immediate habitation. Private driveway.</span></a></li>
<li><a href="#"><img src="images/house.gif" alt="image seven" style="width:165px; height:100px;" /><span>This is house # Seven. 4 acre lot, fruit orchard, bicycle trails.</span></a></li>
<li><a href="#"><img src="images/house.gif" alt="image eight" style="width:165px; height:100px;" /><span>This is house #8. New roof and patio deck, in-ground swimming pool, fence.</span></a></li>
</ul>
</div>

</body>
</html> p.s., -I like your avatar. -Very interesting color.