Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image map / overflow

    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>

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    it's actually [code][/code]

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

    ----

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

    Code:
    .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
    Last edited by Sammy12; 08-07-2011 at 04:29 PM.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    it's actually [code][/code]

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

    ----

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

    Code:
    .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.

    Thank you thank you <3

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •