URL change on a timer in JavaScript

Question

I currently have a image moving on a timer where a new image will appear but what I am trying to implement is a href URL to the image so they can navigate the site.

So this is how I have set up the code.

The code for the image slider works perfectly fine which is

<script type="text/javascript">
    $(function(){
        //prepare Your data array with img urls
        var dataArray=new Array();        <script type="text/javascript">
    $(function(){
        //prepare Your data array with img urls
        var dataArray=new Array();
        dataArray[0]="galleryevenbiggerbiggerversion.png";
        dataArray[1]="galleryevenbiggeraboutversion.png";
        dataArray[2]="galleryevenbiggereventsversion.png";
        //start with id=0 after 5 seconds
        var thisId=0;

        window.setInterval(function(){
            $('#thisImgcentral').attr('src',dataArray[thisId]);
            thisId++; //increment data array id
            if (thisId==3) thisId=0; //repeat from start
        },7800);        
    });
</script>

So, I have tried to use this same concept but changed the src to href hoping for it to work but this is not working.

<script type="text/javascript">
    $(function(){
        //prepare Your data array with img urls
        var dataArray=new Array();
        dataArray[0]="index.php?page=Community";
        dataArray[1]="index.php?page=About";
        dataArray[2]="index.php?page=Events";
        //start with id=0 after 5 seconds
        var thisId4=0;

        window.setInterval(function(){
            $('#thisAddress').attr('href',dataArray[thisId4]);
            thisId4++; //increment data array id
            if (thisId4==3) thisId4=0; //repeat from start
        },7800);    
</script>

Finally, this is how I have laid out the html:

        <a id=thisAddress href=index.php?page=Community><img class=headerimage id=thisImgcentral src=galleryevenbiggerbiggerversion.png></img></a></p>

Why would this be and how would it be possible to make this work?

Not sure I follow; you want the moving images to be clickable links? — Mitya, Mar 11 '17 at 13:41
you will find your answer here http://stackoverflow.com/questions/3395359/difference-between-src-and-href — CaptainHere, Mar 11 '17 at 14:30

score 0 · Accepted Answer · edited Mar 11 '17 at 17:36

0

I created a version for you using plain JavaScript.

Here's the Code:

<script>
var dataArray = [
  "https://s13.postimg.org/fa1p792lv/community.png",
  "https://s13.postimg.org/3wf5w1s37/about.png",
  "https://s13.postimg.org/iuxkqh75f/events.png"
];
var linkArray = [
  "index.php?page=Community",
  "index.php?page=About",
  "index.php?page=Events"
];

var thisId=0;
var image = document.getElementById("thisImgCentral");
image.src = dataArray[thisId];

image.onclick = function() {
  window.location.href = linkArray[thisId];
}

window.setInterval(function(){
  thisId = (thisId+1)%3;
  image.src = dataArray[thisId];
},1000);        
</script>

You can run it here: https://jsfiddle.net/FrancisMacDougall/hpwj1ady/

edited Mar 11 '17 at 17:36

Saugat Bhattarai

2,614
4
24
33

answered Mar 11 '17 at 17:06

fmacdee

2,353
10
15

Awesome works perfectly on that testing site but when I use it on my site http://www.etnl.co.uk/0indiatest it doesn't show at all – Nav Mar 12 '17 at 06:11
On your site you are incrementing the "thisId" variables immediately after changing the image. This will always result in the wrong value for that variable when you click on the image. Look at the way that I did it above in my code - basically do the "thisId = (thisId+1)%3" before you change the image.src. – fmacdee Mar 12 '17 at 11:52
Also, I could not find where you initialized the images themselves in the HTML - can you point me there? – fmacdee Mar 12 '17 at 11:54
sorry pal I have just reverted it back to the code you provided, I changed your image URL to http://www.etnl.co.uk/0indiatest/community.png, http://www.etnl.co.uk/0indiatest/about.png, http://www.etnl.co.uk/0indiatest/events.png – Nav Mar 12 '17 at 13:16
it is strange as it works on the JSFiddle.net but does not work on my godaddy server :/ – Nav Mar 12 '17 at 13:17
@fmacadee – Nav Mar 12 '17 at 13:20
image.onclick = function() { window.location.href = linkArray[thisId]; } window.setInterval(function(){ thisId = (thisId+1)%3; image.src = dataArray[thisId]; },7800);
– Nav Mar 12 '17 at 13:20
When I run your test page I get an error in the console which suggests that the image element is not being initialized properly: "Uncaught TypeError: Cannot set property 'src' of null at (index):144" – fmacdee Mar 12 '17 at 13:40
so that means it is looking for a src in the but even if I put the src as src=community.png this still will not rotate – Nav Mar 12 '17 at 13:50
I been researching this a lot of them are saying "It looks like your issue with IE is related to how your trying to select the picture tag" is there another way to grab the picture instead of image.src = dataArray[thisId]; by implementing a document.getElementById("SourceNameHere").src – Nav Mar 12 '17 at 15:39

URL change on a timer in JavaScript

1 Answers1