# Creating a function to change Link style with setInterval

**URL:** <https://forum.kirupa.com/t/creating-a-function-to-change-link-style-with-setinterval/328834>\
**Category:** web dev\
**Created:** [June 21, 2012, 6:51pm UTC](https://forum.kirupa.com/t/creating-a-function-to-change-link-style-with-setinterval/328834 "2012-06-21T18:51:04Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![lletdownl](https://avatars.discourse-cdn.com/v4/letter/l/6a8cbe/32.png) [@lletdownl](https://forum.kirupa.com/u/lletdownl)\
**Post date:** [June 21, 2012, 6:51pm UTC](https://forum.kirupa.com/t/creating-a-function-to-change-link-style-with-setinterval/328834/1 "2012-06-21T18:51:04Z")

</div>

Hello all,

I am relatively new to HTML/CSS and am hoping someone can help me. Here is the page i am working on…

[http://www.murphyjahn.com/html/INDEX\_061512.html](http://www.murphyjahn.com/html/INDEX_061512.html)

On this page, you can see that every 6 seconds, the background image changes. Background image 1 corresponds to the 1st link. Background image 2 corresponds to the 2nd link, and so on and so on. I want to write a function that changes each link’s text style in sequence so that when image 1 is displaying, link 1 is highlighted. When the background image changes to image 2, link 1 returns to normal and link 2 is highlighted. Any direction on how to execute this would be really helpful.

Here is the function that changes the images.

```auto
<script language="JavaScript1.2">
    var bgimages=new Array()
    bgimages[0]="IMAGES/UPDATES/1-BW.jpg"
    bgimages[1]="IMAGES/UPDATES/2-BW.jpg"
    bgimages[2]="IMAGES/UPDATES/3-BW.jpg"
    bgimages[3]="IMAGES/UPDATES/4-BW.jpg"
    bgimages[4]="IMAGES/UPDATES/5-BW.jpg"

    var inc=-1
    
    function bgSlide()
    {
      if (inc<bgimages.length-1)
        inc++
      else
        inc=0
      document.body.style.backgroundImage="url('"+bgimages[inc]+"')"
    }
    
    if (document.all||document.getElementById)
      window.onload=new Function('setInterval("bgSlide()",6000)')
</script>

```

and here is a typical link

```auto
 <div><a href="PROJECTS/YIBD.html"><b><i>IMAGE UPDATE</i></b> -- PENTOMINIUM TOWERS: SEOUL SOUTH KOREA</a></div>

```

and here is the CSS within the page for link styles…

```auto
a:link {
    color:#999999;
    text-decoration:none;
}
a:visited {
    color:#666666;
    text-decoration:line-through;
}
a:active {
    color:#FFFFFF;
    text-decoration: line-through;
}
a:hover {
    color:#FFFFFF;
    text-decoration: line-through;
}

```

I think the function im looking for will be pretty similar to the bgSLide function above, but i am having trouble understanding how to define each link with an ID, get those ID’s into an array and then cycle through those array changing the CSS styles as i go.

Thanks for any and all help!!!