Mouseover type event

**glenvern** · 02-13-2011 03:36 AM

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

**coothead** · 02-13-2011 06:40 AM

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

**glenvern** · 02-13-2011 07:34 AM

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>

**coothead** · 02-13-2011 10:12 AM

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

**glenvern** · 02-13-2011 01:47 PM

Thanx Coothead that's perfect, just what I wanted

**coothead** · 02-13-2011 01:51 PM

No problem, you're very welcome.

**glenvern** · 02-14-2011 01:43 AM

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?

**coothead** · 02-14-2011 04:14 AM

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: Mouseover type event

Thread Tools

Display

Mouseover type event

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions