Joachim Wollmann: Wer das schaft ist wirklich gut!! Ich habe schon Stunden verbracht um dieses Pro

Hi hoffentlich könnt Ihr mir helfen! :-)

Habe folgendes Porblem.

Ich möchte mit dem Mouseover-Befehl 2 verschiederne Elemente (mit
Stylesheet-Postition) hervorrufen. Also wenn er mit der Mouse über
eine Grafik sollte man 2 verschiedene Grafiken an 2 verschiedenen
Orten sehen. Mit Stylesheet funktioniert das nicht. Man kann immer
nur ein Stylesheet Element zeigen!

Bei <div ID="demo2" align="center"> hab ich versucht 2 mousover einzubauen!
Er nimmt immer nur das erste. Oder wie kann man das anders machen?

DANKE

<html>

<head><script LANGUAGE="JavaScript">

<!--

if (document.layers)  {

ns = 1; ie = 0;

} else {

ns = 0; ie = 1;

}

var i = 1;

var test = "demo";

function zeigeEbeneNr(ebene_nr){

verbergen(eval('"' + test + i +'"'));

zeigen(eval('"' + test + ebene_nr +'"'));

i = ebene_nr;

}

function zeigen(name) {

if (ns) {

document.layers[''+name].visibility = "show";

}

else {

document.all[''+name].style.visibility = "visible"

}

}

function verbergen(name) {

if (ns){

document.layers[''+name].visibility = "hide"

}

else {

document.all[''+name].style.visibility = "hidden"

}

}

//-->

</script>

<title>DHTML:: Layer(Ebenen)- Roll - Over mit DHTML und JavaSkript</title>
<style TYPE="text/css">

#demo1 {position: absolute; visibility: visible; left: 200px; top: 100px;}

#demo2 {position: absolute; visibility: hidden; left: 50px; top: 137px;}

#demo3 {position: absolute; visibility: hidden; left: 10px; top: 150px;}

#demo4 {position: absolute; visibility: hidden; left: 60px; top: 137px;}

#Steuerung {position: absolute; visibility: visible; left: 50px; top: 100px;}

</style>
</head>

<body BGCOLOR="#FFFFFF" link="#800000" vlink="#800000" alink="#FF0000" background="../images/back2.gif" text="#000000" topmargin="5">

<div ID="Steuerung" align="center"><a HREF="javascript:zeigeEbeneNr(1)">

<p><font face="Verdana"><small></a> <br>
<A HREF="http://www.shareware.com" ONMOUSEOVER="zeigeEbeneNr(2)" ONMOUSEOUT="zeigeEbeneNr(1)"><b><img src="1.jpg" width="131" height="21" border="0" alt=""></b></A><br><br>
<A HREF="http://www.shareware.com" ONMOUSEOVER="zeigeEbeneNr(3)"><img src="1.jpg" width="131" height="21" border="0" alt=""></A><br>

</small></font></p>
</div>

<div ID="demo1" align="center">

<p><font face="Verdana"><small>... Dies ist der Inhalt von Ebene 1 ... ... Dies ist der
Inhalt von Ebene 1 ... <br>
... Dies ist der Inhalt von Ebene 1 ... ... Dies ist der Inhalt von Ebene 1 ... </small></font></p>
</div>

<div ID="demo2" align="center">
<A HREF="http://www.shareware.com" ONMOUSEOVER="zeigeEbeneNr(3)" ONMOUSEOVER="zeigeEbeneNr(2)" ONMOUSEOUT="zeigeEbeneNr(1)"><b><img src="2.jpg" width="131" height="150" border="0" alt=""></b></A>
</div>

<div ID="demo4" align="center">
ghghh
</div>

<div ID="demo3" align="center">

<p><font face="Verdana"><small>... Dies ist der Inhalt von Ebene 3 ... ... Dies ist der
Inhalt von Ebene 3 ... <br>
... Dies ist der Inhalt von Ebene 3 ... ... Dies ist der Inhalt von Ebene 3 ... </small></font></p>
</div>

</body>
</html>

  1. Hallo,

    wichtig ist dabei der Name der Objekte! Wenn Du über Objekt "1" fährst, müssen die Objekte "2" und "3" in entsprechender Weise ausgetauscht werden.

    Bsp.:

    ###########################
    <A onmouseout="document.zwei.src='../images/button.jpg'" onmouseover="document.zwei.src='../images/button_a.jpg'"
    onmouseout="document.drei.src='../images/button.jpg'" onmouseover="document.drei.src='../images/button_a.jpg'">
    <IMG alt="" border=0 name=eins src="../images/button.jpg"></A>

    <IMG alt="" border=0 name=zwei src="../images/button.jpg">

    <IMG alt="" border=0 name=drei src="../images/button.jpg">
    ###########################

    Ich hoffe, es ist das, was Du willst?!

    Reiner

    1. Hi Reiner,

      böser Fehler! Nicht mehere event-Handler gleichen Typs hintereinander definieren, sondern in den einen Handler alle Befehle schreiben, also nicht

      <a href="..." onMouseOver="mach1()" onMouseOver="mach2()">

      sondern

      <a href="..." onMouseOver="mach1();mach2();mach_noch_was()">

      Steht oben schon, aber weil Dui es hier noch mal explizit als Beispiel gegeben hast, noch mal der Hinweis, dass es so nicht funzt, auch wenn klar ist, worauf die eigenlich hinaus wolltest.

      Schönen Sonntag & viele Grüße
         Alex

      1. Hallo Alex,

        Du hast natürlich Recht!
        Blöder Fehler!!!

        Reiner

        Hi Reiner,

        böser Fehler! Nicht mehere event-Handler gleichen Typs hintereinander definieren, sondern in den einen Handler alle Befehle schreiben, also nicht

        <a href="..." onMouseOver="mach1()" onMouseOver="mach2()">

        sondern

        <a href="..." onMouseOver="mach1();mach2();mach_noch_was()">

        Steht oben schon, aber weil Dui es hier noch mal explizit als Beispiel gegeben hast, noch mal der Hinweis, dass es so nicht funzt, auch wenn klar ist, worauf die eigenlich hinaus wolltest.

        Schönen Sonntag & viele Grüße
           Alex

  2. Hallo Joachim,

    Dann versuche ich mal, mir die Lorbeeren zu verdienen ;-)

    [...]

    <div ID="demo2" align="center">
    [...] ONMOUSEOVER="zeigeEbeneNr(3)" ONMOUSEOVER="zeigeEbeneNr(2)" [...]

    [...]    ^.............................^......2x der gleiche Eventhandler!

    Ich hab mir den übrigen Code nicht genau angeschaut, und auch nicht überprüft, was alles mit dem Skript passiert, aber diese Stelle erschein mir auf jeden Fall sehr verdächtig :-) Wenn Du zwei Funktionenen mit demselben Eventhandler aufrufen willst, dann versuch sie hintereinander zu schreiben:    onMouseover="zeigeEbeneNr(3);zeigeEbeneNr(2);" Versuch das mal. Ich hoffe damit wirds besser :-)

    Gruß AlexBausW

  3. Hallo Joachim,
    wenn ich das richtig sehe, probierst Du mit den mouse-events an der falschen Stelle. Dein Problem dürfte die Funktion zeigeEbeneNr sein. Die kann nur ein DIV zur Zeit anzeigen und schaltet das vorher aktivierte vorher auch wieder aus. Es hilft nicht, diese Funktion mehrfach hintereinander aufzurufen. Die Funktion muss so umgeschrieben werden, dass zwei Nummern übergeben werden können, zwei Ebenen angezeigt und zwei Ebenen versteckt werden.

    var i = 1; // davon brauchst Du zwei Variablen

    var test = "demo";

    function zeigeEbeneNr(ebene_nr){ // hier müssen zwei Werte rein

    verbergen(eval('"' + test + i +'"'));

    zeigen(eval('"' + test + ebene_nr +'"'));

    i = ebene_nr;

    }

    Die Funktionen verbergen und zeigen müssen dann auch zweimal mit den jeweiligen Parametern aufgerufen werden.
    Viel Spaß beim basteln.
    Grüsse Günter