...
PDA

Image problem - JS assistance

zyiiilo
08-13-2005, 01:01 PM
Hello, I would like some help on my site.

I am going to have pictures, that is aligned in a row, next to eachother.
It is only possible to see three pictures like this:

Picture1 Picture2 Picture3

Picture2 is the one in the middle and the one you can see correctly, but when you hover your mouse over Picture3, Picture2 & Picture1 moves to the left, leaving Picture1 out of sight, in a blank area, and a new picture shows up after Picture3.

Picture2 Picture3 Picture4

And the same happens if you hover your mouse over Picture1 but the other way around, like instead of Picture4 showing up, Picture0 shows up and Picture3 disappeares.

When you hover over any picture that is in the middle, nothing happens.

If anyone knows a javascript that is similar to this, it would be great if you could post it, and maybe explain how I would insert it into my html.

Thanks.
zyiiilo
vwphillips
08-13-2005, 01:04 PM
welcome

best to post your code
zyiiilo
08-13-2005, 01:08 PM
My problem is that I know nothing about JS, so I have no code, but I am willing to experiement with codes that you guys support me with.

Thanks again.
zyiiilo
vwphillips
08-13-2005, 01:37 PM
try this



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
var ImgAry=new Array('Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif');
var ImgCnt=1;

function MoveImg(obj,dir){
imgs=obj.parentNode.getElementsByTagName('IMG');
ImgCnt+=dir;
if (ImgCnt>ImgAry.length-imgs.length){ ImgCnt--; }
if (ImgCnt<0){ ImgCnt=0; }
for (i=0;i<imgs.length;i++){
imgs[i].src=ImgPath+ImgAry[ImgCnt+i];
}


}
//-->
</script>

</head>

<body>
<span >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=100 height=100 onmouseover="MoveImg(this,-1);">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width=100 height=100 >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width=100 height=100 onmouseover="MoveImg(this,1);" >
</span>
<br>Picture1 Picture2 Picture3<br>
<br>
Picture2 is the one in the middle and the one you can see correctly,<br>
but when you hover your mouse over Picture3, Picture2 & Picture1 moves to the left,<br>
leaving Picture1 out of sight, in a blank area,<br>
and a new picture shows up after Picture3.

Picture2 Picture3 Picture4

And the same happens if you hover your mouse over Picture1 but the other way around,<br>
like instead of Picture4 showing up, Picture0 shows up and Picture3 disappeares.
</body>

</html>
zyiiilo
08-14-2005, 06:15 PM
I love you man, thanks a bunch

Do you know if its possible to delay the pictures from changing so it looks like its sliding?
vwphillips
08-15-2005, 08:08 AM
sliding require different techniques

do you want each image to slde individually of all three from left and right?
zyiiilo
08-15-2005, 06:28 PM
Yes, that would be great, just as you did it but that the pictures slide instead of changing so fast...:D
vwphillips
08-15-2005, 08:13 PM
<html>
<head>
</head>
<body onload="zxcInitGroup('ImgGrp1',zxcImgAry);zxcInitGroup('ImgGrp2',zxcImgAry);">


<div id="ImgGrp1" style="position:relative;width:300px;height:100px;" >
<div style="position:absolute;overflow:hidden;width:100px;height:100px;" ></div>
<div style="position:absolute;overflow:hidden;width:100px;height:100px;" ></div>
<div style="position:absolute;overflow:hidden;width:100px;height:100px;" ></div>
<div style="position:absolute;overflow:hidden;width:100px;height:100px;" ></div>
</div>
<br>
<br>
<div id="ImgGrp2" style="position:relative;" >
<div style="position:absolute;overflow:hidden;width:100px;height:100px;" ></div>
<div style="position:absolute;overflow:hidden;width:100px;height:100px;" ></div>
<div style="position:absolute;overflow:hidden;width:100px;height:100px;" ></div>
</div>

<script>
// by Vic Phillips (15-08-2005) http://www.vicsjavascripts.org.uk

var zxcImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
var zxcImgAry=new Array('Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif');
var zxcSRCAry=new Array();

for (zxc0=0;zxc0<zxcImgAry.length;zxc0++){
zxcSRCAry=new Image();
zxcSRCAry.src=zxcImgPath+zxcImgAry[zxc0];
}

var zxcObj,zxcDir;
var zxcAry=new Array();
var zxcACnt=0;

function zxcInitGroup(zxcid,zxcary){
zxcAry[zxcACnt]=document.getElementById(zxcid);
zxcAry[zxcACnt].divs=zxcAry[zxcACnt].getElementsByTagName('DIV');
zxcAry[zxcACnt].divs[0].onmouseover=function(){ zxcChange(this.parentNode,1); }
zxcAry[zxcACnt].divs[zxcAry[zxcACnt].divs.length-1].onmouseover=function(){ zxcChange(this.parentNode,-1); }
for (zxc0=0;zxc0<zxcAry[zxcACnt].divs.length;zxc0++){
zxcAry[zxcACnt].divs[zxc0].style.top='0px';
zxcAry[zxcACnt].divs[zxc0].style.left=(zxcAry[zxcACnt].divs[zxc0].offsetWidth*zxc0)+'px';
zxcAry[zxcACnt].divs[zxc0].cnt0=zxc0;
for (zxc1=0;zxc1<zxcary.length;zxc1++){
zxcimg=document.createElement('IMG');
zxcimg.src=zxcImgPath+zxcary[zxc1];
zxcimg.width=(zxcAry[zxcACnt].divs[zxc0].offsetWidth);
zxcimg.height=(zxcAry[zxcACnt].divs[zxc0].offsetHeight);
zxcAry[zxcACnt].divs[zxc0].appendChild(zxcimg);
zxcimg.style.position='absolute';
zxcimg.style.zIndex=0;
zxcimg.style.top='0px';
zxcimg.style.left=(zxcAry[zxcACnt].divs[zxc0].offsetWidth)+'px';
}
zxcAry[zxcACnt].divs[zxc0].imgs=zxcAry[zxcACnt].divs[zxc0].getElementsByTagName('IMG')
zxcAry[zxcACnt].divs[zxc0].imgs[zxc0].style.left='0px';
}
zxcACnt++;
}

function zxcChange(zxcobj,zxcdir){
if (zxcObj){ return; }
zxcDir=zxcdir;
for (zxc0=0;zxc0<zxcobj.divs.length;zxc0++){
zxcobj.divs[zxc0].last=zxcobj.divs[zxc0].imgs[zxcobj.divs[zxc0].cnt0];
zxcobj.divs[zxc0].last.style.zIndex=0;
zxcobj.divs[zxc0].cnt0+=zxcDir;
if (zxcobj.divs[zxc0].cnt0>=zxcobj.divs[zxc0].imgs.length){ zxcobj.divs[zxc0].cnt0=0; }
if (zxcobj.divs[zxc0].cnt0<0){ zxcobj.divs[zxc0].cnt0=zxcobj.divs[zxc0].imgs.length-1; }
zxcobj.divs[zxc0].next=zxcobj.divs[zxc0].imgs[zxcobj.divs[zxc0].cnt0];
zxcobj.divs[zxc0].next.style.left=(zxcobj.divs[zxc0].offsetWidth*zxcDir)+'px';
zxcobj.divs[zxc0].next.style.zIndex=1;
}
zxcObj=zxcobj.divs;
zxcRotate();
}

function zxcRotate(){
for (zxc0=0;zxc0<zxcObj.length;zxc0++){
zxcObj[zxc0].next.style.left=(parseInt(zxcObj[zxc0].next.style.left)-zxcDir)+'px';
}
if (parseInt(zxcObj[0].next.style.left)>0&&zxcDir==1){ setTimeout('zxcRotate()',10); }
else if (parseInt(zxcObj[0].next.style.left)<0&&zxcDir==-1){ setTimeout('zxcRotate()',10); }
else {
for (zxc1=0;zxc1<zxcObj.length;zxc1++){
zxcObj[zxc1].next.style.left='0px';
zxcObj[zxc1].last.style.left=(zxcObj[zxc1].last.offsetWidth*zxcDir)+'px';
}
setTimeout('zxcObj=null;',100);
}
}

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

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum