• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

DIV-Box MouseOver Hintergrund ändern geht nicht mehr

R

Robertus

New member
Hallo,

in einem Tabellenfeld ist ein Link, beim Überfahren das Feldes soll der Hintergrund geändert werden und ebenso soll beim Klicken auf das Feld der Link aufgerufen werden, egal ob jetzt die Maus direkt über dem Link ist oder auf einem freien Bereich im Feld...

Das funktioniert soweit ganz gut, beim Wechsel auf eine DIV-Box statt TD geht es aber nicht mehr.

Der Hintergrund wird nicht geändert, das mit dem Klicken funktioniert aber:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>

<style type=text/css>

.button{width:100px;height:16px;border:1px solid #9f0000;background:#ffefef;margin-bottom:3px;padding-top:2px;padding-left:8px;text-align:left}

</style>

<script language=javascript>

function a(z)
{if(!z.contains(event.fromElement))
{z.style.cursor='hand';z.bgColor='#ff0000';}}

function b(z)
{if(!z.contains(event.toElement))
{z.style.cursor='default';z.bgColor='#ffefef';}}

function c(z)
{if(event.srcElement.tagName=='DIV')
{z.children.tags('A')[0].click();}}

</script>

</head><body>

<table border=0 cellspacing=0 cellpadding=0 width=140>
<tr>
<td onmouseover=a(this); onmouseout=b(this); onclick=c(this);>
<a href=#>Irgendwas</a>
</td>
</tr>
</table>

<div class=button onmouseover=a(this); onmouseout=b(this); onclick=c(this);>
<a href=#>Irgendwas</a></div>

</body></html>
Auch komisch: In Funktion c() hab ich das TD in DIV
geändert, trotzdem geht es in der alten Table-Variante noch?

Weiß jemand wo der Fehler liegt?
 
Zuletzt bearbeitet von einem Moderator:
Geht auch nur mit CSS in etwa so:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Dokumenttitel</title> 
<style type="text/css">
a.irgendwas:link, a.irgendwas:visited, a.irgendwas:hover, a.irgendwas:active {
  padding:2px 8px 2px 8px;
  width:100px;
  text-decoration:none;
  display:block;
  background:#ffefef;
  border:1px solid;
 
}
a.irgendwas:hover {
  background:#ff0000;
  cursor:hand;
}
</style> 
</head> 
<body> 
<a class="irgendwas" href="">Irgendwas</a> 
</body> 
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben