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

Beitrag lesen

  
<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