How to let this scrolling page refer to another html?

kippie · Nov 28, 2004

In the HTML below there is a horizontal scroller. I would like to use this script as an intro. So when a certain image (or a certain distance of scrolling) has gone by I would like to make an automatic transfer to another HTML. But I have no idea how to do such a thing. Could anyone help? This is the scrolling HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL] 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL] 
<head> 
<title>Image Scroller</title> 


<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> 

	<link href="layout2.css" rel="stylesheet" type="text/css">

		<script language="javascript" src="sleight.js"></script>



<style type="text/css"> 
/*<![CDATA[*/ 

body { 
    background: #ffffff; 

} 
#middle { 
    position:absolute; 
    left:       0px; 
    top:        95px; 
    width:      3050px; 
    height:     350px; 
    overflow:   hidden; 
} 
#container { 
    width:      5788px; /*total images width */ 
    display:    none; 
    position:   absolute; 
    top:          0px; 
    border:     solid 0px #6699cc; 
}

#foowzw {
  color: #4c5ea1;
 }

#fooinspi {
  color: #4c5ea1;
 }

.images { 
    float:left; 
    border:none; 
} 

.kop { color: #4c5ea1; font-weight: 700; font-size: 13px; font-family: Arial; text-align: left; width: 100%; text-decoration: none }



/*//]]>*/ 
</style> 

<script type="text/javascript"> 
//<![CDATA[ 

//* preload rollover 
var roll = new Image() 
roll.src = 'spiraalmetman3opt.jpg' 

var x = 550; 
var w = 5788; /*total images width */ 
var i = 0; 
var speed = 3; 

/*----------------------------------------------------------------------------- 
    Scroller functions 
-----------------------------------------------------------------------------*/ 

function imageScroll() { 
    var Scontainer = document.getElementById("container").style; 
    Scontainer.display = "block"; 
    Scontainer.left = (x - i) + "px"; 
    i++; 
    if(i >(x + w)) { 
        i = 0; 
    } 
    scroller=setTimeout("imageScroll()",speed); 
} 
onload = imageScroll; 

function stopScroll(el) { 
    clearTimeout(scroller); 
} 

/*----------------------------------------------------------------------------- 
    Image swap 

        - No 2nd arg = "swap back" 
-----------------------------------------------------------------------------*/ 



function swap(img,src) 
{ 
    if(src){ 
        img.oSrc = img.src; 
        img.src  = src; 
    } 
    else 
        img.src = img.oSrc; 
} 

/*----------------------------------------------------------------------------- 
    Mouse events 
-----------------------------------------------------------------------------*/ 

function img_mouseover(img, src) 
{ 
    stopScroll(); 
    swap(img,src); 
    img.onmouseout = img_mouseout; 
} 


function img_mouseout() 
{ 
    imageScroll(); 
    swap(this); 
} 


//]]> 
</script> 



</head> 

<!-- 'return false' not needed on event handlers--> 

<body> 
    <div id ="middle"> 
        <div id = "container">

		<img border="0" src = "dotwhite.gif" height="0" width="3">
		<a href="[URL unfurl="true"]http://www.inspiration-company.nl/inspiratie-trainingen.html"[/URL] id="foowzw" target="_self" class="kop" onmouseover = "stopScroll(this); return false;" onmouseout = "img_mouseout()" alt = ""/>text1</a>
		<img border="0" src = "dotwhite.gif" height="0" width="5">
		<a href="[URL unfurl="true"]http://www.inspiration-company.nl/inspiratie-trainingen.html"[/URL] id="fooinspi" class="kop" target="_self" onmouseover = "stopScroll(this); return false" onmouseout = "img_mouseout()" alt = ""/>text2</a>
					<img border="0" src = "dotwhite.gif" height="0" width="80">
		
		<a href="[URL unfurl="true"]http://www.inspiration-company.nl/inspiratie-trainingen.html"[/URL] target="_self" onmouseover="stopScroll(this); return false" onmouseout = "img_mouseout()"> <img class = "images" border="0" src = "intromanopschommelopt.jpg" alt = ""/></a>
		<a href="[URL unfurl="true"]http://www.inspiration-company.nl/inspiratie-trainingen.html"[/URL] target="_self"><img class = "images" border="0" src = "dotwhite.gif" height="0" width="40" onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/></a>
		<a href="[URL unfurl="true"]http://www.inspiration-company.nl/teambuilding-trainingen.html"[/URL] target="_self"><img class = "images" border="0" src = "introgatinluchtopt.jpg" onmouseover = "stopScroll(this);return false" onmouseout = "img_mouseout()" alt = ""/></a>

        </div> 
    </div> 

</body> 
</html>

BillyRayPreachersSon · Nov 28, 2004

Given that you have a variable, "i" which keeps track of the distance scrolled, I would have thought that simply doing a test on this variable would be all you would need to do.

If, in the imageScroll function, after this line:

Code:

i++;

you add:

Code:

window.status = i;

then you will have some reference point to determine at what value of "i" you will load a new page. When you have that value, replace the "window.status" line with:

Code:

if (i == 123) document.location = 'newPage.html';

obviously, replacing 123 with the nubmer previously gleaned from the status bar.

Hope this helps,
Dan

kippie · Nov 28, 2004

Thanks Dan,

thanks for all your help.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to let this scrolling page refer to another html?

kippie

Technical User

BillyRayPreachersSon

Programmer

kippie

Technical User

Similar threads

Part and Inventory Search

Sponsor