5 Replies Latest reply on Apr 20, 2010 6:15 AM by pziecina

    Rollover question

    Luban22 Level 1

      Hi there,

      Im just wondering how to create rollover text. I have an image and when the mouse hovers over the image i want an text description to display beside it.any ideas how to go about this?

      Thanks.

        • 1. Re: Rollover question
          pziecina Level 6
          1 person found this helpful
          • 2. Re: Rollover question
            Luban22 Level 1

            Hi Pziecina,

            Thanks for the tutorials..great help.for some reason i cant seem to get this to work.any ideas.thanks again.

             

            HTML Code:

            <body>
            <ol id="rollover">

            <li><a href="#"><img border = "0" src="Images/Sent Message.jpg" width="77" height="71" alt="Sent" longdesc="Images/Sent Message.jpg" /><span>The Sent Message <strong>(M)</strong> is, the message that is being sent from one Source to another (A to B). The message has to go through a number of processes before the reciever can access it.</span></a></li>

            </ol>

            </body>

             

            CSS Code:

            #rollover li a {
            text-decoration:none;
            }

             

            #rollover li a span {
            visibility:visible;
            display:block;
            position:absolute;
            left:233px;

            top:120px;
            color:#D31988;
            background-color:#F4EEFE;
            border: 2px solid silver;
            padding: 5px;
            }

            #rollover li a:hover span, #rollover li a:active span, #rollover li a:focus span {
            visibility:visible;
            }

            #rollover li a:hover, #rollover li a:focus{
            text-decoration: none;
            color:#D31988;
            visibility:visible; }

            • 3. Re: Rollover question
              pziecina Level 6

              Hi

               

              Change -

              #rollover li a span {
              visibility:visible;

               

              To -

              #rollover li a span {
              visibility:hidden;

               

              PZ

              • 4. Re: Rollover question
                Luban22 Level 1

                Thanks for that.At the moment i am using an image link to direct the user to the information. What would be the best way to the rollover text using div tag instead of ordered list?i really appreciate your help.thanks again.

                 

                <div id = "Sent">
                <a href = "Sent Message.html"><img border = "0" src="../Images/Sent Message.jpg" width="77" height="71" alt="Sent Message" longdesc="../Images/Sent Message.jpg" /></a>
                </div>

                 

                its styled using this css:

                #Sent{
                background-color:white;
                height: 30px;
                width: 30px;
                margin: 0px;
                padding-top: 0px;
                padding-bottom:10px;
                float: none;
                top: 445px;
                right: 0px;
                left: 211px;
                position: absolute;
                border:none;
                visibility: visible;

                }

                • 5. Re: Rollover question
                  pziecina Level 6

                  Hi

                   

                  You can apply the hover to any element but I would advise applying it to a tag inside the div and not to a div itself, e.g.-

                   

                  If you have your div with the id sent and a <p> tag inside this you could apply the rollover text to this by the following css, (don't forget to initially set the rollover text to hidden).

                   

                  css -

                  #sent p:hover span {

                  visibility: visible;

                  }

                   

                  PZ