Working with links.

astro211 · Joined: 28 Aug 2008 Posts: 18 Location: Adirondacks NY

Hi. I have my page set up to display a map with points of interest. I am trying to set up the waypoints to display as a small container that will expand with an image and some text when the mouse hovers over each one.
I have the images linked, but I can't get the boxes to collapse and expand like I want them to. Can anyone help me with how to do this? I appreciate any help with this. I'm really trying hard to learn but get confused alot. Thanks so much.I am pasting my code below:
[HTML]
<div class="notes" id="point0">
<a href="longs.htm"><img src="image0.jpg" alt="" />
<p>
<span></span>
</p></a>
[CSS]
.notes a {width: 20px; height: 20px; overflow: hidden; color: #FFFFFF;
background-color: #0000FF; z-index: 1}
.notes a:hover {width: 150px; height: 170px; overflow: visible; z-index: 2}
#point0 {position: absolute; left: 560px; top: 60px}

sticks464 · Joined: 31 Dec 2006 Posts: 1282

Probably what yo want is a pop up tooltip that lets you include more than text. See http://www.walterzorn.com/tooltip/tooltip_e.htm

astro211 · Joined: 28 Aug 2008 Posts: 18 Location: Adirondacks NY

I am doing this for a homework exercise for school. So I need to figure it out. Is it okay to paste my code here? It is about 170 lines.

sticks464 · Joined: 31 Dec 2006 Posts: 1282

Paste away.

astro211 · Joined: 28 Aug 2008 Posts: 18 Location: Adirondacks NY

Okay, the page I am working on is a map with points of interest that are supposed to have content (an image and some text that displays on mouse over. I appreciate your helping me. Here is my code:
<html>
<head>

<title>Longs Peak Online Map</title>

<style type="text/css" media="print">
body {font-family: sans-serif;}
#online_map a:link {text-decoration: none}
#online_map a:visited {text-decoration: none}
#online_map a:hover {text-decoration: none}
#online_map a:active {text-decoration: none}
#instruction {display: none}
h2 span {display: none}
.notes img {display: none}
.notes span {font-weight: bold}
h2:after {content: " Trail Itinerary"}

</style>

<style type="text/css" media="screen, tv">
body {font-family: sans-serif; margin: 20px; margin-bottom: 150px}
h2 {margin-top: 0px}
img {border-width: 0px; display: block}
#summary {width: 600px; margin-bottom: 20px}
#online_map {width: 600px; height: 294px; border-style: solid; border-width: 1px;
background: url(lpmap.jpg); position: relative; left: 0; top: 0}

#online_map a:link {text-decoration: none}
#online_map a:visited {text-decoration: none}
#online_map a:hover {text-decoration: none}
#online_map a:active {text-decoration: none}
.notes p {font-size: 8pt; margin: 5px}
.notes span {color: yellow}
.notes a {width: 20px; height: 20px; overflow: hidden; color: #FFFFFF;
background-color: #0000FF; z-index: 1}

.notes a:hover {width: 150px; height: 170px; overflow: visible; z-index: 2}

#point0 a {position: absolute; left: 560px; top: 60px}
#point1 a {position: absolute; left: 277px; top: 90px}
#point2 a {position: absolute; left: 175px; top: 60px}
#point3 a {position: absolute; left: 110px; top: 115px}
#point4 a {position: absolute; left: 55px; top: 165px}
#point5 a {position: absolute; left: 5px; top: 180px}
#point6 a {position: absolute; left: 15px; top: 222px}
#point7 a {position: absolute; left: 50px; top: 245px}
#point8 a {position: absolute; left: 100px; top: 245px}
#point9 a {position: absolute; left: 90px; top: 220px}

</style>

</head>

<body>
<div id="summary">

<h2>Longs Peak <span>Online Trail Map</span></h2>

<p>
At 14,255 feet, Longs Peak towers above all other summits in Rocky Mountain
National Park. The summer is the only season in which the peak can be climbed
by a non-technical route. Early mornings break calm, clouds build in the
afternoon sky, often exploding in storms of brief, heavy rain, thunder and
dangerous lightning. Begin your hike early, way before dawn, to be back below
timberline before the weather turns for the worse.
</p>
<p>
The Keyhole Route, Longs Peak's only non-technical hiking pathway, is a 16
mile round trip with an elevation gain of 4,850 feet. Though non-technical,
the Keyhole Route is still challenging and is not recommended for those who
are afraid of heights or exposed ledges. Hikers should be properly outfitted
with clothing, food and water. Use caution when ascending or descending steep
areas. Don't be afraid to back down when bad weather threatens.
</p>
<p id="instruction">
Move your mouse pointer over the numbered landmarks in the map to preview the hike.
</p>
</div>

<div id="online_map">

<div class="notes" id="point0">
<a href="longs.htm"><img src="image0.jpg" alt="" />
<p>
<span>3:30 a.m.</span> Start from the Longs Peak Ranger Station,
nine miles south of Estes Park. Be sure to pack food, extra water,
sunblock, and warm clothes, gloves, and caps.
</p></a>
</div>

<div class="notes" id="point1">
<a href="longs.htm"><img src="image1.jpg" alt="" />
<p>
<span>5:30 a.m.</span> Stop at Mills Moraine for a view of the
sunrise.
</p></a>
</div>

<div class="notes" id="point2">
<a href="longs.htm"><img src="image2.jpg" alt="" />
<p>
<span>7:30 a.m.</span> Time for break at Granite Pass.
</p></a>
</div>

<div class="notes" id="point3">
<a href="longs.htm"><img src="image3.jpg" alt="" />
<p>
<span>8:30 a.m.</span> Climb through the Boulder Field on the
way to the Keyhole.
</p></a>
</div>

<div class="notes" id="point4">
<a href="longs.htm"><img src="image4.jpg" alt="" />
<p>
<span>9:00 a.m.</span> Stop at the
Agnes Vaille shelter for a well-deserved breakfast.
</p></a>
</div>

<div class="notes" id="point5">
<a href="longs.htm"><img src="image5.jpg" alt="" />
<p>
<span>9:30 a.m.</span> It's time to go through
the Keyhole. Be prepared for heavy winds.
</p></a>
</div>

<div class="notes" id="point6">
<a href="longs.htm"><img src="image6.jpg" alt="" />
<p>
<span>10:00 a.m.</span> Follow the painted targets along the Ledges.
</p></a>
</div>

<div class="notes" id="point7">
<a href="longs.htm"><img src="image7.jpg" alt="" />
<p>
<span>11:00 a.m.</span> Take special care when crossing the Narrows.
</p></a>
</div>

<div class="notes" id="point8">
<a href="longs.htm"><img src="image8.jpg" alt="" />
<p>
<span>11:15 a.m.</span> You're almost there! Climb the Homestretch
to reach the summit.
</p></a>
</div>

<div class="notes" id="point9">
<a href="longs.htm"><img src="image9.jpg" alt="" />
<p>
<span>11:45 a.m.</span> Congratulations, you've reached the top!
Time for lunch and a few photos.
</p></a>
</div>

</div>

</body>
</html>

sticks464 · Joined: 31 Dec 2006 Posts: 1282

Though I do not have the small images it appears to be working correctly in IE6-7 and Firefox.
What size are the small images and exactly what is not displaying correctly?

astro211 · Joined: 28 Aug 2008 Posts: 18 Location: Adirondacks NY

The images are 150 x 111. Each image has a small number in the upper left hand corner that is 19 x 19 and what we are trying to do is have only the little number display until mouse over and then the image and text should display. I also have another question regarding the same page regarding the the generation of text before or after content. Should I start a new tread for that question?

sticks464 · Joined: 31 Dec 2006 Posts: 1282

I did this exercise in a college course long ago but can't remember how I did it. Try putting the image inside the p tag

astro211 · Joined: 28 Aug 2008 Posts: 18 Location: Adirondacks NY

I tried what you suggested for the images and it seems to work fine. My other question is about generating text after an element. I am using the syntax, h2:after to get some text added after other content in my print style sheet. The problem is while it displays fine in FF 3.0, it does not display in IE 7. Any suggestions?

sticks464 · Joined: 31 Dec 2006 Posts: 1282

The :after pseudo-element is not supported in IE
ref. http://www.w3schools.com/css/pr_pseudo_after.asp

astro211 · Joined: 28 Aug 2008 Posts: 18 Location: Adirondacks NY

Okay, that makes me feel better I thought it was something I was doing wrong. And again I really appreciate all your help.