Links in a picture

@bograxieMar 02.2007

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?

to post a comment

HTML

11 Comments(s) _↴

@gil_davisMar 03.2007 — #http://www.htmlcodetutorial.com/images/images_famsupp_220.html

@bograxieauthorMar 03.2007 — #Thanks for the reply

Could someone tell me what POLY COORDS are?

[code=html]<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>[/code]

@AmazingAntMar 03.2007 — #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?

@bograxieauthorMar 03.2007 — #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?

@AmazingAntMar 03.2007 — #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.

@bograxieauthorMar 03.2007 — #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 =)

@bograxieauthorMar 03.2007 — #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)?

@AmazingAntMar 03.2007 — #I've used this one before, although I was using the PC version. The page says it costs $10, but it lets you download the file anyway...?

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.)

@AmazingAntMar 03.2007 — #Oh, I see. They're letting people download it as a trial... ?

In that case, not sure what to use.

@bograxieauthorMar 03.2007 — #GREAT! I've just used it for five minutes and works ace! I think ill be purchasing it soon. Thanks very much AmazingAnt

@WebJoelMar 03.2007 — #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">

</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>[/QUOTE] p.s., -I like your avatar. -Very interesting color.

[upl-file uuid=577c1feb-3a67-48bb-9295-4e375590a499 size=13kB]house.gif[/upl-file]

Also in #HTML _↴

Inserting a remote table Moving between form fields with enter instead of tab?html beginner needing help

Success!

Help @bograxie spread the word by sharing this article on Twitter...

Tweet This

Links in a picture

11 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Links in a picture

11 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #HTML _↴