Bild wechseln mit onClick klappt nicht

Donnergott

Grünschnabel
Hallo,
ich versuche grad mit einem Klick auf ein vohandenes Thumbnail die angezeigte Grafik zu verändern. Leider klappt es nicht so wie es soll.

Code:
  <script>
  <!--
  ansicht[0] = new Image; 
  ansicht[0].src = "tmp/_pic1_large.jpg;
  ansicht[1] = new Image; 
  ansicht[1].src = "tmp/_pic2_large.jpg;
  ansicht[2] = new Image; 
  ansicht[2].src = "tmp/_pic3_large.jpg;
  ansicht[3] = new Image; 
  ansicht[3].src = "tmp/_pic4_large.jpg;
  ansicht[4] = new Image; 
  ansicht[4].src = "tmp/_pic5_large.jpg;
  
  function changeImage(Bild){
  	document.test.src = ansicht[Bild].src;
  }
  
  //-->
  </script>
  
  
  <table><tr>
 <td rowspan="2" width="400"><img src="tmp/_pic1_large.jpg" name="test"></td><td width="100" height="150" valign="bottom"><img src="tmp/_pic1_small.jpg" onClick="changeImage(0)"></td><td width="100" valign="bottom"><img src="tmp/_pic2_small.jpg" onClick="changeImage(1)"></td><td rowspan="2" width="100"><img src="tmp/_pic5_small.jpg" onClick="changeImage(4)"></td></tr>
 <tr><td width="100" valign="top"><img src="tmp/_pic3_small.jpg" onClick="changeImage(2)"></td><td width="100" valign="top"><img src="tmp/_pic4_small.jpg" onClick="changeImage(3)"></td>
  </tr></table>

Die onClick Funktion wird zwar aufgerufen, aber sonst tut sich nichts. Wie es scheint hat das ansicht Array keinen Inhalt. Vielleicht kann mir ja jemand einen Tipp geben damit ich den Fehler finde.
 
  1. Bevor du einen Array mit Inhalt füllst, musst du ihn erst einmal erzeugen...
    ansicht = new Array()
  2. bei den ganzen Zuweisungen von "src" fehlt am Ende ein Anführungszeichen
  3. ein neues Image-Objekt erzeugt man per
    new Image()
 
Kann ich das ganze auch so machen, das wenn ich auf das Bild klicke, dasselbe Bild geänder wird? Dann muss der Name ja Variabel sein. Kann ich das mit getElementByName machen? Habe es mal so

Code:
expand = new Image();
expand.src = '/victorya/victorya.nsf/expand.gif?OpenImageResource';
collapse = new Image();
collapse.src = '/victorya/victorya.nsf/collapse.gif?OpenImageResource';
function doClick(name) {
	document.getElementByName('a' + name).src = collapse.src;
}

Also einfach document.a1.src = collapse.src, das funktioniert. Aber mit dem getElementByName nicht..

MFG
redX

PS:
Ihr seit einfach toll! Ein fettes dankeschön an alle! Ihr habt mir schon oft geholfen :offtopic:
 
getElementByName() gibt es nicht.... es heisst getElementsByName()

Bei dieser Art sprichst du einen Array an, der alle Elemente mit dem betreffenden Namen enthält, du musst dabei also zusätzlich den Index des betreffenden Elementes im Array angeben.
Wenn es nur ein Element mit dem Namen gibt, kannst du es immer per
Code:
document.getElementsByName('a' + name)[0]
...ansprechen....andernfalls musst du durchzählen, um das wievielte es geht.

Wenn du das auslösende Element ansprechen willst, kannst du dir das alles auch sparen.
Mit dem Schlüsselwort this übergibst du das Element als Objekt:
Code:
<script type="text/javascript">
<!--
function doClick(obj) {
	obj.src = collapse.src;
}
//-->
</script>

<img onclick="doClick(this)">
...oder noch einfacher:
Code:
<img onclick="this.src = collapse.src">
 
Wenn ihr schon dabei seid:

Gibt es eine Möglichkeit, dass sich das Bild bereits beim "Rüberfahren" ändert?
 
Vielen Dank! Werde es gleich mal einrichten. Ich mache aber die Version mit der Funktion da da noch mehr reingepept wird ;)

Würde das Thema ja gerne als erledigt setzen wenn ich die Berechtigung hätte ;)

MFG
redX
 
Jetzt funktioniert was nicht.. Im Anhang ist das File mal dabei samt Bilder und CSS.

Sieht ja so aus wie das Dateisystem von Windows. Jetzt wenn ich auf der obersten Stufe auf das - klicke verschwinden die unterpackate und das vorne wird zu einem + (bei mir auf dem rechner ist nur ein Rahmen, kein + zu sehen. Auf dem Server laufts aber). Wenn man aber bei den Unterpacketen auf das - klickt klappt es auch zusammen, aber das - wird nicht zu einem +. Ich habe es eben mit einem Imagemap gemacht. Weiss jemand wieso das es nicht geht?

MFG
redX

Edit:
Fehler gefunden. Imagemap hatte den gleichen Namen wie das Bild, welches ich ändern wollte. Das gab wohl nen Konflikt *sich hau*
 

Anhänge

  • showWorkpackage.zip
    7,8 KB · Aufrufe: 22
Zuletzt bearbeitet:
Zurück