.CjMedlem sedan nov. 200319 inlägg
Håller på med ett galleri och skulle vilja att en beskrivning av bilden visas om man rör musen över en bild. Tänkte först lösa det med:
<div id="info" style="position:absolute; left:343px; top:145px; width:350px; height:10px; z-index:10; visibility: hidden; border: 0px none ;" class="text3">
.... onMouseOver="MM_showHideLayers('info','','show')" onMouseOut="MM_showHideLayers('info','','hide')"....
Problemet är att bilderna i galleriet är olika stor (vertical/horisontal) och infotexten hamnar positon:absolute;
kan man på något vis lägga info texten i förhållande till onmouse over bilden?
Hade tänkt mig ungefär så här:
PepeJeriaMedlem sedan feb. 2003779 inlägg
Nu kanske jag är ute och cyklar, men efter att ha besökt Eric Meyer blev jag inspirerad att göra följande lösning med css. Lite av ett under att det fungerar i IE 5+, men om man lägger till propertien border i a:hover så funkar det.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div img
{
display:block;
}
div a
{
text-decoration:none;
}
div a:hover
{
text-decoration:none;
border:none;
}
div a span
{
display: none;
}
div a:hover span
{
display: inline;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
</head>
<body>
<div>
<a href="#"><img src="http://www.webforum.nu/images/wfstandard/logo_webforum.gif" alt=""/>ººº <span>Text 1</span></a>
</div>
<div>
<a href="#"><img src="http://www.webforum.nu/images/wfstandard/logo_webforum.gif" alt=""/>ººº <span>Text 2</span></a>
</div>
</body>
</html>
.CjMedlem sedan nov. 200319 inlägg
Tack så mycket!
Jag satt och pysslade lite och fick det att fungera med:
<style type="text/css"><!--
.absolute { position:absolute; visibility:hidden; }
//--></style>
<script language="JavaScript"><!--
function show(object) {
if (document.getElementById) {
document.getElementById(object).style.visibility = 'visible';
}
else if (document.layers && document.layers[object]) {
document.layers[object].visibility = 'visible';
}
else if (document.all) {
document.all[object].style.visibility = 'visible';
}
}
function hide(object) {
if (document.getElementById) {
document.getElementById(object).style.visibility = 'hidden';
}
else if (document.layers && document.layers[object]) {
document.layers[object].visibility = 'hidden';
}
else if (document.all) {
document.all[object].style.visibility = 'hidden';
}
}
//--></script>
<img src="bild1.gif" width="11" height="3" onMouseover="show('myDiv')" onMouseout="hide('myDiv')">
<div id="myDiv" class="absolute" style="width:200;">Bla bla bla</div>
Vet inte vilket som är bäst dock..
någon(?)
JojoxxMedlem sedan juni 20004 306 inlägg
PepeJerias variant är ju lite skoj eftersom den inte använder script öht, men annars spelar det ingen roll. Båda funkar i IE/Mozilla/Opera.
