Onouseover (bild/text)

3 svar · 227 visningar · startad av .Cj 30 nov. 2003

.CjMedlem sedan nov. 200319 inlägg

Frågan30 nov. 2003 15:26#1

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. 2003774 inlägg

30 nov. 2003 17:36#2

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=""/>&#186;&#186;&#186; <span>Text 1</span></a>
</div>

<div>
	<a href="#"><img src="http://www.webforum.nu/images/wfstandard/logo_webforum.gif" alt=""/>&#186;&#186;&#186; <span>Text 2</span></a>
</div>

</body>
</html>

.CjMedlem sedan nov. 200319 inlägg

30 nov. 2003 18:15#3

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 308 inlägg

30 nov. 2003 20:21#4

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.