Horizontal Image Scroller 6

Mouse over the scrolling images to pause the scrolling, when the mouse is over an image its relevant text is displayed.
Click on an image to display its full sized version.

Hello

This example is similar to my Horizontal Image Scroller 5 script except that each of the scrolling images can have a small amount of text displayed over it onmouseover.
The text box can have a background colour, opacity, border, and padding which are set in the appropriate css rules 

<HTML>
<HEAD>
<TITLE>Horizontal Image Scroller 6h</TITLE>
 
<script type="text/javascript">

//Jeff
// www.huntingground.freeserve.co.uk

hs6Arr=[
//["thumb1.jpg","bigpic1.jpg","Alt Text 1","text box text"],

["pic01.jpg","pic01.jpg","Alt Text 1","Display text over these images. This text box is always positioned at the bottom"],
["pic02.jpg","pic02.jpg","","The height of the text box adjusts to the amount of text shown. If there is no text this box does not appear"],
["pic03.jpg","pic03.jpg","","All appears to be working fine in IE and Firefox"],
["pic04.jpg","pic04.jpg","","Have taken into account if a border is used on these images and if a border and/or padding is used on the text div"],
["pic05.jpg","pic05.jpg","","Have fun "]
/*
["pic06.jpg","pic06.jpg","Alt Text 6",""],
["pic07.jpg","pic07.jpg","Alt Text 7",""],
["pic08.jpg","pic08.jpg","Alt Text 8",""],
["pic09.jpg","pic09.jpg","Alt Text 9",""],
["pic10.jpg","pic10.jpg","Alt Text 10",""]
*/
]

dir=0 // 0 = left 1 = right
speed=1

imageSize=50  // % set to zero to use fixedWidth and fixedHeight values

fixedWidth=200 // set a fixed width
fixedHeight=200 // set a fixed height
spacerWidth=1 // space between images
dualFade=0 // 0 = fades in, 1 = fades out then in

biggest=0
scrollBoxBorder=0
totalWidth=0
hs6Timer=null

lastN=0
count=0
fading=0
fadeStep = 2
fadeSpeed=10
minFadeValue=0

preload=new Array()
for(var i=0;i<hs6Arr.length;i++){
preload[i]=[]

for(var j=0;j<2;j++){
preload[i][j]=new Image()
preload[i][j].src=hs6Arr[i][j]
}

}

function initHS6(){
scrollBox=document.getElementById("scroll_box")
scroll1=document.getElementById("scroller1")
//alert(preload[0][0].src)
for(var k=0;k<hs6Arr.length;k++){
scroll1.innerHTML+='<img id="pic'+k+'" src="'+preload[k][0].src+'" alt="'+hs6Arr[k][2]+'" title="'+hs6Arr[k][2]+'" onclick="initFade('+k+')" onmouseover="showTxt(this,this.offsetParent.id,'+k+')" onmouseout="hideTxt(event)">' 
if(imageSize!=0){ // use percentage size
newWidth=preload[k][0].width/100*imageSize
newHeight=preload[k][0].height/100*imageSize
}
else{ // use fixed size
newWidth=fixedWidth
newHeight=fixedHeight
}

document.getElementById("pic"+k).style.width=newWidth+"px"
document.getElementById("pic"+k).style.height=newHeight+"px"

if(document.getElementById("pic"+k).offsetHeight>biggest){
biggest=document.getElementById("pic"+k).offsetHeight
}

document.getElementById("pic"+k).style.marginLeft=spacerWidth+"px"
totalWidth+=document.getElementById("pic"+k).offsetWidth+spacerWidth
}

totalWidth+=1

for(var l=0;l<hs6Arr.length;l++){ // vertically center images
document.getElementById("pic"+l).style.marginBottom = (biggest-document.getElementById("pic"+l).offsetHeight)/2+"px"
}

if(scrollBox.currentStyle&&!window.opera&&document.compatMode!="CSS1Compat"){
scrollBoxBorder=parseInt(scrollBox.currentStyle.borderWidth)*2
}

scrollBox.style.height=biggest+scrollBoxBorder+"px"
scroll1.style.width=totalWidth+"px"
scroll2=document.getElementById("scroller2")
scroll2.innerHTML=scroll1.innerHTML
scroll2.style.left= scroll1.offsetWidth+"px"
scroll2.style.top= 0+"px" //-scroll1.offsetHeight+"px"
scroll2.style.width=totalWidth+"px"

if(dir==1){
speed= -speed
}

scrollHS6()
}

function scrollHS6(){
clearTimeout(hs6Timer)
scroll1Pos=parseInt(scroll1.style.left)
scroll2Pos=parseInt(scroll2.style.left)
scroll1Pos-=speed
scroll2Pos-=speed
scroll1.style.left=scroll1Pos+"px"
scroll2.style.left=scroll2Pos+"px"
hs6Timer=setTimeout("scrollHS6()",50)

if(dir==0){
if(scroll1Pos< -scroll1.offsetWidth){
scroll1.style.left=scroll1.offsetWidth+"px"
}

if(scroll2Pos< -scroll1.offsetWidth){
scroll2.style.left=scroll1.offsetWidth+"px"
}
}

if(dir==1){
if(scroll1Pos>parseInt(scrollBox.style.width)){
scroll1.style.left=scroll2Pos+ (-scroll1.offsetWidth)+"px"
}

if(scroll2Pos>parseInt(scrollBox.style.width)){
scroll2.style.left=scroll1Pos+ (-scroll2.offsetWidth)+"px"
}
}

}

st=null
function pause(){
clearTimeout(hs6Timer)
clearTimeout(st)
}

function reStartHS6(){
clearTimeout(st)
st=setTimeout("scrollHS6()",100)
}

function initFade(n){
count=n
if(lastN==n||fading==1){return}

if(dualFade==0){fadeValue=0}
else{fadeValue=100}

picNum=n
lastN=n
fadePic()
}

function fadePic(){
displayEl=document.images["bigpic"]
fading=1
fadeValue -= fadeStep
fadeTimer=setTimeout("fadePic()",fadeSpeed)

if(displayEl.filters){displayEl.filters.alpha.opacity=fadeValue}
else{displayEl.style.opacity=(fadeValue/100)-0.1}

if(fadeValue<minFadeValue){ // for fade out first
fadeValue=minFadeValue
fadeStep= -fadeStep
displayEl.src=hs6Arr[picNum][1]
}

if(fadeValue>=100){ // fade in
fadeValue=100
fadeStep= -fadeStep
fading=0
clearTimeout(fadeTimer)
}
}

function showTxt(obj,objParentID,num){
if(hs6Arr[num][3]==""){return}

imgTxt=document.getElementById("imgtxt")
imgParent=document.getElementById(objParentID)

imgTxt.innerHTML=hs6Arr[num][3]

scrollBoxBorder=0
imageBorder=0

txtBorder=0
txtPadding=0

if(document.uniqueID && document.getElementById("pic"+num).currentStyle){ // ie
imageBorder=parseInt(document.getElementById("pic"+num).currentStyle.borderWidth)
//txtPadding=parseInt(imgTxt.currentStyle.paddingLeft) // uncomment for doctype
}

if(window.getComputedStyle){
scrollBoxBorder=parseInt(document.defaultView.getComputedStyle(scrollBox, '').getPropertyValue("border-top-width"))

scrollBoxBorder=(/firefox/i.test(navigator.userAgent)?scrollBoxBorder:(window.opera?-scrollBoxBorder:0))

imageBorder=parseInt(document.defaultView.getComputedStyle(document.getElementById("pic"+num), '').getPropertyValue("border-top-width"))
txtPadding=parseInt(document.defaultView.getComputedStyle(imgTxt, '').getPropertyValue("padding-top"))
txtBorder=parseInt(document.defaultView.getComputedStyle(imgTxt, '').getPropertyValue("border-top-width"))

}

imgTxt.style.display="block"
imgTxt.style.width=obj.offsetWidth-(imageBorder*2)-(txtPadding*2)-(txtBorder*2)+"px"

imgTxt.style.left=obj.offsetLeft+imgParent.offsetLeft+scrollBoxBorder+imageBorder+"px"
imgTxt.style.top=(obj.offsetTop+imgParent.offsetTop)+obj.offsetHeight-imgTxt.offsetHeight+scrollBoxBorder-imageBorder+"px"

}

function hideTxt(e){
if(e.toElement&&event.toElement.id!="imgtxt"){
imgTxt.style.display="none"
}

if(e.relatedTarget&&e.relatedTarget.id!="imgtxt"){
imgTxt.style.display="none"
}
}

</script>

<style>

/* where used the border and padding must have a value even if it is zero */

#scroll_box{
position:relative;
width:600px;
overflow:hidden;
background-color:#ddddee;
border:1px solid #bbbbcc;
text-align:left;
}

#scroller1 img, #scroller2 img{
cursor:pointer;
border:1px solid #7777aa;
}

#imgtxt{
position:absolute;
left:0px;
top:0px;
font-size:12px;
border:0px solid red;
padding:5px;
background-color:#FFFFFF;
display:none;
opacity:0.75;
}

#bigpic{
opacity:0.9;
margin-top:20px;
}
</style>

<!--[if IE]>

<style type="text/css">

#imgtxt{
filter:alpha(opacity=75); /*opacity for IE */
}

#bigpic{
filter:alpha(opacity=100); /*opacity for IE */
}

</style>

<! [endif]-->


</HEAD>
<BODY onload="initHS6()">
<h1>Horizontal Image Scroller 6h</h1>


<DIV id="scroll_box" onmouseover="pause()" onmouseout="reStartHS6()"> 
<div id="scroller1" style="position:absolute;left:0px;top:0px"></div>
<div id="scroller2" style="position:absolute"></div>
<div id="imgtxt" onmouseout="hideTxt(event)">Hello</div>
</DIV>
<img src="pic01.jpg" id="bigpic" name="bigpic">


</BODY>
</HTML>