JavaScriptProb beim FF

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/javascriptprob_beim_ff_201986/page_1 - zur Vollversion wechseln!

fatmike182 schrieb am 22.11.2008 um 20:13

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)

Code: PHP

 
<style type="text/css" media="all">
	#saeulenlist1, #saeulenlist2, #saeulenlist3,
	#saeulentext1, #saeulentext2, #saeulentext3 {
		display:none;
	}
</style>

JS (direkt unterm style)

Code: PHP

 <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

Code: PHP

 <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

Code: PHP

    <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:

Code: PHP

 
<!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 schrieb am 22.11.2008 um 22:01

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:

Code: PHP

<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 schrieb am 22.11.2008 um 22:18

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!

jives schrieb am 22.11.2008 um 22:30

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 schrieb am 22.11.2008 um 22:40

cool - Opera Dragonfly gibts jez auch fürn FF!
thx, werd ich brauchen