Mouseover command in HTML [Archive]

Aaron Yapp

08-27-2006, 05:46 PM

Hey

I am trying to create a simple html site with frontpage, as i belive it is simpler then dreamweaver, nd others i have fount.

I want to create a mouseover command on certain images. i fount a code but its unsuitable for what i want.

The site i want to use the code on is: http://riot.tribal-code.co.uk/vault.html

If u put your mouse over the picture of the 'top hat' you see a mouseover thing with the stats of the tophat ... but you cannot see them all, and its untidy. Any ideas on how i could fit all the text on their? or is there a better mouseover command i can use in HTML?

Thanks
-Aaron

CrazyMerlin

08-28-2006, 01:26 AM

Hi Aaron.

It seems you are simply using a title tag to show your stats, and unfortunately that is part of the browser and you have no control over it.

What you need is a proper popup, and I can say that there are lots of free ones around.

Just look around the net, search yahoo for "javascript popup" and you will find plenty.

Merlin!

coothead

08-28-2006, 02:33 AM

Hi there Aaron Yapp,

you can see an example of a CSS tooltip here...
http://mysite.orange.co.uk/azygous/css_tooltip.html
...and here is the 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