Menu
Hello everyone,
The code I have at present has a scrolling images and is pasted below. I need an onclick event for the images to open a larger version in a div, say 480×320 in the centre of the page. I can manage the css formatting but am clueless about javascript. Any help is appreciated.
Thanks.
The following is the code.
[COLOR=”DarkOrange”]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“
<html xmlns=”
<head>
<title></title>
<style type=”text/css”>
/*<![CDATA[
.SS {
position:relative;width:500px;height:140px;border:solid black 1px;
}
/*]]>
</style>
</head>
<body>
<div id=”tst0″ class=”SS” onmouseover=”SS0.Speed=0;” onmouseout=”SS0.Speed=1;”>
<div >
<a href=”http://”><img src=”
<a href=”http://”><img src=”
<a href=”http://”><img src=”
<a href=”http://”><img src=”
<a href=”http://”><img src=”
</div>
</div>
<div id=”tst1″ class=”SS” onmouseover=”SS1.Speed=0;” onmouseout=”SS1.Speed=2;”>
<div >
<a href=”http://”><img src=”
<a href=”http://”><img src=”
<a href=”http://”><img src=”
<a href=”http://”><img src=”
<a href=”http://”><img src=”
</div>
</div>
<div id=”tst2″ class=”SS” onmouseover=”SS2.Speed=0;” onmouseout=”SS2.Speed=3;”>
<div >
<a href=”http://”><img src=”
<a href=”http://”><img src=”
<a href=”http://”><img src=”
<a href=”http://”><img src=”
<a href=”http://”><img src=”
</div>
</div>
<div id=”tst3″ class=”SS” onmouseover=”SS3.Speed=0;” onmouseout=”SS3.Speed=4;”>
<div >
<a href=”http://”><img src=”
<a href=”http://”><img src=”
<a href=”http://”><img src=”
<a href=”http://”><img src=”
<a href=”http://”><img src=”
</div>
</div>
<script type=”text/javascript”>
/*<![CDATA[
function zxcConveyorBelt(o){
var obj=document.getElementById(o.ID);
obj.style.overflow=’hidden’;
var slide=obj.getElementsByTagName(‘DIV’)[0];
slide.style.position=’absolute’;
slide.style.left=’0px’;
slide.style.top=’0px’;
slide.style.width=’20000px’;
for (var clds=slide.childNodes,ary=[],z0=0;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
ary.push(clds[z0]);
}
}
this.min=ary[ary.length-1].offsetLeft+ary[1].offsetLeft+(o.Gap||0);
lft=-this.min;
slide.style.left=lft+’px’;
this.slides=[slide];
while (lft<obj.offsetWidth){
lft+=this.min;
slide=this.slides[0].cloneNode(true);
slide.style.left=lft+’px’;
obj.appendChild(slide);
this.slides.push(slide);
}
this.Speed=o.Speed||1;
this.scroll();
}
zxcConveyorBelt.prototype.scroll=function(){
for (var oop=this,lft,z0=0;z0<this.slides.length;z0++){
lft=parseInt(this.slides[z0].style.left);
this.slides[z0].style.left=lft-this.Speed+’px’;
if (lft-this.Speed<-this.min){
this.slides[z0].style.left=lft-this.Speed+this.min*this.slides.length+’px’;
}
}
setTimeout(function(){ oop.scroll(); },30)
}
var SS0=new zxcConveyorBelt({
ID:’tst0′,
Speed:1,
Gap:5
});
var SS1=new zxcConveyorBelt({
ID:’tst1′,
Speed:2,
Gap:5
});
var SS2=new zxcConveyorBelt({
ID:’tst2′,
Speed:3,
Gap:5
});
var SS3=new zxcConveyorBelt({
ID:’tst3′,
Speed:4,
Gap:5
});
/*]]>
</script>
</body>
</html>