...

View Full Version : Mouseover with Fade effect to display larger image.



Golden_Eagle
05-07-2007, 03:19 AM
Hi, not been here for a while. But thought I'd try my luck with a question I solved ages ago. I'm very rusty on JS lately so please bear with me. I'll try and explain what I need.

I have created this in the past and know it is very possible, this was almost 4 years ago though and I've unfortunately lost it.

Right...
I wish to create a 4x4 table, and merge the center 4 cells together (relatively easy). Leaving 12 cells around the edge. Each of these cells will be a perfect square. Within these 12 cells would be a faded image. When the mouse hovers over the images, it would change opacity to full and fade in that particular image within the 4 merged cells in the center larger.

If anyone can cypher what I trying to achieve and perhaps help me clear the rustiness in order to achieve this I'd appreciate it alot.

I dont believe it's too difficult, but cannot remember to much about JS. :(

One other thing is, I cannot use the HEAD tag to store JS scripts into. I'm cetain though that the script tag can be used within the body tag anyway.

Please correct me if I'm wrong anywhere.

Thanx in advance.
Golden_Eagle

vwphillips
05-08-2007, 02:18 AM
<!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">
<!--
// By Vic Phillips (08-May-2007) http://www.vicsjavascripts.org.uk


function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

var zxcEvt=0;

function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}



function zxcInitDisplay(zxcid,zxcspd){
var zxcp=document.getElementById(zxcid);
zxcp.lst=null;
var zxcimgs=zxcp.getElementsByTagName('IMG');
var zxclft=0;zxctop=0;zxcwh=zxcimgs[0].width;
zxcp.main=[];
for (var zxc0=0;zxc0<12;zxc0++){
zxcES(zxcimgs[zxc0],{position:'absolute',left:zxclft+'px',top:zxctop+'px',width:zxcwh+'px',height:zxcwh+'px'});
zxclft+=zxcwh;
zxclft=(zxc0==3||zxc0==5||zxc0==7)?0:(zxc0==4||zxc0==6)?zxcwh*3:zxclft;
zxctop=(zxc0==3||zxc0==5||zxc0==7)?zxctop+zxcwh:zxctop;
zxcOpacity(zxcimgs[zxc0],50);
zxcAddEvt(zxcimgs[zxc0],'zxcDisplayMse','mouseover');
zxcAddEvt(zxcimgs[zxc0],'zxcDisplayMse','mouseout');
zxcp.main[zxc0]=zxcES(zxcimgs[zxc0].cloneNode(false),{position:'absolute',left:zxcwh+'px',top:zxcwh+'px',width:zxcwh*2+'px',height:zxcw h*2+'px'},zxcp);
zxcp.main[zxc0].oop=new zxcDisplayOpac(zxcp.main[zxc0],zxcspd);
zxcOpacity(zxcp.main[zxc0],0);
}
}

function zxcDisplayMse(zxcevt){
zxcOpacity(this,(zxcevt.type=='mouseover')?100:50);
if (zxcevt.type=='mouseover'){
var zxcp=this.parentNode;
for (var zxc0=0;zxc0<zxcp.main.length;zxc0++){
zxcES(zxcp.main[zxc0],{zIndex:(zxcp.main[zxc0].src==this.src)?'1':'0'});
zxcp.main[zxc0].oop.opacud=(zxcp.main[zxc0].src==this.src)?1:-1;
zxcp.main[zxc0].oop.fade();
}
}
}

var zxcOOPCnt=0;

function zxcDisplayOpac(zxcimg,zxcspd){
this.to=null;
this.ref='zxc'+zxcOOPCnt++;
window[this.ref]=this;
this.opac=0;
this.img=zxcimg;
this.spd=zxcspd;
}

zxcDisplayOpac.prototype.fade=function(){
if ((this.opacud>0&&this.opac<100)||(this.opacud<0&&this.opac>0)){
zxcOpacity(this.img,this.opac+=this.opacud)
this.setTimeOut('fade()',this.spd);
}
}

zxcDisplayOpac.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}


function zxcOpacity(zxcobj,zxcopc) {
if (zxcopc<0||zxcopc>100){ return; }
if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')'; }
else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
}


//-->
</script>
</head>

<body onload="zxcInitDisplay('test',50);">
<div id="test" style="position:relative;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width="100" height="100" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" >
<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" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="100" height="100" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width="100" height="100" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" width="100" height="100" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif" width="100" height="100" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Eight.gif" width="100" height="100" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Nine.gif" width="100" height="100" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width="100" height="100" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" >

</div>



</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum