JavaScriptProb beim FF
fatmike182 22.11.2008 - 20:13 1055 4
fatmike182
Agnotologe
|
Hallo, beim Opera funktioniert, beim FF nicht (IE konnte noch nicht getestet werden). Was ich machen möchte ist, bei mouseover über a, b oder c (sind tabellenfelder) sollen je nach Option TExte angezeigt werden. Realisieren wollte ich das so, indem ich die divs im style mit display=none ausblende und diese Eigenschaft per Javascript auf block ändere. Wie gesagt funktionierts im Opera. Für den Überblick: CSS (steht im header)
<style type="text/css" media="all">
#saeulenlist1, #saeulenlist2, #saeulenlist3,
#saeulentext1, #saeulentext2, #saeulentext3 {
display:none;
}
</style>
JS (direkt unterm style) <script language="javascript" type="text/javascript">
function mouseoversaeule(saeulennumber) {
var stext = document.getElementById('saeulentext'+saeulennumber);
var slist = document.getElementById('saeulenlist'+saeulennumber);
saeulentext_general.style.display='none';
saeulenlist_general.style.display='none';
stext.style.display='block';
slist.style.display='block';
}
function mouseoutsaeule(saeulennumber) {
var stext = document.getElementById('saeulentext'+saeulennumber);
var slist = document.getElementById('saeulenlist'+saeulennumber);
stext.style.display='none';
slist.style.display='none';
saeulentext_general.style.display='block';
saeulenlist_general.style.display='block';
}
</script>
so wird das Event ausgelöst <table>
<tr>
<td
onmouseover="mouseoversaeule(1)"
onmouseout="mouseoutsaeule(1)">
a
</td>
<td
onmouseover="mouseoversaeule(2)"
onmouseout="mouseoutsaeule(2)">
b
</td>
<td
onmouseover="mouseoversaeule(3)"
onmouseout="mouseoutsaeule(3)">
c
</td>
</tr>
</table>
das soll geändert werden,je nach mouseover <div id="saeulenlist_general">
<ul class="saeulenshortlist">
<li>generell</li>
<li>info</li>
</ul>
</div>
<div id="saeulentext_general">
Text für kein mouseevent
</div>
<div id="saeulenlist1">
<ul class="saeulenshortlist">
<li>SÄULE1</li>
<li>aaaa</li>
</ul>
</div>
<div id="saeulentext1">
Option a - Text
</div>
<div id="saeulenlist2">
<ul>
<li>SÄULE2</li>
<li>bbb</li>
</ul>
</div>
<div id="saeulentext2">
zweiter Tet zu Option b
</div>
<div id="saeulenlist3">
<ul>
<li>SÄULE3</li>
<li>ccc</li>
</ul>
</div>
<div id="saeulentext3">
letzter Text, also C
</div>
alles zusammen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>abc</title>
<style type="text/css" media="all">
#saeulenlist1, #saeulenlist2, #saeulenlist3,
#saeulentext1, #saeulentext2, #saeulentext3 {
display:none;
}
</style>
<script language="javascript" type="text/javascript">
function mouseoversaeule(saeulennumber) {
var stext = document.getElementById('saeulentext'+saeulennumber);
var slist = document.getElementById('saeulenlist'+saeulennumber);
saeulentext_general.style.display='none';
saeulenlist_general.style.display='none';
stext.style.display='block';
slist.style.display='block';
}
function mouseoutsaeule(saeulennumber) {
var stext = document.getElementById('saeulentext'+saeulennumber);
var slist = document.getElementById('saeulenlist'+saeulennumber);
stext.style.display='none';
slist.style.display='none';
saeulentext_general.style.display='block';
saeulenlist_general.style.display='block';
}
</script>
</head>
<body>
<table>
<tr>
<td
onmouseover="mouseoversaeule(1)"
onmouseout="mouseoutsaeule(1)">
a
</td>
<td
onmouseover="mouseoversaeule(2)"
onmouseout="mouseoutsaeule(2)">
b
</td>
<td
onmouseover="mouseoversaeule(3)"
onmouseout="mouseoutsaeule(3)">
c
</td>
</tr>
</table>
<div id="saeulenlist_general">
<ul class="saeulenshortlist">
<li>generell</li>
<li>info</li>
</ul>
</div>
<div id="saeulentext_general">
Text für kein mouseevent
</div>
<div id="saeulenlist1">
<ul class="saeulenshortlist">
<li>SÄULE1</li>
<li>aaaa</li>
</ul>
</div>
<div id="saeulentext1">
Option a - Text
</div>
<div id="saeulenlist2">
<ul>
<li>SÄULE2</li>
<li>bbb</li>
</ul>
</div>
<div id="saeulentext2">
zweiter Tet zu Option b
</div>
<div id="saeulenlist3">
<ul>
<li>SÄULE3</li>
<li>ccc</li>
</ul>
</div>
<div id="saeulentext3">
letzter Text, also C
</div>
</body>
</html>
der Auslöser (also mouseover bei Tabelle) funktioniert an und für sich. Hab da auch Sachen wie Ändern der Bildquelle für ein Bild drinnen, und das funktioniert auch im FF. Weiters: wenn man den style-tag rausgibt (und anfangs alle divs angezeigt werden) sieht man, dass das display:none vom onmouseout-Event funktioniert. Was hats da? Danke im Voraus!
|
kleinerChemiker
Here to stay
|
tip: schau dir mal die fehlerkonsole an. bei mir spuckt sie folgendes aus: Fehler: saeulentext_general is not defined Quelldatei: file:///C:/Users/mik/Desktop/test.html Zeile: 17 edit: und so funzts: <script language="javascript" type="text/javascript">
function mouseoversaeule(saeulennumber) {
var stext = document.getElementById('saeulentext'+saeulennumber);
var slist = document.getElementById('saeulenlist'+saeulennumber);
document.getElementById('saeulentext_general').style.display='none';
document.getElementById('saeulenlist_general').style.display='none';
stext.style.display='block';
slist.style.display='block';
}
function mouseoutsaeule(saeulennumber) {
var stext = document.getElementById('saeulentext'+saeulennumber);
var slist = document.getElementById('saeulenlist'+saeulennumber);
stext.style.display='none';
slist.style.display='none';
document.getElementById('saeulentext_general').style.display='block';
document.getElementById('saeulenlist_general').style.display='block';
}
</script>
|
fatmike182
Agnotologe
|
mah, danke!
Hab den FF nur für sowas offen und hab mit der error console noch nie was zu tun gehabt - dachte, dass dann auch ein Zeichen irgendwo kommt wie beim IE (blöde Ausrede, aber ich war so naiv).
Na dann schau ich, ob das so funzt (hab sowas ähnlicher probiert, also mit:
var s_generallist = document.getElementById('saeulenlist_general');
und dann eben die Eigenschaft geändert und das hat nicht gepasst.
thx nochmal!
edit: thx - hat funktioniert!
Bearbeitet von fatmike182 am 22.11.2008, 22:30
|
jives
And the science gets done
|
Heißer Tipp für Webentwicklung mit und für FF: http://getfirebug.com/Damit hast du das Error-Symbol und unzählige andere Funktionen.
|
fatmike182
Agnotologe
|
cool - Opera Dragonfly gibts jez auch fürn FF!  thx, werd ich brauchen
|
Anmeldung