Div Ticker, add function to select a div

[dragon_sa]

I have the following script which changes a set of numbered div tags, 1 after the other set to the time interval in the script.

 

I would like a way to add a function to the script so that I can click on a link to change between the divs.

 

For example I have 6 numbered divs (id="dropmsg0", id="dropmsg1", id="dropmsg3", etc..) with different content, the script starts scrolling through them on the set interval, so what I want to do is if I click on a link (I would also have 6 links) it can change to the selected div and start scrolling from that point again.

 

Also note that when it scrolls between the divs it takes the subject of a div tag and inserts it into the "dropcontentsubject" div box to creat the heading for the current div.

 

Javascript:-

/***********************************************
* ProHTML Ticker script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var tickspeed=12000 //ticker speed in miliseconds (2000=2 seconds)
var enablesubject=1 //enable scroller subject? Set to 0 to hide

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

var selectedDiv=0
var totalDivs=0

function contractall(){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}


function expandone(){
var selectedDivObj=document.getElementById("dropmsg"+selectedDiv)
contractall()
document.getElementById("dropcontentsubject").innerHTML=selectedDivObj.getAttribute("subject")
selectedDivObj.style.display="block"
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
setTimeout("expandone()",tickspeed)
}

function startscroller(){
while (document.getElementById("dropmsg"+totalDivs)!=null)
totalDivs++
expandone()
if (!enablesubject)
document.getElementById("dropcontentsubject").style.display="none"
}

if (window.addEventListener)
window.addEventListener("load", startscroller, false)
else if (window.attachEvent)
window.attachEvent("onload", startscroller)

 

And this an example of the divs it currently changes

 

<div id="dropcontentsubject"></div>
<div id="dropmsg0" class="dropcontent" subject="Heading 1 here">
<p>some content here for div 1</p>
</div>
<div id="dropmsg1" class="dropcontent" subject="Heading 2 here">
<p>some content here for div 2</p>
</div>
<div id="dropcontentsubject"></div>
<div id="dropmsg2" class="dropcontent" subject="Heading 3 here">
<p>some content here for div 3</p>
</div>
<div id="dropmsg3" class="dropcontent" subject="Heading 4 here">
<p>some content here for div 4</p>
</div>