www.webdeveloper.com
Results 1 to 8 of 8

Thread: Mouseover type event

  1. #1
    Join Date
    Jul 2003
    Posts
    138

    Mouseover type event

    I would like an image to appear when I run my mouse over a word.
    Can anyone tell me what this event is called and where I can find the code?

    thanx..

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    Hi there glenvern,

    here is a possible CSS solution...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>hover word, reveal image</title>
    
    <style type="text/css">
    body {
        background-color:#fc9;
     }
    #container {
        width:760px;
        padding:20px 10px;
        border:3px double #c96;
        margin:20px auto 0;
        background-color:#fff;
     }
    #word {
        position:relative;
        float:left; 
        padding-right:5px; 
        font-weight:bold;
        color:#f60; 
     }
    #word img { 
        position:absolute;
        left:-9999px;
        padding:2px;
        border:1px solid #f60;
        background-color:#fff;
     }
    #word:hover { 
        background-color:#fff; /* required by IE6 */
     }
    #word:hover img {
        top:0;
        left:100px;
     }
    p {
        margin:0 0 10px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <a id="word" href="#">Lorem<img src="http://www.coothead.co.uk/images/anim4.gif" alt=""></a>
    
    <p>
    ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p>
    
    </div>
    
    </body>
    </html>
    
    coothead

  3. #3
    Join Date
    Jul 2003
    Posts
    138
    Hi Coot head, thank you for that code.
    Just one thing I can't get it to work with a word
    in the middle of a paragraph it seems to only work
    if the word is the first or last word?

    or am I doing something wrong? can it work with the word 'adipiscing'?

    <a id="word" href="#">Lorem<img src="http://www.coothead.co.uk/images/anim4.gif" alt=""></a>
    <p>
    ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
    </p>

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    Hi there glenvern,

    I apologize for that error on my part.

    There was an unrequired float:left in the CSS.

    Try this amended version...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head><!--this is for coothead testing and should be removed-->
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>hover word, reveal image</title>
    
    <style type="text/css">
    body {
        background-color:#fc9;
     }
    #container {
        width:760px;
        padding:20px 10px;
        border:3px double #c96;
        margin:20px auto 0;
        background-color:#fff;
     }
    #word {
        position:relative;
        /*float:left;*/ /* this should not be here!!!! */
        padding:0 5px; 
        font-weight:bold;
        color:#f60; 
     }
    #word img { 
        position:absolute;
        left:-9999px;
        padding:2px;
        border:1px solid #f60;
        background-color:#fff;
     }
    #word:hover { 
        background-color:#fff; /* required by IE6 */
     }
    #word:hover img {
        top:0;
        left:100px;
     }
    p {
        margin:0 0 10px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <p>
    Lorem ipsum dolor sit amet, consectetuer<a id="word" href="#">adipiscing<img src="anim4.gif" alt=""></a>
    elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque 
    nibh orci quis mi.  Fusce laoreet interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies.
    Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In 
    pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius 
    nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
    in dui. In eget elit. Praesent eu lorem.
    </p>
    
    </div>
    
    </body>
    </html>
    
    
    coothead

  5. #5
    Join Date
    Jul 2003
    Posts
    138
    Thanx Coothead that's perfect, just what I wanted

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    No problem, you're very welcome.

  7. #7
    Join Date
    Jul 2003
    Posts
    138
    Hi Coothead if I can ask one more thing of you -

    How do I put a caption or some text on top or below this event?

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    Hi there glenvern,

    try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <!--this is for coothead testing and should be removed-->
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>hover word, reveal image with caption</title>
    
    <style type="text/css">
    body {
        background-color:#fc9;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
     }
    #container {
        width:760px;
        padding:20px 10px;
        border:3px double #c96;
        margin:20px auto 0;
        background-color:#fff;
        font-size:100%;
     }
    #word {
        position:relative;
        padding:0 5px; 
        font-size:100%;
        font-weight:bold;
        color:#f60; 
     }
    #word span { 
        position:absolute;
        left:-9999px;
        width:108px;
        padding:3px 0;
        border:1px solid #f60;
        background-color:#fc9;
        color:#630;
        font-family:'times new roman',serif;
        font-size:110%;
        font-weight:normal;
        text-align:center;
        text-decoration:none;
     }
    #word img {
        display:block;
        margin:auto;
        border:1px solid #630;
     }
    #word:hover { 
        background-color:#fff; /* required by IE6 */
     }
    #word:hover span {
        top:0;
        left:100px;
     }
    p {
        margin:0 0 10px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <p>
    Lorem ipsum dolor sit amet, consectetuer<a id="word" href="#">adipiscing<span><img src="anim4.gif" alt="">caption</span></a>
    elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque 
    nibh orci quis mi.  Fusce laoreet interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies.
    Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In 
    pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius 
    nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
    in dui. In eget elit. Praesent eu lorem.
    </p>
    
    </div>
    
    </body>
    </html>
    
    
    
    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles