Image Trail Script and XHTML [Archive]

View Full Version : Image Trail Script and XHTML

lloyd_borrett

05-31-2006, 05:20 AM

G'day,

I've been trying without success to get the Image Trail Script (http://www.dynamicdrive.com/dynamicindex13/trailer.htm) to work with IE6 and Firefox 1.5 in an XHTML document without success.

My doctype statement is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

The following code is what I've been trying:

/******************************************
* Cross browser cursor trailer script- By Brian Caputo (bcaputo@icdc.com)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* Modified Dec 31st, 02' by DD. This notice must stay intact for use
******************************************/

A=document.getElementById
B=document.all;
C=document.layers;
T1=new Array("trail1.gif",19,19,"trail2.gif",17,18,"trail3.gif",9,9,"trail4.gif",19,19,"trail5.gif",17,18,"trail6.gif",9,9)

var offsetx=0 //x offset of trail from mouse pointer
var offsety=0 //y offset of trail from mouse pointer

nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
rightedge=B? document.body.clientWidth-T1[1] : window.innerWidth-T1[1]-20
bottomedge=B? document.body.scrollTop+document.body.clientHeight-T1[2] : window.pageYOffset+window.innerHeight-T1[2]

for (i=0;i<nos;i++){
createContainer("cur"+i,i*10,i*10,i*3+1,i*3+2,"",'<img src="'+T1[i*3]+'" width="'+T1[(i*3+1)]+'" height="'+T1[(i*3+2)]+'" border="0" />')
}

function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){
with (document){
write((!A && !B) ? '<layer id="'+N+'" left="'+Xp+'px" top="'+Yp+'px" width="'+W+'" height="'+H+'"' : '<div id="'+N+'" style="position:absolute; left:'+Xp+'px; top:'+Yp+'px; width:'+W+'; height:'+H+'; ');
if(St){
if (C)
write(' style="');
write(St+';" ')
}
else write((A || B)?'"':"");
write((At)? At+">" : ">");
write((HT) ? HT : "");
if (!Op)
closeContainer(N)
}
}

function closeContainer(){
document.write((A || B)?"</div>":"</layer>")
}

function getXpos(N){
if (A)
return parseInt(document.getElementById(N).style.left)
else if (B)
return parseInt(B[N].style.left)
else
return C[N].left
}

function getYpos(N){
if (A)
return parseInt(document.getElementById(N).style.top)
else if (B)
return parseInt(B[N].style.top)
else
return C[N].top
}

function moveContainer(N,DX,DY){
c=(A)? document.getElementById(N).style : (B)? B[N].style : (C)? C[N] : "";
if (!B){
rightedge=window.innerWidth-T1[1]-20
bottomedge=window.pageYOffset+window.innerHeight-T1[2]
}
c.left=Math.min(rightedge, DX+offsetx);
c.top=Math.min(bottomedge, DY+offsety);
}
function cycle(){
//if (IE5)
if (document.all&&window.print){
ie5fix1=document.body.scrollLeft;
ie5fix2=document.body.scrollTop;
}
for (i=0;i<(nos-1);i++){
moveContainer("cur"+i,getXpos("cur"+(i+1)),getYpos("cur"+(i+1)))
}
}

function newPos(e){
moveContainer("cur"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2)
}

function getedgesIE(){
rightedge=document.body.clientWidth-T1[1]
bottomedge=document.body.scrollHeight-T1[2]
}

if (B){
window.onload=getedgesIE
window.onresize=getedgesIE
}

if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=newPos
setInterval("cycle()",rate)

This version of the script still works fine with no doctype or a HTML doctype. But not with a XHTML doctype.

In Firefox I just get two static clumps of images. In IE6 I get images that trail back and forth in a fixed Y location on the screen.

Is there any chance that someone has already solved this problem, or can help me to get a solution?

Best Regards, Lloyd Borrett.

djr33

05-31-2006, 05:25 AM

I have no clue about a real solution, but remember that iframes are always an option....

Twey

05-31-2006, 12:36 PM

It's not a good idea to use XHTML for general purpose on the web. See "Sending XHTML as text/html Considered Harmful" (http://hixie.ch/advocacy/xhtml) by Ian Hickson.

