tommyhilfe: Zwei Menüs mit Buttonklick Bilder aus dem jew Menü übereinander?

Hallo liebe Leute,

ich suche ein Menü, dass mir über zwei Menüstränge Bilder übereinander legt.

BsP.:

  • Menü 1 mit 3 Buttons steht links
  • Menü 2 mit 3 Buttons steht rechts

a - Beim Klick auf einen der Button im rechten Menü wird ein JPG-Bild in der Mitte platziert.
b - Beim Klick auf einen der Button im linken Menü wird ein PNG-Bild über das Bild von Menü rechts gelegt. (PNG soll immer über JPG liegen!)

c - Egal welches Bild man links oder rechts anklickt, es soll immer nur das mit dem letzten Klick gezeigt werden.

Ich suche jetzt schon einige Tage nach einer guten Lösung und habe bisher nur folgendes fertiges Script gefunden. Sieht auch schon sehr gut aus (ist auch aus dem Forum hier aber vo 2002). Ich schaffe es nur nicht, daraus zwei getrennt angesprochene Menüstränge zu machen. Habt ihr eine Idee? Wäre echt super!

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>sichtbare/unsichtbare Layer</title>  
<script language="javascript">  
<!--  
var i = 1;  
var schicht = "bereich";  
  
var browserName = navigator.appName;  
var browserVersion = parseInt(navigator.appVersion);  
var isIE = false;  
var isNN = false;  
var isDOM = false;  
var isDomIE = false;  
var isDomNN = false;  
  
isIE = browserName.indexOf("Microsoft Internet Explorer" )==-1?false:true;  
isNN = browserName.indexOf("Netscape")==-1?false:true;  
isDOM = document.getElementById?true:false;  
  
function verbergen(name) {  
  if (isDOM) document.getElementById(name).style.visibility="hidden";  
  if (isDomIE) document.all[name].style.visibility="hidden";  
  if (isDomNN) document.layers[name].visibility="hidden";  
}  
  
function zeigen(name) {  
  if (isDOM) document.getElementById(name).style.visibility="visible";  
  if (isDomIE) document.all[name].style.visibility="visible";  
  if (isDomNN) document.layers[name].visibility="visible";  
}  
  
function click(num){  
verbergen(eval('"' + schicht + i +'"'));  
zeigen(eval('"' + schicht + num +'"'));  
i = num;  
}  
//-->  
</script>  
  
<style type="text/css">  
<!--  
body { margin-top:5px; margin-bottom:15px; background-color:#000011; }  
  
p,h1,h2,h3,h4,ul,ol,li,div,td,b,i { font-family:Helvetica,Arial,Sans-serif; }  
  
h1 { font-size:16pt; }  
h2 { font-size:14pt; }  
h3 { font-size:12pt; }  
h4 { font-size:10pt; }  
  
p,ul,ol,li,div,td,b,i { font-size:9pt; color:#FFFFFF; }  
  
a:link { color:#FFFFFF; text-decoration:none; }  
a:visited { color:#FFFFFF; text-decoration:none; }  
a:active { color:#FFFFFF; text-decoration:none; }  
a:hover { color:#FF0000; text-decoration:none; }  
  
#bereich1 {position: absolute; visibility: visible; left: 160px; width: 800px; top: 10px; background-color:#0000FF; layer-background-color:#0000FF;}  
#bereich2 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 40px; background-color:#0000FF; layer-background-color:#0000FF;}  
#bereich3 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 70px; background-color:#0000FF; layer-background-color:#0000FF;}  
#bereich4 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 100px; background-color:#0000FF; layer-background-color:#0000FF;}  
#bereich5 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 120px; background-color:#0000FF; layer-background-color:#0000FF;}  
#bereich6 {position: absolute; visibility: hidden; left: 160px; width: 800px; top: 150px; background-color:#0000FF; layer-background-color:#0000FF;}  
#menu {position: absolute; visibility: visible; left: 10px; width: 120px; top: 70px; z-index: 25;}  
//-->  
</style>  
<base target="_blank">  
</head>  
  
<body>  
  
<div ID="bereich1">  
<div align="center"><center>  
<table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>  
    <td width="50%"><b>bitte Inhalt eingeben</p></td>  
    <td width="50%"> </td>  
  </tr>  
</table></center></div>  
</div>  
  
<div ID="bereich2">  
<div align="center"><center>  
<table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>  
    <td width="50%"> </td>  
    <td width="50%"> </td>  
  </tr>  
</table></center></div>  
</div>  
  
<div ID="bereich3">  
<div align="center"><center>  
<table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>  
    <td width="50%"> </td>  
    <td width="50%"> </td>  
  </tr>  
</table></center></div>  
</div>  
  
<div ID="bereich4">  
<div align="center"><center>  
<table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>  
    <td width="50%"> </td>  
    <td width="50%"> </td>  
  </tr>  
</table></center></div>  
</div>  
  
<div ID="bereich5">  
<div align="center"><center>  
<table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>  
    <td width="50%"> </td>  
    <td width="50%"> </td>  
  </tr>  
</table></center></div>  
</div>  
  
<div ID="bereich6">  
<div align="center"><center>  
<table border="0" cellspacing="5" cellpadding="5" width="95%"><tr>  
    <td width="50%"> </td>  
    <td width="50%"> </td>  
  </tr>  
</table></center></div>  
</div>  
  
<div ID="menu"><b><br>  
<a href="javascript:click(1)" target="_self">Bereich 1</a><br><br>  
<a href="javascript:click(2)" target="_self">Bereich 2</a><br><br>  
<a href="javascript:click(3)" target="_self">Bereich 3</a><br><br>  
<a href="javascript:click(4)" target="_self">Bereich 4</a><br><br>  
<!--  
<a href="javascript:click(5)">bereich5</a><br><br>  
<a href="javascript:click(6)">bereich6</a>  
//-->  
</b>  
</div>  
  
</body>  
</html>  
  

  1. Om nah hoo pez nyeetz, tommyhilfe!

    Solch alte Scripte sind ungeeignet. Ebenso das Tabellenlayout.

    Verstehe ich das richtig: Du möchtest auf einen Button klicken und irgendwo auf der Seite soll ein Bild zu sehen sein?

    Vielleicht ist die Verwendung der Pseudoklasse target ausreichend?

    Matthias

    --
    1/z ist kein Blatt Papier.

    1. Hallo Matthias,

      vielen Dank für deine Hilfe!

      Geht das nicht über Java? Ich würde gerne einen Seitenload vermeiden. Es sollen einfach immer unterschiedliche PNGs über unterschiedliche JPGs gelegt werden. Es geht um einen Farbwechsel, bei dem aus zwei getrennten Bereichen immer zwei Bilder gleichzeitig übereinander stehen.

      Linkes Menü ruft ein Jpg auf und...
      die rechte Seite legt ein PNG darüber.

      Stehe vollkommen aufm Schlauch und brauce Hilfe :-)

      Danke,
      Tommy

      1. Om nah hoo pez nyeetz, tommyhilfe!

        Geht das nicht über Java?

        Java ist nicht JavaScript.

        Es geht um einen Farbwechsel, bei dem aus zwei getrennten Bereichen immer zwei Bilder gleichzeitig übereinander stehen.

        Farbwechsel? Zeig mal ein Beispiel. Vielleicht kommt man ganz ohne Bilder aus.

        Linkes Menü ruft ein Jpg auf und...
        die rechte Seite legt ein PNG darüber.

        Kann dieses PNG über jedes andere JPG gelegt werden? _Muss_ zuerst links geklickt werden?

        Stehe vollkommen aufm Schlauch

        Angeber ;-)

        Wie sind deine Kenntnisse in HTML, CSS und JavaScript? Gibt es schon ein zugrunde liegendes HTML-Dokument?

        Matthias

        --
        1/z ist kein Blatt Papier.

        1. Om nah hoo pez nyeetz, tommyhilfe!

          Geht das nicht über Java?

          Java ist nicht JavaScript.

          Es geht um einen Farbwechsel, bei dem aus zwei getrennten Bereichen immer zwei Bilder gleichzeitig übereinander stehen.

          Farbwechsel? Zeig mal ein Beispiel. Vielleicht kommt man ganz ohne Bilder aus.

          Linkes Menü ruft ein Jpg auf und...
          die rechte Seite legt ein PNG darüber.

          Kann dieses PNG über jedes andere JPG gelegt werden? _Muss_ zuerst links geklickt werden?

          Stehe vollkommen aufm Schlauch
          Angeber ;-)

          Wie sind deine Kenntnisse in HTML, CSS und JavaScript? Gibt es schon ein zugrunde liegendes HTML-Dokument?

          Matthias

          Hey Matthias,
          ich habe Kenntnisse in HTML und CSS, Javascrip leider nihct :(

          KAnnst du mir sagen, wie ich das JAvascript auf ein neues HTML Menü anwenden kann? Das Script macht ja eigentlich schon das, was ich benötige. Das Problem ist, wenn ich ein neues Menü einbaue, führt das Script die Funktion inklusive aus (es wird also immer nur ein Bild angezeigt).

          Ich brauche die Funktion aber auf ein neues Menü losgelöst von dem anderen Menü, allein die Bilder würde ich per Css mit z-index übereinander setzen lassen.

          Wie kann ich das Script umschreiben, dass es ein neues MEnü anspricht, eigentlich wäre das doch die Lösung, oder?

            
          <script language="javascript">  
          <!--  
          var i = 1;  
          var schicht = "bereich";  
            
          var browserName = navigator.appName;  
          var browserVersion = parseInt(navigator.appVersion);  
          var isIE = false;  
          var isNN = false;  
          var isDOM = false;  
          var isDomIE = false;  
          var isDomNN = false;  
            
          isIE = browserName.indexOf("Microsoft Internet Explorer" )==-1?false:true;  
          isNN = browserName.indexOf("Netscape")==-1?false:true;  
          isDOM = document.getElementById?true:false;  
            
          function verbergen(bereich) {  
            if (isDOM) document.getElementById(name).style.visibility="hidden";  
            if (isDomIE) document.all[name].style.visibility="hidden";  
            if (isDomNN) document.layers[name].visibility="hidden";  
          }  
            
          function zeigen(bereich) {  
            if (isDOM) document.getElementById(name).style.visibility="visible";  
            if (isDomIE) document.all[name].style.visibility="visible";  
            if (isDomNN) document.layers[name].visibility="visible";  
          }  
            
          function click(num){  
          verbergen(eval('"' + schicht + i +'"'));  
          zeigen(eval('"' + schicht + num +'"'));  
          i = num;  
          }  
            
            
          //-->  
          </script>  
          
          
          1. Om nah hoo pez nyeetz, tommyhilfe!

            KAnnst du mir sagen, wie ich das JAvascript auf ein neues HTML Menü anwenden kann? Das Script macht ja eigentlich schon das, was ich benötige. Das Problem ist, wenn ich ein neues Menü einbaue, führt das Script die Funktion inklusive aus (es wird also immer nur ein Bild angezeigt).

            Das Skript ist es nicht wert, beachtet zu werden. Andersrum wird ein Schuh draus. Kümmere dich zuerst um das HTML. _Danach_ kann zusätzliche Funktionalität per JavaScript eingebaut werden. Erstelle ein HTML-Dokument, das deine gewünschte Struktur abbildet. Dann können wir ein neues Script bauen. Falls es überhaupt notwendig ist. Es wäre schön, wenn du auch die Fragen beantworten könntest.

            Farbwechsel? Zeig mal ein Beispiel. Vielleicht kommt man ganz ohne Bilder aus.

            Kann dieses PNG über jedes andere JPG gelegt werden? _Muss_ zuerst links geklickt werden?

            Matthias

            --
            1/z ist kein Blatt Papier.

            1. Om nah hoo pez nyeetz, tommyhilfe!

              KAnnst du mir sagen, wie ich das JAvascript auf ein neues HTML Menü anwenden kann? Das Script macht ja eigentlich schon das, was ich benötige. Das Problem ist, wenn ich ein neues Menü einbaue, führt das Script die Funktion inklusive aus (es wird also immer nur ein Bild angezeigt).

              Das Skript ist es nicht wert, beachtet zu werden. Andersrum wird ein Schuh draus. Kümmere dich zuerst um das HTML. _Danach_ kann zusätzliche Funktionalität per JavaScript eingebaut werden. Erstelle ein HTML-Dokument, das deine gewünschte Struktur abbildet. Dann können wir ein neues Script bauen. Falls es überhaupt notwendig ist. Es wäre schön, wenn du auch die Fragen beantworten könntest.

              Farbwechsel? Zeig mal ein Beispiel. Vielleicht kommt man ganz ohne Bilder aus.

              Kann dieses PNG über jedes andere JPG gelegt werden? _Muss_ zuerst links geklickt werden?

              Matthias

              Hey Matthias,
              hier ist mein Gerüst :)

                
              <head>  
                
              <style type="text/css">  
              <!--  
              #bilder-jpg {top: 100px; margin-left:100px; width: 500px; height:300px; position: absolute}  
              #bilder-png {top: 100px; margin-left:100px; width: 500px; height:300px; position: absolute}  
                
              #buttonleiste-jpg {top: 450px; left:100px; position:absolute }  
              #buttonleiste-png {top: 450px; left:300px; position:absolute}  
              //-->  
              </style>  
              </head>  
                
              <body>  
              <div id="bilder-jpg">  
              	<div><img src="bild-jpg-1.jpg"></div>  
              	<div><img src="bild-jpg-2.jpg"></div>  
              	<div><img src="bild-jpg-3.jpg"></div>  
              </div>  
              <div id="bilder-png">  
              	<div><img src="bild-png-1.png"></div>  
              	<div><img src="bild-png-2.png"></div>  
              	<div><img src="bild-png-3.png"></div>  
              </div>  
              <div id="buttonleiste-jpg">  
              	<div>Button-JPG 1</div>  
              	<div>Button-JPG 2</div>  
              	<div>Button-JPG 3</div>  
              </div>  
              <div id="buttonleiste-png">  
              	<div>Button-PNG 1</div>  
              	<div>Button-PNG 2</div>  
              	<div>Button-PNG 3</div>  
              </div>  
              </body>
              

              Die Bilder können leider nicht nur mit Farbfläche umgesetzt werden, es müssen leider Bilder sein. Und ja, jedes PNG muss über jedes JPG gelegt werden.

              Wenn man einen neuen PNG Button klickt, dann soll sich der vorherige aktive PNG-Button wieder deaktivieren. Für JPG gilt das gleiche.

              Danke,
              Tommy

              1. Om nah hoo pez nyeetz, tommyhilfe!

                Bitte zitiere sinnvoll, nicht einfach alles, sondern nur das, worauf du dich beziehst.

                Ich schlage folgendes HTML vor

                <div>
                   <button type="button" onclick="change(this)" id="jpg1">Button-JPG 1</button>

                für png das Gleiche

                Die Ids enthalten jeweils den Bildnamen ohne Dateierweiterung. Die onclick-Attribute können später verschwinden. (Wenn es richtig gut werden soll)

                <figure id="vorschau"></figure>

                Dieses Element bekommt die Bilder als Hintergrundgrafiken.

                Javascriptentwurf

                function aendere(sender) {  
                  e = document.getElementById("vorschau");  
                  if (e.style.backgroundImage) {  
                    png_grafik = e.style.backgroundImage.substr(zahl,4); //aktuellen Wert merken  
                    jpg_grafik = e.style.backgroundImage.substr(anderezahl,4);  
                  }  
                  else {  
                    png_grafik = "png1"; //Am Anfang Standard  
                    jpg_grafik = "jpg1";  
                  }  
                  if (sender.id.substr(0,3) == "png") png_grafik = sender.id; else jpg_grafik = sender.id;  
                  e.style.backgroundImage = "url(pfad/"+png_grafik+".png), url(pfad/"+jpg_grafik+".jpg)";  
                }
                

                Das JavaScript hat das Problem, nur auf deine spezielle Umgebung zu passen. Für Zahl musst du natürlich <http://de.selfhtml.org/javascript/objekte/string.htm#substr@title=was passendes einsetzen>.

                Matthias

                --
                1/z ist kein Blatt Papier.

                1. Om nah hoo pez nyeetz, Matthias Apsel!

                  function aendere(sender) {

                  e = document.getElementById("vorschau");
                    if (e.style.backgroundImage) {
                      png_grafik = e.style.backgroundImage.substr(zahl,4); //aktuellen Wert merken
                      jpg_grafik = e.style.backgroundImage.substr(anderezahl,4);
                    }
                    else {
                      png_grafik = "png1"; //Am Anfang Standard
                      jpg_grafik = "jpg1";
                    }
                    if (sender.id.substr(0,3) == "png") png_grafik = sender.id; else jpg_grafik = sender.id;
                    e.style.backgroundImage = "url(pfad/"+png_grafik+".png), url(pfad/"+jpg_grafik+".jpg)";
                  }

                    
                  Das Auslesen der aktuellen Werte kann wohl entfallen  
                    
                  ~~~html
                  <script>[code lang=javascript]  
                  var png_grafik = "png1"; //Am Anfang Standard  
                  var jpg_grafik = "jpg1";  
                    
                  function aendere(sender) {  
                     e = document.getElementById("vorschau");  
                    
                     if (sender.id.substr(0,3) == "png") png_grafik = sender.id; else jpg_grafik = sender.id;  
                     // Wir schauen nach, ob die ID des Elements, was geklickt wurde mit "png" beginnt  
                     // falls ja, neues png-bild  
                     // sonst, neues jpg-bild (ID des Senders enthält den anzuzeigenden Bildnamen  
                    
                     // geht auch (unwesentlich) kürzer  
                     // (sender.id.substr(0,3) == "png") ? png_grafik = sender.id : jpg_grafik = sender.id;  
                    
                     e.style.backgroundImage = "url(pfad/"+png_grafik+".png), url(pfad/"+jpg_grafik+".jpg)";  
                     // und bauen den Wert der Eigenschaft background-image zusammen  
                     // die png-Grafik überdeckt dabei die jpg-Grafik  
                   }
                  

                  </script>[/code]

                  Matthias

                  --
                  1/z ist kein Blatt Papier.

                  1.   
                    <head>  
                    <script>  
                    function aendere(sender) {  
                       e = document.getElementById("vorschau");  
                       if (e.style.backgroundImage) {  
                         png_grafik = e.style.backgroundImage.substr(zahl,4); //aktuellen Wert merken  
                         jpg_grafik = e.style.backgroundImage.substr(anderezahl,4);  
                       }  
                       else {  
                         png_grafik = "png1"; //Am Anfang Standard  
                         jpg_grafik = "jpg1";  
                       }  
                       if (sender.id.substr(0,3) == "png") png_grafik = sender.id; else jpg_grafik = sender.id;  
                       e.style.backgroundImage = "url(pfad/"+png_grafik+".png), url(pfad/"+jpg_grafik+".jpg)";  
                    }  
                      
                    var png_grafik = "png1"; //Am Anfang Standard  
                    var jpg_grafik = "jpg1";  
                      
                    function aendere(sender) {  
                       e = document.getElementById("vorschau");  
                      
                       if (sender.id.substr(0,3) == "png") png_grafik = sender.id; else jpg_grafik = sender.id;  
                       // Wir schauen nach, ob die ID des Elements, was geklickt wurde mit "png" beginnt  
                       // falls ja, neues png-bild  
                       // sonst, neues jpg-bild (ID des Senders enthält den anzuzeigenden Bildnamen  
                      
                       // geht auch (unwesentlich) kürzer  
                       // (sender.id.substr(0,3) == "png") ? png_grafik = sender.id : jpg_grafik = sender.id;  
                      
                       e.style.backgroundImage = "url(pfad/"+png_grafik+".png), url(pfad/"+jpg_grafik+".jpg)";  
                       // und bauen den Wert der Eigenschaft background-image zusammen  
                       // die png-Grafik überdeckt dabei die jpg-Grafik  
                     }  
                     </script>  
                      
                    <style type="text/css">  
                    <!--  
                    #buttonleiste-jpg {top: 420px; left:300px; position:absolute}  
                    #buttonleiste-png {top: 450px; left:300px; position:absolute}  
                      
                    #vorschau {top: 100px; margin-left:100px; width: 755px; height:300px; position: absolute; background-image: url(+jpg_grafik+lindgruen.jpg), url(+jpg_grafik+silber.jpg), url(+jpg_grafik+silber.jpg), url(+png_grafik+Bild1a.png), url(+png_grafik+Bild2a.png), url(+png_grafik+Bild3a.png);}  
                      
                      
                    //-->  
                    </style>  
                    </head>  
                      
                    <body>  
                      
                    <figure id="vorschau"></figure>  
                      
                    <div id="buttonleiste-jpg">  
                    	<button type="button" onclick="change(this)" id="lindgruen">Button-JPG 1</button>  
                    	<button type="button" onclick="change(this)" id="silber">Button-JPG 2</button>  
                    	<button type="button" onclick="change(this)" id="goldgelb">Button-JPG 3</button>  
                    </div>  
                    <div id="buttonleiste-png">  
                    	<button type="button" onclick="change(this)" id="Bild1a">Button-PNG 1</button>  
                    	<button type="button" onclick="change(this)" id="Bild2a">Button-PNG 2</button>  
                    	<button type="button" onclick="change(this)" id="Bild3a">Button-PNG 3</button>  
                    </div>  
                    </body>  
                    
                    

                    Hallo Matthias,
                    ich danke dir vielmals für deine Unterstützung!

                    Ich habe nun folgendes deinen Hinweisen entnehmen können. Kannst du dir das kurz ansehen?

                    Leider wird an der jeweiligen Stelle nur das erste Bild gezeigt. Wie bekomme ich den Bildwechsel hin? Ist das überhaupt so richtig angelegt? Ich will ja nicht angeben... aber ich bin echt verzweifelt :(

                    Danke,
                    Tommy

                    1. Om nah hoo pez nyeetz, tommyhilfe!

                      Du brauchst nur das Skript aus dem 2. Beitrag.

                      #vorschau {top: 100px; margin-left:100px; width: 755px; height:300px; position: absolute; background-image: url(+jpg_grafik+lindgruen.jpg), url(+jpg_grafik+silber.jpg), url(+jpg_grafik+silber.jpg), url(+png_grafik+Bild1a.png), url(+png_grafik+Bild2a.png), url(+png_grafik+Bild3a.png);}

                      Ich habe nun folgendes deinen Hinweisen entnehmen können. Kannst du dir das kurz ansehen?

                      Die Definition des Hintergrundes ist falsch. Schau dir dazu die bereits verlinkte Quelle an.

                      Leider wird an der jeweiligen Stelle nur das erste Bild gezeigt. Wie bekomme ich den Bildwechsel hin? Ist das überhaupt so richtig angelegt? Ich will ja nicht angeben... aber ich bin echt verzweifelt :(

                      kannst du ein online-Beispiel zeigen? Stimmen die Dateinamen? innerhalb von url muss ein korrekter Pfad stehen.

                      Matthias

                      --
                      1/z ist kein Blatt Papier.

                      1. Ich habe das jetzt nohcmal so angepasst. Das CSS stimmt auch so, habs mir auf deiner Seite nochmal angesehen. Die Bilder sehe ich ja auch in FireBug (Das erste Bild liegt eben ganz oben.

                        Habe ich das richtig verstanden? Ist der Bildname so richtig?
                        Wenn das Bild so heißt: lindgruen.jpg
                        Muss es dann so heißen: +jpg_grafik+lindgruen.jpg

                        Und bei:
                        <button type="button" onclick="change(this)" id="lindgruen">Button-JPG 1</button>

                        Mus  ich nicht bei onclick(this) was reinschreiben? Z.Bsp.: Den Bildnamen oder Bildpfad in ein div?

                        Warum ändert sich beim Klick auf die Buttons nichts? Was mache ich falsch?

                        Vielen Dank & Grüße,
                        Tommy

                          
                          
                        <head>  
                        <script>  
                        var png_grafik = "png1"; //Am Anfang Standard  
                        var jpg_grafik = "jpg1";  
                          
                        function aendere(sender) {  
                           e = document.getElementById("vorschau");  
                          
                           if (sender.id.substr(0,3) == "png") png_grafik = sender.id; else jpg_grafik = sender.id;  
                           // Wir schauen nach, ob die ID des Elements, was geklickt wurde mit "png" beginnt  
                           // falls ja, neues png-bild  
                           // sonst, neues jpg-bild (ID des Senders enthält den anzuzeigenden Bildnamen  
                          
                           // geht auch (unwesentlich) kürzer  
                           // (sender.id.substr(0,3) == "png") ? png_grafik = sender.id : jpg_grafik = sender.id;  
                          
                           e.style.backgroundImage = "url(pfad/"+png_grafik+".png), url(pfad/"+jpg_grafik+".jpg)";  
                           // und bauen den Wert der Eigenschaft background-image zusammen  
                           // die png-Grafik überdeckt dabei die jpg-Grafik  
                         }  
                        </script>  
                        <style type="text/css">  
                        <!--  
                        #buttonleiste-jpg {top: 420px; left:300px; position:absolute}  
                        #buttonleiste-png {top: 450px; left:300px; position:absolute}  
                          
                        #vorschau {  
                        	top: 100px;  
                        	margin-left:100px;  
                        	width: 755px;  
                        	height:300px;  
                        	position: absolute;  
                        	background-image: url(+jpg_grafik+lindgruen.jpg), url(+jpg_grafik+silber.jpg), url(+jpg_grafik+goldgelb.jpg), url(+png_grafik+Bild1a.png), url(+png_grafik+Bild2a.png), url(+png_grafik+Bild3a.png);  
                        	}  
                          
                        //-->  
                        </style>  
                        </head>  
                          
                        <body>  
                          
                        <figure id="vorschau"></figure>  
                          
                        <div id="buttonleiste-jpg">  
                        	<button type="button" onclick="change(this)" id="lindgruen">Button-JPG 1</button>  
                        	<button type="button" onclick="change(this)" id="silber">Button-JPG 2</button>  
                        	<button type="button" onclick="change(this)" id="goldgelb">Button-JPG 3</button>  
                        </div>  
                        <div id="buttonleiste-png">  
                        	<button type="button" onclick="change(this)" id="Bild1a">Button-PNG 1</button>  
                        	<button type="button" onclick="change(this)" id="Bild2a">Button-PNG 2</button>  
                        	<button type="button" onclick="change(this)" id="Bild3a">Button-PNG 3</button>  
                        </div>  
                        </body>  
                          
                        
                        
                        1. Hey Matthias,

                          kannst du mir sagen, wie ich das Script aus meinem ersten Beitrag auf die JPG und PNG Bilder getrennt anwenden kann. Also eigentlich einfach das gleich Script auf zwei getrennte Menüs anwenden kann?

                          So, dass ich dann eine Version für JPGs und eine Version für PNGs habe. Ich würde dann einfach über CSS beide Bilder immer übereinander legen und mit z-index erzeigen, dass die JPGs immer oben liegen.

                          Du meintest ja schon, dass das veraltet ist, ist es aber jetzt nicht unkpmplizierter, bevor ich dich hier noch lange damit aufhalte? :-)

                          Ich danke dir auf jeden Fall schon für diene Mühe, will sie aber auch nicht übertrapazieren :-)

                          Besten Dank,
                          Tommy

                          1. Om nah hoo pez nyeetz, tommyhilfe!

                            kannst du mir sagen, wie ich das Script aus meinem ersten Beitrag auf die JPG und PNG Bilder getrennt anwenden kann. Also eigentlich einfach das gleich Script auf zwei getrennte Menüs anwenden kann?

                            Dafür brauchst du kein JavaScript.

                            Matthias

                            Matthias

                            --
                            1/z ist kein Blatt Papier.

                        2. Om nah hoo pez nyeetz, tommyhilfe!

                          Habe ich das richtig verstanden? Ist der Bildname so richtig?
                          Wenn das Bild so heißt: lindgruen.jpg
                          Muss es dann so heißen: +jpg_grafik+lindgruen.jpg

                          Wenn sich das Bild und die HTML-Datei im selben Ordner befinden, dann im CSS

                          background-image: url(png1.png), url(lindgruen.jpg);

                          Und bei:
                          <button type="button" onclick="change(this)" id="lindgruen">Button-JPG 1</button>

                          Mus  ich nicht bei onclick(this) was reinschreiben? Z.Bsp.: Den Bildnamen oder Bildpfad in ein div?

                          Nein.
                          this ist die Referenz des gerade geklickten Objektes. this ist also "Hey ich bin der button mit der ID sowieso, habe folgende andere Eigenschaften".

                          Damit das Script funktioniert, müssen die png-Bilder mit "png" beginnen, also beispielsweise png1.png oder png-wasweissich.png in der ID muss der Bildname ohne Endung stehen. Die jpg-Bilder entsprechend.

                          Ich bin von Bildern ausgegangen, die png1, png2 usw. heißen, weil es keine Vorgaben gab.

                          Matthias

                          --
                          1/z ist kein Blatt Papier.

  2. [latex]Mae  govannen![/latex]

    if (isDomNN) document.layers[name].visibility="visible";

    [2013] Kinners, ich hab euch schon tausendmal gesagt, daß ihr die Finger von der Zeitmaschine lassen sollt.

    Stur lächeln und winken, Männer!
    Kai

    --
    var jQuery = $(hit);
    I am Pentium of Borg. Division is futile. You will be approximated.
    SelfHTML-Forum-Stylesheet
    1. Om nah hoo pez nyeetz, Kai345!

      [2013] Kinners, ich hab euch schon tausendmal gesagt, daß ihr die Finger von der Zeitmaschine lassen sollt.

      Die Borg sind daran auch schon mal gescheitert.

      Matthias

      --
      1/z ist kein Blatt Papier.