nicht angemeldet
Kleiner Fehler bei MouseOver einer DIV-Box
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:
<!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?
Danke,
Stellina
-
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
-
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.
so ein quatsch!!!
-
Hallo,
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.
so ein quatsch!!!*g* empfohlener Quatsch und in XHTML zwingend vorgeschriebener Quatsch.
viele Grüße
Axel
-
wen juckts? doch nur wenn man doctype dann auch xhtml macht.... und meist braucht mal kein xhtml-mistzeugs :)
-
-
-