...

View Full Version : onmouseover window



keissfootball
10-01-2006, 06:29 PM
Hi. I want to display a window with a text on mouseover and it dissapears onmouseout. Could you remind me with some link maybe, how was it called, and how could it be achieved?

coothead
10-01-2006, 07:23 PM
Hi there keissfootball,

does this help...

link

http://mysite.orange.co.uk/azygous/css_tooltip.html
code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css tooltip</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
background-color:#eef;
}
#wrapper {
width: 488px;
height:298px;
background-color:#fff;
border:6px double #006;
margin:185px auto;
}
.container {
height:30px;
width:400px;
margin: 20px auto;
}
a.info {
position:relative; /*this is the key*/
z-index:0;
color:#666;
font-style:oblique;
text-decoration:none;
display:block;
float:left;
}
.spanny {
margin:0 3px;
float:left;
}
a.info .ttip {
display: none;
float:left;
}
a.info:hover{
z-index:1;
background-color:#fff;
}
a.info:hover .ttip {
display:block;
position:absolute;
top:20px;
left:40px;
width:120px;
border:3px double #0cf;
background-color:#cff;
color:#099;
font-size:10px;
font-style:normal;
padding:5px;
}
#pic {
background-image:url(../images/anim3.gif);
border:3px solid #060;
width:100px;
height:100px;
}
a.info:hover #pictip {
top:20px;
left:-280px;
width:240px;
border:3px double #fc0;
background-color:#ffc;
color:#990;
font-size:12px;
text-align:justify;
padding:10px;
}
/*//]]>*/
</style>

</head>
<body>

<div id="wrapper">

<div class="container">
<span class="spanny">This</span>
<a href="#" class="info">word
<span class="ttip">
This is the customised tool-tip. It's main advantage over the 'title' attribute
is that it remains in view whilst the hover state is maintained, thereby
allowing for a large amount of information to be imparted to the reader
</span>
</a>
<span class="spanny">will produce the tool-tip.</span>
</div>

<div class="container">
<span class="spanny">This</span>
<a href="#" class="info" id="pic">
<span class="ttip" id="pictip">
This is the customised tool-tip. It's main advantage over the 'title' attribute
is that it remains in view whilst the hover state is maintained, thereby
allowing for a large amount of information to be imparted to the reader. As you
can see it is also easily customizable.
</span>
</a>
<span class="spanny">can also produce the tool-tip.</span>
</div>

</div>

</body>
</html>
coothead

keissfootball
10-01-2006, 08:01 PM
Yeah that's the thing I was looking for, tnx coothead!!! ;)

coothead
10-01-2006, 08:09 PM
No problem, you're welcome. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum