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>