Wie man Bilder in JavaScript erscheinen lässt

Question

Ich bin nicht sehr fließend in JavaScript, und ich habe das Gefühl, dass dies wirklich grundlegend ist, aber ich kann es online nirgendwo finden.

Ich möchte einen Link erstellen, der eine JavaScript-Funktion auslöst, die ein Bild in einem separaten div erscheinen lässt. Es darf nicht in Flash sein, ansonsten habe ich keinen Einwand gegen die Programmiersprache.

Ich habe mehrere Bilder, daher denke ich, dass der beste Weg, dies zu tun, darin besteht, sie alle übereinander zu schichten und dann jedes Mal den z-Index zu erhöhen, wenn ihr Link angeklickt wird, aber vielleicht haben Sie eine bessere Idee.

Ich möchte wirklich nur eine Art primitiver Bildergalerie erstellen, die kein Flash verwendet und das Foto in seinem div anzeigt, wenn der entsprechende Link angeklickt wird.

Vielen Dank im Voraus, Alex

Answer 1

Wie Jessegavin gesagt hat (hier gefunden hier)

Sie könnten die Javascript DOM API nutzen. Inbesondere schauen Sie sich die Methode createElement() an.

Sie könnten eine wiederverwendbare Funktion erstellen, die ein Bild erstellt wie folgt...

function show_image(src, width, height, alt) {
  var img = document.createElement("img");
  img.src = src;
  img.width = width;
  img.height = height;
  img.alt = alt;

  // Diese nächste Zeile fügt es einfach an das  tag
  document.body.appendChild(img); 
}

Dann könnten Sie es so verwenden...

Google Logo hinzufügen 

Es sollte kein Zeilenumbruch darüber sein, den habe ich hinzugefügt, damit es angezeigt werden kann ohne zu scrollen. Siehe ein funktionierendes Beispiel auf jsFiddle: http://jsfiddle.net/Bc6Et/

Dies sollte Ihre Frage beantworten

Answer 2

Es gibt eine Menge JavaScript-Bibliotheken, Plugins (für jQuery) und andere Möglichkeiten, dieses Problem zu lösen.

Das Erste, was ich tun würde, ist eine Website wie diese zu durchsuchen, um zu sehen, was verfügbar ist: http://sixrevisions.com/javascript/free_javascript_image_galleries/

Ich habe diese hier schon einmal benutzt, und sie ist ziemlich einfach: http://lokeshdhakar.com/projects/lightbox2/

Im Allgemeinen können Sie jedoch einfach [Link](javascript: showImage()) machen und wenn Sie darauf klicken, wird die JavaScript-Funktion showImage() aufgerufen, die Sie irgendwo definieren. Dann funktioniert das Schichten der Divs, wie Sie es beschrieben haben.