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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hover over image

    I am having a problem with the hover over.
    a image overflow is hidden than when the hover is used it is visible.

    but it doesnt seem to work. each image is diffrent for each point

    class is .notes and id= #point0, point1......

    can someone please help with this asap


    Code:
    <html>
    
    <head>
    
       <title>Longs Peak Online Map</title>
    
       <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}
          #online_map    {
                         width: 600px;
                         height: 294px;
                         background-image:url("lpmap.jpg");
                         border:1px solid black;
                         position: relative;
                         top: 0px;
                         left: 0px;    }
    
          #summary       {width: 600px; margin-bottom: 20px}
          a              {text-decoration:none}
    
            
    
             .notes      {  font-size:8pt;
                             margin:5;
                           overflow:hidden;
                           width: 20px;
                          height: 20px;
                          background-color: blue;
                          font-color: white;
                           z-index: 1;  }
            
              .notes : link {  width: 150px;
                             height: 170px;
                             overflow: visible;
                             z-index: 2 ; }
              .notes  :hover  {
                            width: 150px;
                             height: 170px;
                             overflow: visible;
                             z-index: 2 ;
                            ;
                        }
                             
             .notes span {
                          color:yellow ;
    
                          }
    
    
    
    
          #point0         {
                          position:absolute;
                          left:560px;
                          top:60px;
    
    
                                }
    
    
    
           #point1       {
                          position:absolute;
                          left:277px;
                          top:90px;
    
    
                            }
    
    
    
    
          #point2       {
                            position:absolute;
                          left:175px;
                          top:0px;
    
    
    
    
                                    }
          #point3       {
                          position:absolute;
                          left:110px;
                          top:115px;
    
                           }
          #point4       {
                          position:absolute;
                          left:55px;
                          top:165px;
    
                                    }
          #point5      {
                          position:absolute;
                          left:5px;
                          top:180px;
    
                                    }
          #point6       {
                          position:absolute;
                          left:15px;
                          top:222px;
    
                                    }
          #point7      {
                         position:absolute;
                          left:50px;
                          top:245px;
    
                             }
          #point8       {
                          position:absolute;
                          left:100px;
                          top:245px;
    
                                    }
          #point9      {
                           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>

  • #2
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Audi, please do not repost your problem when you have been answered in your other post. Patience is a virtue.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^


  •  

    Posting Permissions

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