Also, using a Transitional DOCTYPE totally defeats the point of XHTML anyway :) A Transitional DOCTYPE is designed to be an interim measure while authors convert their HTML code to XHTML Strict. To design a site from scratch using XHTML Transitional is pointless; you'd be better off (far better off, actually) using HTML 4.01 Strict.

otaku

05-31-2006, 04:50 PM

Hi lloyd_borrett,

To solve your problem, replace the 2 following lines:

c.left=Math.min(rightedge, DX+offsetx);
c.top=Math.min(bottomedge, DY+offsety);

By these ones:

c.left=Math.min(rightedge, DX+offsetx) + "px";
c.top=Math.min(bottomedge, DY+offsety) + "px";

lloyd_borrett

05-31-2006, 09:57 PM

Thanks.

This version works properly with Firefox 1.5.

But still no Y axis movement in IE6.

/******************************************
* Cross browser cursor trailer script- By Brian Caputo (bcaputo@icdc.com)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* Modified Dec 31st, 02' by DD. This notice must stay intact for use
******************************************/

A=document.getElementById
B=document.all;
C=document.layers;
T1=new Array("trail1.gif",19,19,"trail2.gif",17,18,"trail3.gif",9,9,"trail4.gif",19,19,"trail5.gif",17,18,"trail6.gif",9,9)

var offsetx=0 //x offset of trail from mouse pointer
var offsety=0 //y offset of trail from mouse pointer

nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
rightedge=B? document.body.clientWidth-T1[1] : window.innerWidth-T1[1]-20
bottomedge=B? document.body.scrollTop+document.body.clientHeight-T1[2] : window.pageYOffset+window.innerHeight-T1[2]

for (i=0;i<nos;i++){
createContainer("cur"+i,i*10,i*10,i*3+1,i*3+2,"",'<img src="'+T1[i*3]+'" width="'+T1[(i*3+1)]+'" height="'+T1[(i*3+2)]+'" border="0" />')
}

function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){
with (document){
write((!A && !B) ? '<layer id="'+N+'" left="'+Xp+'px" top="'+Yp+'px" width="'+W+'px" height="'+H+'px"' : '<div id="'+N+'" style="position:absolute; left:'+Xp+'px; top:'+Yp+'px; width:'+W+'px; height:'+H+'px; ');
if(St){
if (C)
write(' style="');
write(St+';" ')
}
else write((A || B)?'"':"");
write((At)? At+">" : ">");
write((HT) ? HT : "");
if (!Op)
closeContainer(N)
}
}

function closeContainer(){
document.write((A || B)?"</div>":"</layer>")
}

function getXpos(N){
if (A)
return parseInt(document.getElementById(N).style.left)
else if (B)
return parseInt(B[N].style.left)
else
return C[N].left
}

function getYpos(N){
if (A)
return parseInt(document.getElementById(N).style.top)
else if (B)
return parseInt(B[N].style.top)
else
return C[N].top
}

function moveContainer(N,DX,DY){
c=(A)? document.getElementById(N).style : (B)? B[N].style : (C)? C[N] : "";
if (!B){
rightedge=window.innerWidth-T1[1]-20
bottomedge=window.pageYOffset+window.innerHeight-T1[2]
}
c.left=Math.min(rightedge, DX+offsetx)+"px";
c.top=Math.min(bottomedge, DY+offsety)+"px";
}
function cycle(){
//if (IE5)
if (document.all&&window.print){
ie5fix1=document.body.scrollLeft;
ie5fix2=document.body.scrollTop;
}
for (i=0;i<(nos-1);i++){
moveContainer("cur"+i,getXpos("cur"+(i+1)),getYpos("cur"+(i+1)))
}
}

function newPos(e){
moveContainer("cur"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2)
}

function getedgesIE(){
rightedge=document.body.clientWidth-T1[1]
bottomedge=document.body.scrollHeight-T1[2]
}

if (B){
window.onload=getedgesIE
window.onresize=getedgesIE
}

if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=newPos
setInterval("cycle()",rate)

