...

View Full Version : image map / overflow



lucromick
08-07-2011, 02: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>

Sammy12
08-07-2011, 05:26 PM
it's actually


let me plug your code in, give me a sec.

----

okay so the images aren't loading obviously, but I think if you set



.notes a { display: block; }


it should become hidden.

you see <a> is an inline element, you CANNOT set a width or height to it. you can set paddings, but not any "set" dimensions. it wraps around whatever is in it tight and snug

lucromick
08-07-2011, 07:06 PM
it's actually


let me plug your code in, give me a sec.

----

okay so the images aren't loading obviously, but I think if you set



.notes a { display: block; }


it should become hidden.

you see <a> is an inline element, you CANNOT set a width or height to it. you can set paddings, but not any "set" dimensions. it wraps around whatever is in it tight and snug

Thank you so much, Sammy!
I appreciate the help so much. You even taught me why it wasn't working.:thumbsup:

Thank you thank you <3

Sammy12
08-08-2011, 12:25 AM
just glad i could help. we have far better scripters than I here so any problems you have, cf has an answer. good luck on your site!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum