CODEWITHSUNDEEP
javascript
user2594509
user2594509

Reputation: 11

change text and image on page load

I added a quote to my site and I want the quote to change each time. This works. But now I also want to add a picture that changes with the text. (it always has to be the same picture with the same text).

How can I do this?

My code:

<script type=text/javascript> 
var delay="10"; //how many seconds you wnat the delay to be
var count='0';
var Texts=new Array();
Texts[0]="Je voelt je hier geen nummer, maar eerder een kleine schakel binnen een groot bedrijf";
Texts[1]="Hier komt een tweede quote van een medewerker";
Texts[2]="Hier komt een derde quote van een medewerker";
function changeText(){
document.getElementById('quote').innerHTML=Texts[count];
count++;
if(count==Texts.length){count='0';}
setTimeout("changeText()",delay*1000);
}
</script>
<body onLoad="changeText();">
<h3 id="quote"></h3>

Thanx! Annelies

Upvotes: 0

Views: 370

Answers (3)

user2594509
user2594509

Reputation: 11

An additional question: now, every time I reload, it start with the first picture and quote. Is there a way to change this? So that when the browser loads, it picks a random picture and quote?

Annelies

Upvotes: 0

MrCode
MrCode

Reputation: 64526

Demo

Create an <img> element and change your data structure:

var delay="10"; //how many seconds you wnat the delay to be
var count=0;
var Texts = [];
Texts.push({ image : 'image1.jpg', text : 'Je voelt je hier geen nummer, maar eerder' });
Texts.push({ image : 'image2.jpg', text : 'Je voelt je hier' });
Texts.push({ image : 'image3.jpg', text : 'Je voelt je hier geen nummer, maa' });

function changeText(){
    document.getElementById('quote').innerHTML=Texts[count].text;
    document.getElementById('image').src=Texts[count].image;
    count++;
    if(count==Texts.length){count=0;}
    setTimeout(changeText,delay*1000);
}

HTML:

<h3 id="quote"></h3>
<img src="" id="image" />

Side notes:

  • The [] syntax if preferred for creating arrays var Texts = []
  • By using Texts.push() you can append to the array without having to set the next key each time
  • Don't pass a string to setTimeout, pass the function name without quotes or parenthesis instead.
  • When setting count to 0, don't wrap it in quotes because that sets it as a string.

Upvotes: 2

mohkhan
mohkhan

Reputation: 12295

Soemthing like this...

    <script type=text/javascript> 
    var delay="10"; //how many seconds you wnat the delay to be
    var count='0';
    var Texts=new Array();
    Texts[0]={ "text" : "Je voelt je hier geen nummer, maar eerder een kleine schakel binnen een groot bedrijf", "img" : "<your img1 path>"};
    Texts[1]={ "text" : "Hier komt een tweede quote van een medewerker", "img" : "<your img2 path>"};
    Texts[2]={ "text" : "Hier komt een derde quote van een medewerker", "img" : "<your img3 path>"};
    function changeText(){
        document.getElementById('quote').innerHTML=Texts[count].text;
        document.getElementById("your_img_tag_id").src = Texts[count].img;
        count++;
        if(count==Texts.length){count='0';}
        setTimeout("changeText()",delay*1000);
    }
</script>

Upvotes: 0

Related Questions