Was muss in diesem Script noch gemacht werden?

E

exhubiranta

Mitglied
Hallo,

ich durfte dieses Script zum Wechseln der Bilder bei Mausklick auf einer Seite verwenden (mit Linkangabe). Ich brauche die Funktion des Scripts aber nicht nur einmal, sondern mehrmals auf einer Seite.

Habe alle Bilder umbenannt und habe gehofft, dass es funktioniert. Dennoch wechseln die Bilder nicht im dazugehörigen Rahmen, sondern jeweils im anderen. Anbei zum Ausprobieren die gifs in einem zip. Die oberen Bilder sind dunkel, die Unteren hell. Bild06 ist etwas verwaschen. Habe die Zugehörigkeit der Bilder nochmals überprüft, es stimmt.

Was fehlt? Hat es mit diesem void(0) zu tun? Weiß aber zuwenig darüber, was das bedeutet.

Wäre dankbar für Hinweise.

Viele Grüße
exi

Code: 
<html>

	<head><!-- http://www.web-toolbox.net -->


<script type="text/javascript" language="JavaScript">
<!-- Begin
// Bilder bekannt machen
var bild1 = new Image();
var bild2 = new Image();
var bild3 = new Image();
var bild4 = new Image();
var bild5 = new Image();
var bild6 = new Image();

bild1.src = "bild-gross01.gif";
bild2.src = "bild-gross02.gif";
bild3.src = "bild-gross03.gif";
bild4.src = "bild-gross04.gif";
bild5.src = "bild-gross05.gif";
bild6.src = "bild-gross06.gif";

function Zeigen(Bildname)
{
eval("document['pictureA'].src = " + Bildname + ".src");
}
//  End -->
<!-- Begin
// Bilder bekannt machen
var bild7 = new Image();
var bild8 = new Image();
var bild9 = new Image();
var bild10 = new Image();
var bild11 = new Image();
var bild12 = new Image();

bild7.src = "bild-gross07.gif";
bild8.src = "bild-gross08.gif";
bild9.src = "bild-gross09.gif";
bild10.src = "bild-gross10.gif";
bild11.src = "bild-gross11.gif";
bild12.src = "bild-gross12.gif";

function Zeigen(Bildname)
{
eval("document['pictureB'].src = " + Bildname + ".src");
}

</script>


	</head>

	<body bgcolor="#ffffff">
		<table bgcolor="#7f7f7f" border="0" cellpadding="10" cellspacing="0">
<tbody><tr>
<td>
<img name="pictureA" src="bild-gross01.gif" width="250" border="1" height="250"><br></td>
<td>
<a href="javascript:void(0)" onclick="Zeigen('bild1')"><img src="bild-klein01.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('bild2')"><img src="bild-klein02.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('bild3')"><img src="bild-klein03.gif" alt="" width="60" border="1" height="60"></a><br>
</td>
<td>
<a href="javascript:void(0)" onclick="Zeigen('bild4')"><img src="bild-klein04.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('bild5')"><img src="bild-klein05.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('bild6')"><img src="bild-klein06.gif" alt="" width="60" border="1" height="60"></a><br>
</td>


</tr></tbody></table>
		<br>
		<table bgcolor="#7f7f7f" border="0" cellpadding="10" cellspacing="0">
<tbody><tr>
<td>
<img name="pictureB" src="bild-gross07.gif" width="250" border="1" height="250"><br></td>
<td>
<a href="javascript:void(0)" onclick="Zeigen('bild7')"><img src="bild-klein07.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('bild8')"><img src="bild-klein08.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('bild9')"><img src="bild-klein09.gif" alt="" width="60" border="1" height="60"></a><br>
</td>
<td>
<a href="javascript:void(0)" onclick="Zeigen('bild10')"><img src="bild-klein10.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('bild11')"><img src="bild-klein11.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('bild12')"><img src="bild-klein12.gif" alt="" width="60" border="1" height="60"></a><br>
</td>


</tr></tbody></table>
	</body>

</html>
 

Anhänge

Hallo,

eigentlich musst du nur die Funktion Zeigen ändern, da du Sie weiter unten einfach überschreibst (gleicher Name). Und dann halt beim aufrufen (onClick), jeweils den richtigen Namen der Funktion.

Besser wäre es das in einer einzigen Funktion ablaufen zu lassen, da du sonst für jedes weitere Mal eine neue Funktion schreiben müsstest.

Mit freundlichen Grüßen

Basti


HTML: 
<html>

  <head><!-- http://www.web-toolbox.net -->


<script type="text/javascript" language="JavaScript">
<!-- Begin
// Bilder bekannt machen
var bild1 = new Image();
var bild2 = new Image();
var bild3 = new Image();
var bild4 = new Image();
var bild5 = new Image();
var bild6 = new Image();

bild1.src = "bild-gross01.gif";
bild2.src = "bild-gross02.gif";
bild3.src = "bild-gross03.gif";
bild4.src = "bild-gross04.gif";
bild5.src = "bild-gross05.gif";
bild6.src = "bild-gross06.gif";

function ZeigenA(Bildname)
{
eval("document['pictureA'].src = " + Bildname + ".src");
}
//  End -->
<!-- Begin
// Bilder bekannt machen
var bild7 = new Image();
var bild8 = new Image();
var bild9 = new Image();
var bild10 = new Image();
var bild11 = new Image();
var bild12 = new Image();

bild7.src = "bild-gross07.gif";
bild8.src = "bild-gross08.gif";
bild9.src = "bild-gross09.gif";
bild10.src = "bild-gross10.gif";
bild11.src = "bild-gross11.gif";
bild12.src = "bild-gross12.gif";

function ZeigenB(Bildname)
{
eval("document['pictureB'].src = " + Bildname + ".src");
}

</script>


  </head>

  <body bgcolor="#ffffff">
    <table bgcolor="#7f7f7f" border="0" cellpadding="10" cellspacing="0">
<tbody><tr>
<td>
<img name="pictureA" src="bild-gross01.gif" width="250" border="1" height="250"><br></td>
<td>
<a href="javascript:void(0)" onclick="ZeigenA('bild1')"><img src="bild-klein01.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="ZeigenA('bild2')"><img src="bild-klein02.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="ZeigenA('bild3')"><img src="bild-klein03.gif" alt="" width="60" border="1" height="60"></a><br>
</td>
<td>
<a href="javascript:void(0)" onclick="ZeigenA('bild4')"><img src="bild-klein04.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="ZeigenA('bild5')"><img src="bild-klein05.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="ZeigenA('bild6')"><img src="bild-klein06.gif" alt="" width="60" border="1" height="60"></a><br>
</td>


</tr></tbody></table>
    <br>
    <table bgcolor="#7f7f7f" border="0" cellpadding="10" cellspacing="0">
<tbody><tr>
<td>
<img name="pictureB" src="bild-gross07.gif" width="250" border="1" height="250"><br></td>
<td>
<a href="javascript:void(0)" onclick="ZeigenB('bild7')"><img src="bild-klein07.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="ZeigenB('bild8')"><img src="bild-klein08.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="ZeigenB('bild9')"><img src="bild-klein09.gif" alt="" width="60" border="1" height="60"></a><br>
</td>
<td>
<a href="javascript:void(0)" onclick="ZeigenB('bild10')"><img src="bild-klein10.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="ZeigenB('bild11')"><img src="bild-klein11.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="ZeigenB('bild12')"><img src="bild-klein12.gif" alt="" width="60" border="1" height="60"></a><br>
</td>


</tr></tbody></table>
  </body>

</html>
 
Hallo Sven und McPepper und andere,

Hilfe nochmal bitte. Mir ist eingefallen, dass ich auch noch zu jedem Bild einen anderen Text auftauchen lassen muss.

Obwohl es ja schon genügend Vorgaben gibt, bin ich wieder ratlos, ich kenne mich zu wenig aus.

Hier der vorbereitete Code, nur mal mit "Bockspringen". Unter jedes Bild soll hier ein anderer Text.

HTML: 
<html>

  <head><!-- http://www.web-toolbox.net -->


<script type="text/javascript" language="JavaScript">
<!-- Begin
// Bilder bekannt machen
var bild1 = new Image();
var bild2 = new Image();
var bild3 = new Image();
var bild4 = new Image();
var bild5 = new Image();
var bild6 = new Image();

bild1.src = "bild-gross01.gif";
bild2.src = "bild-gross02.gif";
bild3.src = "bild-gross03.gif";
bild4.src = "bild-gross04.gif";
bild5.src = "bild-gross05.gif";
bild6.src = "bild-gross06.gif";


var bild7 = new Image();
var bild8 = new Image();
var bild9 = new Image();
var bild10 = new Image();
var bild11 = new Image();
var bild12 = new Image();

bild7.src = "bild-gross07.gif";
bild8.src = "bild-gross08.gif";
bild9.src = "bild-gross09.gif";
bild10.src = "bild-gross10.gif";
bild11.src = "bild-gross11.gif";
bild12.src = "bild-gross12.gif";

function Zeigen(o,i)
{
  document.images[o].src=i.src;
}

</script>


  </head>

  <body bgcolor="#ffffff">
    <table bgcolor="#7f7f7f" border="0" cellpadding="10" cellspacing="0">
<tbody>
				<tr>
<td>
<img name="picture1" src="bild-gross01.gif" width="250" border="1" height="250"><br></td>
<td>
<a href="javascript:void(0)" onclick="Zeigen('picture1',bild1)"><img src="bild-klein01.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('picture1',bild2)"><img src="bild-klein02.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('picture1',bild3)"><img src="bild-klein03.gif" alt="" width="60" border="1" height="60"></a><br>
</td>
<td>
<a href="javascript:void(0)" onclick="Zeigen('picture1',bild4)"><img src="bild-klein04.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('picture1',bild5)"><img src="bild-klein05.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('picture1',bild6)"><img src="bild-klein06.gif" alt="" width="60" border="1" height="60"></a><br>
</td>


</tr>
				<tr>
					<td colspan="3" bgcolor="#dcdcdc">Bockspringen dunkel</td>
				</tr>
			</tbody></table>
    <br>
    <table bgcolor="#7f7f7f" border="0" cellpadding="10" cellspacing="0">
<tbody>
				<tr>
<td>
<img name="picture2" src="bild-gross07.gif" width="250" border="1" height="250"><br></td>
<td>
<a href="javascript:void(0)" onclick="Zeigen('picture2',bild7)"><img src="bild-klein07.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('picture2',bild8)"><img src="bild-klein08.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('picture2',bild9)"><img src="bild-klein09.gif" alt="" width="60" border="1" height="60"></a><br>
</td>
<td>
<a href="javascript:void(0)" onclick="Zeigen('picture2',bild10)"><img src="bild-klein10.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('picture2',bild11)"><img src="bild-klein11.gif" alt="" width="60" border="1" height="60"></a><br><br>
<a href="javascript:void(0)" onclick="Zeigen('picture2',bild12)"><img src="bild-klein12.gif" alt="" width="60" border="1" height="60"></a><br>
</td>


</tr>
				<tr>
					<td bgcolor="#dcdcdc" colspan="3">Bockspringen hell</td>
				</tr>
			</tbody></table>
  </body>

</html>

Ach ja, der Text sollte diese Form haben - Beispiel:

Schöne Sportart: [br]
[Leerzeile]
Bockspringen für helle Gemüter, bla bla...

Hübsche Sportart: [br]
[Leerzeile]
Bockspringen für dunkle Charaktere, bla bla...
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück