1 Replies - 1709 Views - Last Post: 01 October 2012 - 11:55 AM

#1 Thankless Noodle  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 30-March 12

HTML/CSS Rollover Map Points

Posted 01 October 2012 - 09:57 AM

I'm trying to make a trail map that has way-points on it, so that when you hover over one of them it expands and shows the image with the caption (p tag) underneath it. The picture has a number in the top left corner that when you look at it, it is in an area that 20x20 px, like so: way-point 1 image. however when I set the css to only allow 20x20px of the image to display and use the overflow property to hide the rest, it's still displaying the entire image.

If the above doesn't make complete sense, basically I'm trying to hide all of the image with the overflow property except the number that is in the corner, then when I use 'a:hover' it will display the whole image and the 'p tag' I put underneath.

I still have plenty more to do on the page, but I'm stuck getting just the small area of the image to display instead of the whole thing.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Longs Peak Online Map</title>
		<meta charset="utf-8">
		<style type="text/css">
			body {
				font-family: sans-serif; 
				margin: 20px; 
				margin-bottom: 150px;
			}
			h2{
				margin-top: 0px;
			}
			img{
				border-width: 0px; 
				display: block;
			}
			#wrapper {
				width: 600px;
				margin: auto;
				left: 0;
				right: 0;
				margin-top: 0;
				margin-bottom: 20px;
			}
			#instructions {
				color: blue;
				font-weight: bold;
			}
			a {
				text-decoration: none;
			}
			.notes a {
				background-color: blue;
				color: white;
				width: 20px;
				height: 20px;
				overflow: hidden;
				z-index: 0;
			}
			#onlineMaps {
				width: 600px;
				height: 294px;
				border: 1px black solid;
				background-image:url(lpmap.jpg);
				position: relative;
			}
			.notes p {
				font-size: 11px;
				margin: 5px;
			}
			.notes span {
				color: yellow;
				font-weight: bold;
			}
		</style>

	</head>

	<body>
		<!-- Wrapper divider starts here -->
		<div id="wrapper">
		<!-- Summary divider starts here -->
		<div id="summary">
			<h2>Longs Peak Online Trail Map</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="instructions">
				Move your mouse pointer over the numbered landmarks in the map to preview the hike.
			</p>
		</div>

		<!-- onlineMap divider starts here -->
		<div id="onlineMaps">
		<div class="notes" id="point0">
			<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>
		</div>

		<div class="notes" id="point1">
			<a href="longs.htm"><img src="image1.jpg" alt="" /></a>
			<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>
		</div>
	</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: HTML/CSS Rollover Map Points

#2 Thankless Noodle  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 30-March 12

Re: HTML/CSS Rollover Map Points

Posted 01 October 2012 - 11:55 AM

.notes a {
                background-color: blue;
                color: white;
                width: 20px;
	        height: 20px;
                overflow: hidden;
                z-index: 0;
            }


Needed to be:

.notes a {
	background-color: blue;
	color: white;
	float: left;
	width: 20px;
	height: 20px;
	overflow: hidden;
	position: relative;				
	z-index: 10;
}

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1