Best Regards, Lloyd Borrett.

jscheuer1

06-01-2006, 06:29 AM

You need to change all instances of:

document.body

to:

document.documentElement

And you need to add some content to the page, the effect will only work over the body, if there is nothing on the page, the body is too short to allow for any real movement.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<script type="text/javascript">
/******************************************
* Cross browser cursor trailer script- By Brian Caputo (bcaputo@icdc.com)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* Modified Dec 31st, 02' by DD. This notice must stay intact for use
******************************************/

A=document.getElementById
B=document.all;
C=document.layers;
T1=new Array("trail1.gif",38,35,"trail2.gif",30,31,"trail3.gif",28,26,"trail4.gif",22,21,"trail5.gif",16,16,"trail6.gif",10,10)

var offsetx=0 //x offset of trail from mouse pointer
var offsety=0 //y offset of trail from mouse pointer

nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
rightedge=B? document.documentElement.clientWidth-T1[1] : window.innerWidth-T1[1]-20
bottomedge=B? document.documentElement.scrollTop+document.documentElement.clientHeight-T1[2] : window.pageYOffset+window.innerHeight-T1[2]

for (i=0;i<nos;i++){
createContainer("cur"+i,i*10,i*10,i*3+1,i*3+2,"",'<img src="'+T1[i*3]+'" width="'+T1[(i*3+1)]+'" height="'+T1[(i*3+2)]+'" border="0" />')
}

function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){
with (document){
write((!A && !B) ? '<layer id="'+N+'" left="'+Xp+'px" top="'+Yp+'px" width="'+W+'px" height="'+H+'px"' : '<div id="'+N+'" style="position:absolute; left:'+Xp+'px; top:'+Yp+'px; width:'+W+'px; height:'+H+'px; ');
if(St){
if (C)
write(' style="');
write(St+';" ')
}
else write((A || B)?'"':"");
write((At)? At+">" : ">");
write((HT) ? HT : "");
if (!Op)
closeContainer(N)
}
}

function closeContainer(){
document.write((A || B)?"</div>":"</layer>")
}

function getXpos(N){
if (A)
return parseInt(document.getElementById(N).style.left)
else if (B)
return parseInt(B[N].style.left)
else
return C[N].left
}

function getYpos(N){
if (A)
return parseInt(document.getElementById(N).style.top)
else if (B)
return parseInt(B[N].style.top)
else
return C[N].top
}

function moveContainer(N,DX,DY){
c=(A)? document.getElementById(N).style : (B)? B[N].style : (C)? C[N] : "";
if (!B){
rightedge=window.innerWidth-T1[1]-20
bottomedge=window.pageYOffset+window.innerHeight-T1[2]
}
c.left=Math.min(rightedge, DX+offsetx)+"px";
c.top=Math.min(bottomedge, DY+offsety)+"px";
}
function cycle(){
//if (IE5)
if (document.all&&window.print){
ie5fix1=document.documentElement.scrollLeft;
ie5fix2=document.documentElement.scrollTop;
}
for (i=0;i<(nos-1);i++){
moveContainer("cur"+i,getXpos("cur"+(i+1)),getYpos("cur"+(i+1)))
}
}

function newPos(e){
moveContainer("cur"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2)
}

function getedgesIE(){
rightedge=document.documentElement.clientWidth-T1[1]
bottomedge=document.documentElement.scrollHeight-T1[2]
}

if (B){
window.onload=getedgesIE
window.onresize=getedgesIE
}

if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=newPos
setInterval("cycle()",rate)

</script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>

lloyd_borrett

06-01-2006, 09:56 AM

Many thanks John.

That works great.

Best Regards, Lloyd Borrett.

jscheuer1

06-01-2006, 07:07 PM

An afterthought:

Since you cannot always be certain that your document will be served and/or parsed as XHTML strict or even as HTML 4.01, a test to determine the capabilities/proclivities of the browser under the prevailing server circumstances should probably be used. Frequently something like this is employed:

function ietruebody(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}

Place that function ahead of the use of document.body and/or document.documentElement in your code. Then wherever one of those is used, replace it with:

ietruebody()