Results 1 to 3 of 3

Thread: Textual tooltip II (fade into view) with images?

  1. #1
    Join Date
    Sep 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Textual tooltip II (fade into view) with images?

    1) Script Title: Textual tooltip II (fade into view)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/linkinfo2.htm

    3) Describe problem: Is it possible for this script to work with an image appearing instead of text when you roll over a hyperlink?

    Thanks!

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Hmm i think you are looking for something that performs a image rollover which is based on the mouseover/moustout event of some hyperlinks.

    I haven't modified the script you mentioned but i think you can use the following idea to do it for you.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body>
    <table cellpadding="0" cellspacing="0" border="0" width="760">
    <tr><td width="300" valign="top">
    <a href="http://www.dynamicdrive.com/" onMouseOver="document.getElementById('first').style.visibility = 'visible';" onMouseOut="document.getElementById('first').style.visibility = 'hidden';">Dynamic Drive</a>
    <br>
    <a href="http://www.javascriptkit.com/" onMouseOver="document.getElementById('second').style.visibility = 'visible';" onMouseOut="document.getElementById('second').style.visibility = 'hidden';">Javascript Kit</a>
    <br>
    <a href="http://www.php.net/" onMouseOver="document.getElementById('third').style.visibility = 'visible';" onMouseOut="document.getElementById('third').style.visibility = 'hidden';">PHP Information</a>
    </td>
    <td width="460" valign="top">
    <img id="first" src="1.png" style="visibility:hidden; position:absolute; padding-top:0px;" >
    <img id="second" src="2.png" style="visibility:hidden; position:absolute;padding-top:0px;">
    <img  id="third" src="3.png" style="visibility:hidden; position:absolute;padding-top:0px;">
    </td></tr>
    </table>
    </body>
    </html>

  3. #3
    Join Date
    Sep 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Fantastic

    Much simpler! works a treat - thanks!

Bookmarks

Posting Permissions

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