lucromick
08-07-2011, 01:48 PM
Hello all,
I want to make an image map but overflow hidden doesn't seem work how I want it to.
Any thoughts?
thanks
<code>
<head>
<style type="text/css">
body {
font-family: sans-serif;
margin: 20px;
margin-bottom: 150px;
background-color: Black;
}
h2 {
margin-top: 0px;
}
img {
border-width: 0px;
display: block;
}
#wrapper {
width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
}
#instruction {
color:blue;
font-weight:700;
}
.notes {
text-decoration: none;
}
#OnlineMap {
border-width: 600px;
height: 294px;
border: 1px black solid;
background-image:url('../../images/lpmap.jpg');
position: relative;
}
.notes p{
font-size: 11px;
margin: 5px;
}
.notes span{
color:Yellow;
font-weight:700;
}
.notes a{
width:20px;
height:20px;
background-color:Blue;
overflow: hidden;
color: white;
z-index: 10;
font-weight:900;
}
.notes a:hover{
width: 150px;
height: 170px;
overflow: visible;
z-index: 20;
color:Red;
}
</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>
</p>
</div>
<p id="instruction">
Move your mouse pointer over the numbered landmarks in the map to preview the hike.
</p>
<!-- onlineMap divider starts here -->
<div id="OnlineMap">
<div class="notes" id="point0">
<a href="longs.htm">
<img src="../../images/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="../../images/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="../../images/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="../../images/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="../../images/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="../../images/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="../../images/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="../../images/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="../../images/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="../../images/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>
</code>
I want to make an image map but overflow hidden doesn't seem work how I want it to.
Any thoughts?
thanks
<code>
<head>
<style type="text/css">
body {
font-family: sans-serif;
margin: 20px;
margin-bottom: 150px;
background-color: Black;
}
h2 {
margin-top: 0px;
}
img {
border-width: 0px;
display: block;
}
#wrapper {
width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 20px;
}
#instruction {
color:blue;
font-weight:700;
}
.notes {
text-decoration: none;
}
#OnlineMap {
border-width: 600px;
height: 294px;
border: 1px black solid;
background-image:url('../../images/lpmap.jpg');
position: relative;
}
.notes p{
font-size: 11px;
margin: 5px;
}
.notes span{
color:Yellow;
font-weight:700;
}
.notes a{
width:20px;
height:20px;
background-color:Blue;
overflow: hidden;
color: white;
z-index: 10;
font-weight:900;
}
.notes a:hover{
width: 150px;
height: 170px;
overflow: visible;
z-index: 20;
color:Red;
}
</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>
</p>
</div>
<p id="instruction">
Move your mouse pointer over the numbered landmarks in the map to preview the hike.
</p>
<!-- onlineMap divider starts here -->
<div id="OnlineMap">
<div class="notes" id="point0">
<a href="longs.htm">
<img src="../../images/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="../../images/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="../../images/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="../../images/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="../../images/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="../../images/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="../../images/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="../../images/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="../../images/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="../../images/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>
</code>