chatliner: Bildaustausch via javascript

SELF-Forum

Bildaustausch via javascript

chatliner
– Informationen zu den Bewertungsregeln

Hallo Community,

leider bin ich ein absoluter Noob was js anbelangt und würde gerne folgendes verwirklichen.

mittels einer Tabelle, welche im oberen Bereich ein größeres Bild anzeigt (zb. 320*200) und im unteren Bereich die weiteren Bilder als Thumbs angezeigt werden, soll nach klicks auf die thumbs das Bild oben ausgetauscht und resized werden.

Nun ist mir die Formatierung der Tabelle klar, auch das ich dem oberen Tabellen bereich eine id geben muss. nur hab ich keine ahnung wie ich nun auf den Thumbsklick die Bilder austausche. Schön wäre es auch, wenn die Bilder beim übergang vlt einen Fader haben. is aber nicht vorraussetzung.

Vielen Dank erstmal wenn ihr mir da weiterhelfen könntet.

Das zweite Problem das ich habe, ist das diese Webseite ein Joobla CMS ist.
Ich habe schon versucht ein bestehendes js da einzubinden, leider übernimmt mir die Webseite bzw das Administrationstool nicht den Quelltext.

Vlt. hat hier einer auch ne Idee auf welcher Quelltextseite ich das einfügen kann. Arbeite mit Kategorien-Blogs.

Vielen vielen Dank für Eure Hilfe

chatliner

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bildaustausch via javascript

    JürgenB Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo chatliner,

    Bildertausch:
    http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id
    http://de.selfhtml.org/javascript/objekte/images.htm
    http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick

    die Idee ist: mit getElementById erhältst du Zugriff auf das große Bild und kannst darüber sein src-Attribut ändern. Den kleinen Bildern gibst du einen Eventhandler für "onclick", in dem das große Bild geändert wird:

    <img src="klein.jpg" onclick="document.getElementById('gross').src='gross.jpg'"> (ungetestet)
    oder, damit es auch ohne Javasript funktioniert:
    <a href="gross.jpg" onclick="document.getElementById('gross').src='gross.jpg';return false"><img src="klein.jpg"></a> (auch ungetestet)

    Das "return false" bewirkt, das das Linkziel bei funktionierendem Javascript nicht angesprungen wird.

    Besser wäre es natürlich, das Script in den Seitenkopf zu legen oder auszulagern und die Eventhandler per Javascript zu setzen.

    Fader:
    https://forum.selfhtml.org/?t=176360&m=1160111

    Das zweite Problem das ich habe, ist das diese Webseite ein Joobla CMS ist.

    Da habe ich keine Ahnung.

    Gruß, Jürgen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bildaustausch via javascript

      chatliner
      – Informationen zu den Bewertungsregeln

      Hallo chatliner ....

      Vielen Dank Jürgen, werde das heute Abend gleich mal ausprobieren !

      Gruß chatliner

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln