Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Bildwechselfunktion
#1
Hallo Leute,

ich möchte mit Hilfe von javascript einen Bildwechsel erstellen.
Wenn man auf einen Button klickt, dann wird das Bild gegen ein anderes ausgetauscht.
Ich habe sämtliche Tutorials durchgelesen und es funzt bei mir leider nicht.

hier der Script: (den habe ich vor Head eingefügt und dabei <!--###DOKUMENT###--> für Typo3 vor Beginn des Javascripts gesetzt.

<script type="text/javascript">
<!--
var dia = new Array ("fileadmin/img/wortewirrwarr1.png",
"fileadmin/img/wortewirrwarr2.png");

var a=0;
function wechsel() {
window.document.images[1].src=dia[a];
a++;
if(a==2){ a=0; }
}
//-->
</script>

dies hier ist im Body Bereich meines HTML:

<div id="WECHSEL"><img src="fileadmin/img/wortewirrwarr2.png" width="1269" height="926" border="0" alt="testbild"><br>
<input class="qt" type="button" value="Wechsel das Bild" onClick="wechsel()"></div>


Hat vllt jemand eine Idee, warum es nicht funktioniert?

Vielen Dank!

Zitieren
#2
hast du den head-Bereich in deinem TYPO3/Templavoila aktiviert?

Viele Grüße
Grüßle, Nicki

NIMIUS | Agentur für Kommunikation
Webdesign und Webentwicklung aus Staufen im Breisgau
Website | Twitter

TYPO3 Education Committee Member
Neu in TYPO3? Kein Problem! Hier geht's zum TYPO3 Mentoren Programm
Zitieren
#3
Für mich sieht das so aus als ob du dein js auskommentiert hast.
Ich schreibe das js immer in ein // <!CDATA hier zwischen das js // ]]>
Hoffe ich konnte dir helfen.
Zitieren
#4
Habs mal neu - mit jQuery - geschrieben.
Denkweise ist richtig, muss wohl irgendwo n Syntaxfehler drin sein.

window.document.images[] zu nutzen tut ziemlich weh.
Weis doch dem Bild eine Klasse zu und veränder dann src="".

Hier das JSFiddle:
http://jsfiddle.net/w8qBY/2/
Zitieren
#5
vielen Dank,

habe es aber nun mit folgendem js:

var num=0;

imgArray = [
['fileadmin/img/wortewirrwarr1.png','information', ''],
['fileadmin/img/leer.jpg','message','']
]

function slideshow(slide_num) {
document.getElementById('mypic').src=imgArray[slide_num][0];
document.getElementById('mypic').alt=imgArray[slide_num][1];
document.getElementById('burns').innerHTML=imgArray[slide_num][2];
}

function slideshowUp() {
num++;
num = num % imgArray.length;
slideshow(num);
}

function slideshowBack() {
num--;
if (num < 0) {num=imgArray.length-1;}
num = num % imgArray.length;
slideshow(num);
}





und ein wenig HTML-Text gelöst:

<div id="button" value="Wechsel das Bild" onClick="slideshowUp()"></div><!-- End button -->


<div style="text-align: center">
<!-- Place the first image here -->
<img src="fileadmin/img/wortewirrwarr1.png" id="mypic" name="mypic" alt="information" border="0" width="1269" height="926">
<br>
<!-- Place the text for the first image here -->

<p>
</div>
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste