• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

on click javascript bildwechsel

H

hansdampf

Neues Mitglied
hallo ihr lieben.


brauch für meine website unbedingt einen bildwechsel von 6 bildern in folge.

sieht momentan wiefolgt aus:

<html>
<head><title>titel</title>
</head>
<body>

<script type="text/javascript">
<!--
if (document.images) {
bild1 = new Image();
bild1.src = "bild1.png";
bild2 = new Image();
bild2.src = "bild2.png";
bild3 = new Image();
bild3.src = "bild3.png";
bild4 = new Image();
bild4.src = "bild4.png";
bild5 = new Image();
bild5.src = "bild5.png";
bild6 = new Image();
bild6.src = "bild6.png";
}
var img = 0;
function changeImage(){
self.document.testbild.src = (img? bild1.src : bild2.src : bild3.src : bild4.src : bild5.src : bild6.src);
img ^= 1;
}
// -->
</script>



<center>
<table border="3">
<tr>
<th><a onclick="if (document.images) changeImage()"><img border="0" src="bild1.png" name="testbild"></a></th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</table>
</center>



</body>
</html>
Zum Vergrößern anklicken....

funktioniert leider soweit nicht.

ich möchte eine tabelle erstellen welche 12 kästchen hat, in jedem der kästchen soll später ein bildwechsel stattfinden.

das heißt in 12 kästchen jeweils 6 verschiedene bilder..... wie haut das hin?

danke schonmal
 
Werbung:
Verstehe ich das richtig? Wenn Du auf ein Kästchen in der Tabelle klickst, soll dort der Bildwechsel stattfinden?
 
Code: 
var img = 0;

function changeImage()
{
    self.document.testbild.src = (img? bild1.src : bild2.src : bild3.src : bild4.src : bild5.src : bild6.src);
    img ^= 1;
}

Wer denkt sich denn sowas aus? Puh.
 
Werbung:
Hallo Mermshaus und frohe Weihnachten!
Wer denkt sich denn sowas aus? Puh.
Zum Vergrößern anklicken....
Kann ich nur unterstreichen. Bist Du so lieb und erklärst mal, wie dieser Konstrukt mit den vielen Doppelpunkten funktioniert?
Danke und Grüße - Ulrich
 
Bin zwar nicht mermshaus aber wenn es dich nicht stört, erklär ich dir das:

Man nennt das Konditionalabfrage und ist eine Kurzform der If-Else Abfrage. Das heisst eine Bedingung(Möglichkeit) muss zutreffen

PHP: 
if (Bedingung wahr){tue was}
else {sonst, wenn nicht wahr, tue was hier steht}

In der Kurzschreibweise sieht das so aus:

(Bedingung) ? true : false;

Wir sehen also einen Doppelpunkt zur Unterscheidung zwischen den beiden Zuständen wahr oder falsch.

Da es Halbwahrheiten, anders als im richtigen Leben, in der Informatik nicht gibt, ist das obige Konstrukt für´n Eimer.

Gleiches(für´n Eimer ist hier gemeint) gilt für die dargestellte Tabelle. Das was dort als Tabellenzellen Verwendung findet sind Table Header, th, somit Tabellenüberschriften.
Tabellenzellen sind Table Data, td.
Die Reihen einer Tabelle sind die Table Raw, tr,

Wer bringt einem so einen Mist bei.

Ausser Klassen oder eine ID im Form-Element haben andere Attribute nichts in den Tabellenelementen verloren. Der Rest gehört ins CSS.
Wie eine Tabelle aussehen muss steht hier: Tabellen HTML Grundgerüst - Erklärung table border caption thead th tr td

Javascript-Beispiel für Bilderwechsel ist hier erklärt: JavaScript: 7.5.1 Automatisierter Bildwechsel
 
Hallo Wustersoss,
die Kurzschreibweise von einem if-Statement ist mir wohlbekannt. Im Beispiel oben sind jedoch mehr als zwei Alternativen durch Doppelpunkt getrennt. Gibt es hier etwa eine analoge Kurzschreibweise für einen Switch?
Viele Grüße - Ulrich
Edit: Ich hatte den Beitrag von Mermshaus so verstanden, dass er den Code des Threadopeners korrigiert hat. Wahrscheinlich hält er ihn aber ebenfalls für fehlerhaft.
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Sorry wegen des missverständlichen Posts.

Sagen wir mal so: Ich habe sowas noch nie gesehen und es ist vermutlich (Fehlermeldung in Firefox, NetBeans, …) schon syntaktisch falsch.

Oder anders gesagt:

Wustersoss schrieb:
Da es Halbwahrheiten, anders als im richtigen Leben, in der Informatik nicht gibt, ist das obige Konstrukt für´n Eimer.
Zum Vergrößern anklicken....

img ^= 1; „switcht“ das letzte Bit von img (XOR), was in diesem Fall einfach den Variablenwert zwischen 0 und 1 hin und her springen lässt.

Ich nehme an, da wurde einfach ein bestehender Code, der zwischen zwei Bildern durchwechselt, „erweitert“.

Edit: Der Ansatz wäre aber auch für zwei Bilder sehr sehr extravagant, wenn ihr mich fragt.

- http://de.wikipedia.org/wiki/KISS-Prinzip
 
Zuletzt bearbeitet:
So jetzt nochmal zum bildwechsel:

<html>
<head><title>Test</title>
</head>
<body>
<img name="BILD" id="BILD" src="commando.png" onClick="change()">

<script type='text/javascript'>
<!--
var i=0;
function change()
{
if(i==0)
{
document.getElementById('BILD').src="commando.png";
i++;
} else {
document.getElementById('BILD').src="engineer.png";
i--;
}
}

//-->
</script>

</body>
</html>
Zum Vergrößern anklicken....


Funktioniert nun super, mein problem ist, ich möchte das ja auf 6 bilder erweitern.
des weiteren soll man ab bild 6 mit der rechten maustaste wieder alle bilder rückwärts abfahren bis zu bild 1...
 
Werbung:
Wenn ich mir das mit den 12 Tabellenzellen durchlese, würde ich dir empfehlen, die Bilder als mehrdimensionales Array aufzubauen, siehe hier:
SELFHTML: JavaScript / Objektreferenz / Array
Also so:
Code: 
var a = new Array(12);
for (var i = 0; i < a.length; ++i)   a[i] = new Array(6);
a[0][0] = new Image();
a[0][0].src = "bild0_0.png";
a[0][1] = new Image();
a[0][1].src = "bild0_1.png";
// usw bis 
a[11][5] = new Image();
a[11][5].src = "bild11_5.png";
Und dann im Javascript:
Code: 
<script type='text/javascript'>
<!--
var j = new Array (0, 0, 0, 0, 0, 0, 0 ,0 ,0 ,0 ,0 ,0);
function change(obj, idx)
{
  j[idx]++;
  if (j[idx] == 6) j[idx] = 0;
  obj.src = a[idx][j[idx]].src
}
 //-->
</script>
Und im img-Tag:
HTML: 
<img name="BILD" id="BILD" src="commando.png" onClick="change(this, 0)">
wobei Du als Index den Index der Tabellenzelle übergeben musst. Das mit der rechten Maustaste würde ich nicht empfehlen, weil diese für das Kontesmenü reserviert ist.
Probiers mal so.
Viel Erfolg und viele Grüße - Ulrich
 
Zuletzt bearbeitet von einem Moderator:
Hallo, Ulrich danke für die schnelle antwort.


Bin mir nich etwas unsicher wie das mit den Arrays funktioniert,

Code: 
var a = new Array(12);


Ein Array mit 12 Elementen, wie ich sie logischerweiße für meine Tabelle brauche.

Code: 
for (var i = 0; i < a.length; ++i)   a[i] = new Array(6);


Hier wird dann einerseits für jedes dieser Elemente eine neues Array erstellt und zusätzlich 6 leere Elemente pro Array? Sprich meine Bilder


ich hab dann im endeffekt 12 Arrays mit je 6 freien plätzen für die bilder..


was ich aber jetzt nicht verstehe ist folgendes:

Code: 
<script type='text/javascript'>
<!--
var j = new Array (0, 0, 0, 0, 0, 0, 0 ,0 ,0 ,0 ,0 ,0);
function change(obj, idx)
{
  j[idx]++;
  if (j[idx] == 6) j[idx] = 0;
  obj.src = a[idx][j[idx]].src
}
 //-->
</script>

ich sehe zwar das du in den array den wert 0 12 x reinschreibst, aber wie soll das dann funktionieren?
muss ich dann 12x 6 variablen erstellen um mit jeder ein anderes bild abzurufen .. oO

auch die umsetzung in die bilder ist mir noch schleierhaft.


a[0][0] = image??

Muss ich überall img src eintragen? oder wie haut das hin..



Danke schonmal!
 
a[0][0] = image??
Muss ich überall img src eintragen? oder wie haut das hin..
Zum Vergrößern anklicken....
Jedes Element in diesem zweidimensionalen Array kann als Variable aufgefasst werden, die nur anders adressiert wird. D. h. was Du mit
Code: 
bild1 = new Image();
bild1.src = "bild1.png";
für die einzelne Variable bild1 gemacht hast, habe ich genau analog für ein Feldelement hingeschrieben
Code: 
a[0][0] = new Image();
a[0][0].src = "bild0_0.png";
Wenn Du 12 Tabellenzellen mit je 6 Bildern hast, brauchst Du insgesamt 72 Bilder. Entsprechend musst Du auch 72 Feldelemente anlegen.

Ich habe dich so verstanden, dass das Weiterschalten der Bilder jeweils für eine Tabellenzelle funktionieren soll, d. h. wenn Du in Tabellenzelle 6 klickst, soll dort das Bild geändert werden und sonst nirgends. Deshalb habe ich die Variable j ebenfall als Array angelegt. Diese gibt den Index des Bildes an, das in der betr. Tabellenzelle angezeigt werden soll. Weil es 12 Tabellenzellen geben soll, brauche ich diesen Index 12 mal. Demgegenüber gibt idx den Index der Tabellenzelle an. Im Array a adressiert der erste Index die Tabellenzelle und der zweite das Bild in dieser Zelle.

Mit
Code: 
obj.src = a[idx][j[idx]].src
weist man dann dem Img-Objekt die Adresse des Bildes für die Tabellenzelle idx mit dem Bildindex j[idx] zu.

Versuch mal, ob Du mit diesen Erklärungen den Code verstehst.
 
Werbung:
Hallo,

hab das jetzt mal wiefolgt alles eingetragen und nur mal Array 0 (1) fertig mit Bildern belegt.

Wie mache ich die umsetzung in die bilder?
Ich muss doch irgendwie sagen, bei klick change zum nächsten bild.

das man das mit
Code: 
<img name="BILD" id="BILD" src="bild.png" onClick="change(this, 0)">

macht ist mir schon irgendwie klar, aber wie funktioniert das genau?

was hat es mit den

Code: 
var j = new Array (0, 0, 0, 0, 0, 0, 0 ,0 ,0 ,0 ,0 ,0);
vielen nullen aufsich.



hier nochmal alles, hoffe es ist so richtig eingetragen.

Code: 
<html>
<head><title>Test</title>
</head>
<body>



<script type='text/javascript'>
<!--
var j = new Array (0, 0, 0, 0, 0, 0, 0 ,0 ,0 ,0 ,0 ,0);
function change(obj, idx)
{
  j[idx]++;
  if (j[idx] == 6) j[idx] = 0;
  obj.src = a[idx][j[idx]].src
}
 //-->


var a = new Array(12);
for (var i = 0; i < a.length; ++i)   a[i] = new Array(6);
a[0][0] = new Image();
a[0][0].src = "bild0_0.png";
a[0][1] = new Image();
a[0][1].src = "bild0_1.png";
a[0][2] = new Image();
a[0][2].src = "bild0_2.png";
a[0][3] = new Image();
a[0][3].src = "bild0_3.png";
a[0][4] = new Image();
a[0][4].src = "bild0_4.png";
a[0][5] = new Image();
a[0][5].src = "bild0_5.png";

</script>

<center>
<table border="1">
<tr>
<td><img name="BILD" id="BILD" src="bild.png" onClick="change(this, 0)"></td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</center>





</body>


</html>
 
Ich muss doch irgendwie sagen, bei klick change zum nächsten bild.
Zum Vergrößern anklicken....
Das passiert hier:
Code: 
j[idx]++;
Die Variable j[idx] gibt an, welches Bild jeweils angezeigt wird. Erhöht man diese Variable, schaltet man zum nächsten Bild weiter.
Was hat es mit den vielen Nullen auf sich?
Zum Vergrößern anklicken....
Da die Variable j[idx] angibt, welches Bild jeweils angezeigt wird, muss sie außerhalb der Funktion change definiert werden. 0 bedeutet, dass das 1. Bild einer Tabellenzelle angezeigt wird. Du könntest auch jeden anderen Wert zwischen 0 und 5 nehmen. Es muss nur ein gültiger Feldindex sein.
hier nochmal alles, hoffe es ist so richtig eingetragen.
Zum Vergrößern anklicken....
Sieht doch gut aus. Funktioniert denn der Bildwechsel? Wenn nicht, lade es mal hoch und poste die URL, damit man es sich ansehen kann.
 
Ah, jop funktioniert schonmal.

Nun möchte ich aber das er nachdem er bei Bild 6 angekommen ist nicht mehr von vorne anfängt, sondern das ganze soll mit wieder rückwärts runtergeklickt werden können zu bild 1...

Edit: Wie muss ich diese zeile verändern um nicht mehr bilder des array 0 sondern array 1 abzurufen?
Code: 
<img name="BILD" id="BILD" src="bild0_0.png" onClick="change(this, 0)">

Danke!
 
Zuletzt bearbeitet:
Werbung:
Die 0 in dem Aufruf von change() ist der Index der Tabellenzelle. Das heißt, Du müsstes diese in eine 1 ändern.
 
das ganze soll mit wieder rückwärts runtergeklickt werden
Zum Vergrößern anklicken....
Code: 
<script type='text/javascript'> <!--
var j = new Array (0, 0, 0, 0, 0, 0, 0 ,0 ,0 ,0 ,0 ,0);
var up = new Array (true, true, true, true, true, true, true, true, true, true, true, true);
function change(obj, idx) {
  if (up[idx])
  {
    if (j[idx] < 5)
    {
      j[idx]++;
    }
    else     
    {
      j[idx] = 4;
      up[idx] = false;
    }
  }
  else
  {  // up = false, also down
    if (j[idx] > 0)
    {
          j[idx]--;
    }
    else
    {
      j[idx] = 1;
      up[idx] = true;
    }
  }
obj.src = a[idx][j[idx]].src }  //--> </script>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben