Axel Richter: Kleiner Fehler bei MouseOver einer DIV-Box

Beitrag lesen

SELF-Forum

Kleiner Fehler bei MouseOver einer DIV-Box

Axel Richter
– Informationen zu den Bewertungsregeln

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,

Ja? Das funktioniert _nur_ im Internet Explorer.

Zu Deinem Problem: Der Fehler ist, dass zwar einen Tabellenzelle im IE das Attribut bgColor hat, ein DIV-Element allerdings nicht. Dehshalb schlägt z.bgColor="" fehl, wenn z das DIV-Element ist. Beide haben allerdings ein style-Element mit den entsprechenden Eigenschaften.

Funktionieren würde im IE, und nur im IE, also:

  
function a(z)  
{if(!z.contains(event.fromElement))  
{z.style.cursor='hand';z.style.backgroundColor='#ff0000';}}  
  
function b(z)  
{if(!z.contains(event.toElement))  
{z.style.cursor='default';z.style.backgroundColor='#ffefef';}}  
  
function c(z)  
{if(event.srcElement.tagName=='DIV')  
{z.children.tags('A')[0].click();}}

Und nein, die Funktion c() führt im TD-Element nichts mehr aus.

Für so etwas braucht man aber kein JavaScript mehr. Beispiel:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Titel</title>  
  
<style type="text/css">  
  
* {font-size:101%;}  
  
.button {width:100px; height:1.2em; border:1px solid #9f0000; margin:3px; text-align:left;}  
  
td a {display:block; height:100%; width:100%; background-color:#ffefef;}  
.button a {display:block; height:100%; width:100%; background-color:#ffefef;}  
  
td a:hover {background-color:#ff0000;}  
.button a:hover {background-color:#ff0000;}  
  
</style>  
  
</head>  
  
<body>  
  
<table border="0" cellspacing="0" cellpadding="0" width="140">  
 <tr>  
  <td><a href="#">Irgendwas</a></td>  
 </tr>  
</table>  
  
<div class="button"><a href="#">Irgendwas</a></div>  
  
</body>  
</html>

Zu den von mir verwendeten CSS-Eigenschaften lies bitte hier nach: http://de.selfhtml.org/css/eigenschaften/index.htm.

Und gewöhne Dir an, HTML-Attributwerte in Anführungsstrichen zu schreiben. Zumindest bei JavaScript in den Attributen onmouseover usw. und bei URIs im Attribut href ist das zwingend notwendig.

viele Grüße

Axel

Beitrag melden
–
Informationen zu den Bewertungsregeln