...

View Full Version : Modifying a fade script to work with rollovers



canadianjameson
07-07-2007, 01:40 AM
Hey,

I've been asked to make a webpage for a community organization in my area, and i figured i should. one thing I want to do is modify the image fade script below to allow for the following:

(see www.enviromark.ca/head/ for the layout described)

I havent decided between the two following ideas, ideas are welcome

1) whenever a user onmouseover's one of the gray images (links), it would fade from the gray image to the colored image, and then when they clicked a particular button the colored version (horizontal) would fade to gray and the gray image (now 100% faded to color) would remain colored.


or a tad simplere:
2) when the user clicks a button, it would fade from gray to color AS the colored version fades from color to gray.

here is Vic's fade script that has proven so useful in the past:

<!--
// by Vic Phillips (26-06-2005) http://www.vicsjavascripts.org.uk

var zxcSpeed=2;
var zxcDelay=1000;

var zxcIB,zxcIT,zxcTO;
var zxcCnt=0;
var zxcLk;

var loadedfor5seconds=false;
var fadeOnceOnly=(function(i){
return function(){
if(loadedfor5seconds && 0<i--)
zxcFadeLink('navHelper',null);};})(1);


function zxcFadeLink(obj,obj2){
if (zxcLk){ return }
zxcLk=true;
zxcIB=document.getElementById(obj);
zxcIT=document.getElementById(obj2);
if (zxcIT){ zxcIT.style.visibility='visible'; }
zxcFade();
}

function zxcFade(){
zxcCnt+=zxcSpeed;
if (zxcIB){ zxcOpacity(zxcIB,100-zxcCnt); }
if (zxcIT){ zxcOpacity(zxcIT,zxcCnt); }
if (zxcCnt<100){ zxcTO=setTimeout("zxcFade()",10); }
else {
if (zxcIB){ zxcOpacity(zxcIB,0); }
if (zxcIT){ zxcOpacity(zxcIT,100); }
zxcLk=false;
zxcCnt=0;

}
}

function zxcOpacity(obj,op) {
if (obj.style.MozOpacity!=null){ obj.style.MozOpacity=(op/100)-.001; }
else if (obj.style.opacity!=null){ obj.style.opacity=(op/100)-.001; }
else if (obj.style.filter!=null){ obj.style.filter = 'alpha(opacity='+op+')'; }
}


//-->

and here are the pages relevant to the site shown above:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/main.css" type="text/css">

<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

/*

*/
</script>

</head>

<body>
<div id="pageContainer">
<div id="topText"><img src="images/logoButtons/top_text.gif"></div>
<div id="logoC">
<img src="images/logoButtons/info_C.gif" id="info_C">
<img src="images/logoButtons/YPP_C.gif" id="YPP_C">
<img src="images/logoButtons/social_C.gif" id="social_C">
<img src="images/logoButtons/med_C.gif" id="med_C">
<img src="images/logoButtons/legal_C.gif" id="legal_C">
<img src="images/logoButtons/J2K_C.gif" id="J2K_C">
<img src="images/logoButtons/street_C.gif" id="street_C">
</div>
<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>

<div id="links_BW">
<a href="javascript:ajaxpage('test.htm', 'contentarea');"><img src="images/logoButtons/info_BW.jpg" id="info_BW"></a>
<img src="images/logoButtons/YPP_BW.jpg" id="YPP_BW">
<img src="images/logoButtons/social_BW.jpg" id="social_BW">
<img src="images/logoButtons/med_BW.jpg" id="med_BW">
<img src="images/logoButtons/legal_BW.jpg" id="legal_BW">
<img src="images/logoButtons/J2K_BW.jpg" id="J2K_BW">
<img src="images/logoButtons/street_BW.jpg" id="street_BW">
</div>
<div class="clear"></div>
<div id="contentarea"></div>

</div>
</body>
</html>



/* CSS Document */
* {
padding: 0;
margin: 0;
outline: 0;
}
html, body {
height:100%;
font-family: "verdana", trebuchet ms, arial, sans-serif;
font-size: 11px;
font-weight: bold;
}
* html #pageContainer {
height:100%;
}
* img {
border: 0
}
#pageContainer {
min-height: 100%;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
#topText {
position: relative;
margin-top:75px;
margin-left: 75px;
}
#logoC {
margin-left: 180px
}
#logoC img {
margin-left: -4px
}
#bottomText {
margin-left: 75px;
margin-top: -2px
}
#links_BW {
float: left;
position: absolute;
display: block;
margin-left: 75px;
margin-top: 25px;
width: 70px;
}
#topBorder {
position: relative;
display: block;
margin-top:75px;
margin-left: 75px;
}
#contentarea {
position: relative;
margin-left: 155px;
margin-top: 27px;
margin-right: 150px;
border: 1px solid black;
}
/*#info_BW, YPP_BW, social_BW, med_BW, legal_BW, J2K_BW, street_BW {
padding-bottom: 15px
} */


Thanks again

vwphillips
07-07-2007, 03:17 PM
As all ways I have trouble understanding your requirement and coping with your css(margins) but


<!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">
<!--
// Common Functions
// By Vic Phillips (30-June-2007) http://www.vicsjavascripts.org.uk


// Functional Code - No Need to Change

var zxcEvt=0;

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 zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcStyleRules(){
var zxcssheets=document.styleSheets;
var zxcruleary=[];
var zxcstyleary=[];
for (var zxc0=0;zxc0<zxcssheets.length;zxc0++){ zxcstyleary.push((document.all)?zxcssheets[zxc0].cssText:zxcssheets[zxc0]); }
if (document.all){
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
zxcstyleary[zxc1]=zxcstyleary[zxc1].split('}');
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].length-1;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1][zxc1a].replace(/\s/g,'')+'}');
}
}
}
else {
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].cssRules.length;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1].cssRules[zxc1a].cssText.replace(/\s/g,''));
}
}
}
return zxcruleary
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}

function zxcNoTxtNodes(zxcp){
var zxcclds=zxcp.childNodes,zxcary=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
return zxcclds;
}

function zxcMse(zxcevt){
if(!zxcevt) var zxcevt=window.event;
if (document.all) return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]];
return [zxcevt.pageX,zxcevt.pageY];
}

function zxcDocS(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}

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]; }
}
}

function zxcAddEvent(zxc,zxcfun,zxcevt){
if (zxc.addEvent){ return; }
zxc.addEvent=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'addEvent');
}

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

function zxcRemoveEvt(zxcfun,zxcevt){
if ( zxco.removeEventListener ){ zxco.removeEventListener(zxcevt,zxcfun,false); }
else if (zxco.detachEvent){ zxco.detachEvent('on'+zxcevt,zxcfun); }
}

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

function zxcInitImages(zxcid1,zxcid2){
var zxcp1=document.getElementById(zxcid1);
var zxcp2=document.getElementById(zxcid2);
var zxcimgs1=zxcp1.getElementsByTagName('IMG');
var zxcimgs2=zxcp2.getElementsByTagName('IMG');
zxcp2.ary=[];
for (var zxc1=0;zxc1<zxcimgs1.length;zxc1++) zxcp2.ary[zxc1]=[zxcimgs1[zxc1],zxcimgs2[zxc1],zxcES('DIV',{position:'absolute',left:(zxcimgs1[zxc1].offsetLeft)+'px',top:zxcimgs1[zxc1].offsetTop+'px',width:zxcimgs1[zxc1].width+'px',height:zxcimgs1[zxc1].height+'px',border:'solid black 0px'},zxcp1)];
for (var zxc2=0;zxc2<zxcp2.ary.length;zxc2++){
zxcp2.ary[zxc2][2].appendChild(zxcES(zxcp2.ary[zxc2][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'}));
zxcp2.ary[zxc2][2].appendChild(zxcES(zxcp2.ary[zxc2][1].cloneNode(false),{position:'absolute',zIndex:'1',left:'0px',top:'0px'}));
zxcAddEvt(zxcp2.ary[zxc2][2],'zxcMseOver','mouseover');
}
zxcp1.ary=[];
for (var zxc3=0;zxc3<zxcimgs2.length;zxc3++) zxcp1.ary[zxc3]=[zxcimgs2[zxc3],zxcimgs1[zxc3*2],zxcES('DIV',{position:'absolute',left:(zxcimgs2[zxc3].offsetLeft)+'px',top:zxcimgs2[zxc3].offsetTop+'px',width:zxcimgs2[zxc3].width+'px',height:zxcimgs2[zxc3].height+'px',border:'solid black 0px'},zxcp2)];
for (var zxc4=0;zxc4<zxcp1.ary.length;zxc4++){
zxcp1.ary[zxc4][2].appendChild(zxcES(zxcp1.ary[zxc4][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'}));
zxcp1.ary[zxc4][2].appendChild(zxcES(zxcp1.ary[zxc4][1].cloneNode(false),{position:'absolute',zIndex:'1',left:'0px',top:'0px'}));
zxcAddEvt(zxcp1.ary[zxc4][2],'zxcMseOver','mouseover');
}
}

function zxcMseOver(){
var zxcp=this.parentNode;
var zxcdivs=zxcp.getElementsByTagName('DIV');
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==this) break;
}
var zxcmirror=zxcp.ary[zxc0][2];
if (!zxcmirror.oop) zxcmirror.oop=new zxcFadeOOP(zxcmirror,zxc0);
zxcES(zxcmirror.getElementsByTagName('IMG')[0],{zIndex:'0'});
zxcmirror.oop.swap();
}

var zxcOOPCnt=0;

function zxcFadeOOP(zxcobj,zxcident){
this.to=null;
this.ref='oop'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj.childNodes[1];
this.inc=0;
this.opacity(0);
}

zxcFadeOOP.prototype.swap=function(){
if (this.inc<100){
this.opacity(this.inc++);
this.setTimeOut('swap()',10);
}
}

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

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

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

<body onload="zxcInitImages('logoC','links_BW')">
<div id="logoC" style="position:relative;width:600px;height:100px;">
<img src="http://www.enviromark.ca/head/images/logoButtons/info_C.gif" id="info_C">
<img src="http://www.enviromark.ca/head/images/logoButtons/YPP_C.gif" id="YPP_C">
<img src="http://www.enviromark.ca/head/images/logoButtons/social_C.gif" id="social_C">
<img src="http://www.enviromark.ca/head/images/logoButtons/med_C.gif" id="med_C">
<img src="http://www.enviromark.ca/head/images/logoButtons/legal_C.gif" id="legal_C">
<img src="http://www.enviromark.ca/head/images/logoButtons/J2K_C.gif" id="J2K_C">
<img src="http://www.enviromark.ca/head/images/logoButtons/street_C.gif" id="street_C">
</div>
<div id="links_BW" style="position:relative;width:10px;" >
<img src="http://www.enviromark.ca/head/images/logoButtons/info_BW.jpg" id="info_BW">
<img src="http://www.enviromark.ca/head/images/logoButtons/YPP_BW.jpg" id="YPP_BW">
<img src="http://www.enviromark.ca/head/images/logoButtons/social_BW.jpg" id="social_BW">
<img src="http://www.enviromark.ca/head/images/logoButtons/med_BW.jpg" id="med_BW">
<img src="http://www.enviromark.ca/head/images/logoButtons/legal_BW.jpg" id="legal_BW">
<img src="http://www.enviromark.ca/head/images/logoButtons/J2K_BW.jpg" id="J2K_BW">
<img src="http://www.enviromark.ca/head/images/logoButtons/street_BW.jpg" id="street_BW">

</div>

</body>

</html>

Note most of the initialising(additional images) may be best in the HTML

canadianjameson
07-07-2007, 04:42 PM
Thank you vic. I'm not at home so I will test this when I get back.

My margins are used to position my elements on the page. If you know of a cleaner way for me to position things in specific locations please let me know.

I'm sorry for not being clear about what I need, and I appreciate that you take the time to help me none the less.

I'll post again when I get home to test this, probably sunday night.

Thanks again

canadianjameson
07-08-2007, 02:29 AM
Fantastic, thank you Vic. The fade function is exactly what I was after.

There are a few fade conditions I was hoping you could help me program in. I will try to be as clear as possible, I know i sometimes explain things in a complicated way. I have explained it in such a way that if you have a copy of the code you posted to me, you should have no problems following

conditions for fade on the vertical images in <div id="links_BW">

onmouseover: when the user runs over an image in "links_BW", the fade from gray to color should begin
onmouseout: when the user's mouse leaves that image, the fade should reverse and fade back to gray.
click: When the user clicks on one of the images in "links_BW", that image should continue to fade to color, and stay colored until another image is clicked.


conditions for fade on the horizontal images in <div id="logoC">

click on image in "links_BW": when an image is clicked in links_BW, the image like it in "logoC" should fade from color to gray, and stay that way until the next image in "links_BW" is clicked.

When the next image in "links_BW" is clicked, the image in "logoC" that was faded to gray (see point above) should fade back to color.



Thanks Vic, I really appreciate it.

vwphillips
07-08-2007, 05:41 PM
<!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">
<!--
// Common Functions
// By Vic Phillips (30-June-2007) http://www.vicsjavascripts.org.uk


// Functional Code - No Need to Change

var zxcEvt=0;

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 zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcStyleRules(){
var zxcssheets=document.styleSheets;
var zxcruleary=[];
var zxcstyleary=[];
for (var zxc0=0;zxc0<zxcssheets.length;zxc0++){ zxcstyleary.push((document.all)?zxcssheets[zxc0].cssText:zxcssheets[zxc0]); }
if (document.all){
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
zxcstyleary[zxc1]=zxcstyleary[zxc1].split('}');
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].length-1;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1][zxc1a].replace(/\s/g,'')+'}');
}
}
}
else {
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].cssRules.length;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1].cssRules[zxc1a].cssText.replace(/\s/g,''));
}
}
}
return zxcruleary
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}

function zxcNoTxtNodes(zxcp){
var zxcclds=zxcp.childNodes,zxcary=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
return zxcclds;
}

function zxcMse(zxcevt){
if(!zxcevt) var zxcevt=window.event;
if (document.all) return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]];
return [zxcevt.pageX,zxcevt.pageY];
}

function zxcDocS(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}

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]; }
}
}

function zxcAddEvent(zxc,zxcfun,zxcevt){
if (zxc.addEvent){ return; }
zxc.addEvent=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'addEvent');
}

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

function zxcRemoveEvt(zxcfun,zxcevt){
if ( zxco.removeEventListener ){ zxco.removeEventListener(zxcevt,zxcfun,false); }
else if (zxco.detachEvent){ zxco.detachEvent('on'+zxcevt,zxcfun); }
}

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; }
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
var zxcft;
if (zxce.type=='mouseout'){ zxcft=zxcEventTo(zxce); }
else { zxcft=zxcEventFrom(zxce); }
if (zxcft.oop){ return false; }
while (zxcft.parentNode){
if (zxcft.oop){ return false; }
zxcft=zxcft.parentNode;
}
return true;
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
var zxceobj=(zxce.relatedTarget)?zxce.relatedTarget:(zxce.type=='mouseout')?zxce.toElement:zxce.fromElem ent;
while (zxceobj.parentNode){
if (window['zxc'+zxceobj.id]){ return false; }
zxceobj=zxceobj.parentNode;
}
return true;
}

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

function zxcInitImages(zxcid1,zxcid2){
var zxcp1=document.getElementById(zxcid1);
var zxcp2=document.getElementById(zxcid2);
zxcNoTxtNodes(zxcp1);
zxcNoTxtNodes(zxcp2);
var zxcimgs1=zxcp1.getElementsByTagName('IMG');
var zxcimgs2=zxcp2.getElementsByTagName('IMG');
zxcp2.mirror=[];
zxcp2.ary=[];
for (var zxc1=0;zxc1<zxcimgs1.length;zxc1++) zxcp2.mirror[zxc1]=[zxcimgs1[zxc1],zxcimgs2[zxc1],zxcES('DIV',{position:'absolute',left:(zxcimgs1[zxc1].offsetLeft)+'px',top:zxcimgs1[zxc1].offsetTop+'px',width:zxcimgs1[zxc1].width+'px',height:zxcimgs1[zxc1].height+'px',border:'solid black 0px'},zxcp1)];
for (var zxc3=0;zxc3<zxcimgs2.length;zxc3++) zxcp2.ary[zxc3]=[zxcimgs2[zxc3],zxcimgs1[zxc3],zxcES('DIV',{position:'absolute',left:(zxcimgs2[zxc3].offsetLeft)+'px',top:zxcimgs2[zxc3].offsetTop+'px',width:zxcimgs2[zxc3].width+'px',height:zxcimgs2[zxc3].height+'px',border:'solid black 0px'},zxcp2)];
for (var zxc2=0;zxc2<zxcp2.mirror.length;zxc2++){
zxcES(zxcp2.mirror[zxc2][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.mirror[zxc2][2]);
var zxcdiv=zxcES(zxcp2.mirror[zxc2][2].cloneNode(false),{left:'0px',top:'0px'},zxcp2.mirror[zxc2][2])
zxcES(zxcp2.mirror[zxc2][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
}
for (var zxc4=0;zxc4<zxcp2.ary.length;zxc4++){
zxcES(zxcp2.ary[zxc4][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.ary[zxc4][2]);
var zxcdiv=zxcES(zxcp2.ary[zxc4][2].cloneNode(false),{position:'absolute',zIndex:'1',left:'0px',top:'0px'},zxcp2.ary[zxc4][2])
zxcES(zxcp2.ary[zxc4][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseover');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseout');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','click');
}
zxcp2.hold=null;
zxcp2.holdmirror=null;
}

function zxcMseOverOut(zxcevt){
var zxcp=this.parentNode;
var zxcdivs=zxcp.childNodes;
if (zxcevt.type=='click'){
if (zxcp.hold) zxcFadeDo(zxcp.hold,'mouseout');
zxcp.hold=this;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==this) break;
}
if (zxcp.holdmirror) zxcFadeDo(zxcp.holdmirror,'mouseout');
zxcp.holdmirror=zxcp.mirror[zxc0][2];
zxcFadeDo(zxcp.holdmirror,'mouseover');
}
else if (this!=zxcp.hold){
zxcFadeDo(this,zxcevt.type);
}
}

function zxcFadeDo(zxcobj,zxcmde){
if (!zxcCkOpactiy(zxcobj)) zxcES(zxcobj.childNodes[0],{zIndex:(zxcevt.type=='mouseover')?'0':'2'});
if (!zxcobj.oop) zxcobj.oop=new zxcFadeOOP(zxcobj);
clearTimeout(zxcobj.oop.to);
zxcobj.oop.ud=(zxcmde=='mouseover')?1:-1;
zxcobj.oop.swap();
}

function zxcCkOpactiy(zxcobj){
if (zxcobj.style.MozOpacity!=null&&zxcobj.style.opacity!=null&&zxcobj.style.filter!=null&&zxcobj.KHTMLOpacity!=null) return false;
return true;
}

var zxcOOPCnt=0;

function zxcFadeOOP(zxcobj,zxcident){
this.to=null;
this.ref='oop'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj.childNodes[1];
zxcES(zxcobj.childNodes[0],{zIndex:'0'});
this.ud=0;
this.inc=0;
this.opacity(0);
}

zxcFadeOOP.prototype.swap=function(){
if ((this.ud>0&&this.inc<100)||(this.ud<0&&this.inc>0)){
this.opacity(this.inc+=this.ud);
this.setTimeOut('swap()',10);
}
}

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

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

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

<body onload="zxcInitImages('logoC','links_BW')">
<div id="logoC" style="position:relative;width:600px;height:100px;">
<img src="http://www.enviromark.ca/head/images/logoButtons/info_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/YPP_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/social_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/med_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/legal_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/J2K_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/street_C.gif" >
</div>
<div id="links_BW" style="position:relative;width:10px;" >
<img src="http://www.enviromark.ca/head/images/logoButtons/info_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/YPP_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/social_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/med_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/legal_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/J2K_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/street_BW.jpg" >

</div>
<div id="pp" style="position:relative;left:100px;" >

conditions for fade on the vertical images in div id="links_BW"><br>

* onmouseover: when the user runs over an image in "links_BW", the fade from gray to color should begin<br>
* onmouseout: when the user's mouse leaves that image, the fade should reverse and fade back to gray.<br>
* click: When the user clicks on one of the images in "links_BW",<br>
that image should continue to fade to color, and stay colored until another image is clicked.<br>

<br>

conditions for fade on the horizontal images in div id="logoC"><br>

* click on image in "links_BW":<br>
when an image is clicked in links_BW, the image like it in "logoC" should fade from color to gray,
and stay that way until the next image in "links_BW" is clicked.<br>
<br>
o When the next image in "links_BW" is clicked,<br>
the image in "logoC" that was faded to gray (see point above) should fade back to color.<br>
<br>
<br>
I left my common function in as they may be usefull(only two are used).
<br>
<br>
I have removed the image id(s) as the ids are duplicated in cloning and can see no use for them.
<br>
<br>
The DIVs can be poitioned left and to to acieve the required layout without using margins.
<br>
<br>
</div>
</body>

</html>

canadianjameson
07-08-2007, 07:37 PM
absolutely FANTASTIC!

Vic you're a genius, that is exactly what I wanted.

I have one or two very small additional requests: one that i forgot and one or two that I noticed while testing the new and fantastic script :D They should be simple.


I will have a button for 'home' that will need to reset the images to their default states
is it possible to set a minimum level of opacity to achieve during the onmouseover? for ex: even if a user onmouseover's an image in "links_BW" for 1/10 of a second, it will still fade to 50% color before fading back to gray?
Lastly: I tried to change the speed at which it fades by modifying this.setTimeOut('swap()',10);, but i couldn't get it to go faster by setting it below 10. even if I set it to 1 it seems to fade as fast as at 10. should I be modifying something else to change the speed?


Once again, thank you so much

p.s: you were right about the image id's... they were rather useless :)

vwphillips
07-08-2007, 10:43 PM
<!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">
<!--
// Common Functions
// By Vic Phillips (30-June-2007) http://www.vicsjavascripts.org.uk


// Functional Code - No Need to Change

var zxcEvt=0;

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 zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcStyleRules(){
var zxcssheets=document.styleSheets;
var zxcruleary=[];
var zxcstyleary=[];
for (var zxc0=0;zxc0<zxcssheets.length;zxc0++){ zxcstyleary.push((document.all)?zxcssheets[zxc0].cssText:zxcssheets[zxc0]); }
if (document.all){
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
zxcstyleary[zxc1]=zxcstyleary[zxc1].split('}');
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].length-1;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1][zxc1a].replace(/\s/g,'')+'}');
}
}
}
else {
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].cssRules.length;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1].cssRules[zxc1a].cssText.replace(/\s/g,''));
}
}
}
return zxcruleary
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}

function zxcNoTxtNodes(zxcp){
var zxcclds=zxcp.childNodes,zxcary=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
return zxcclds;
}

function zxcMse(zxcevt){
if(!zxcevt) var zxcevt=window.event;
if (document.all) return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]];
return [zxcevt.pageX,zxcevt.pageY];
}

function zxcDocS(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}

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]; }
}
}

function zxcAddEvent(zxc,zxcfun,zxcevt){
if (zxc.addEvent){ return; }
zxc.addEvent=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'addEvent');
}

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

function zxcRemoveEvt(zxcfun,zxcevt){
if ( zxco.removeEventListener ){ zxco.removeEventListener(zxcevt,zxcfun,false); }
else if (zxco.detachEvent){ zxco.detachEvent('on'+zxcevt,zxcfun); }
}

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; }
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
var zxcft;
if (zxce.type=='mouseout'){ zxcft=zxcEventTo(zxce); }
else { zxcft=zxcEventFrom(zxce); }
if (zxcft.oop){ return false; }
while (zxcft.parentNode){
if (zxcft.oop){ return false; }
zxcft=zxcft.parentNode;
}
return true;
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
var zxceobj=(zxce.relatedTarget)?zxce.relatedTarget:(zxce.type=='mouseout')?zxce.toElement:zxce.fromElem ent;
while (zxceobj.parentNode){
if (window['zxc'+zxceobj.id]){ return false; }
zxceobj=zxceobj.parentNode;
}
return true;
}

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

function zxcResetImages(zxcid2){
var zxcp=document.getElementById(zxcid2);
zxcp.hold=null;
if (zxcp.ary){
for (var zxc0=0;zxc0<zxcp.ary.length;zxc0++){
if (zxcp.mirror[zxc0][2].oop){
zxcp.mirror[zxc0][2].oop.inc=0;
zxcOpacity(zxcp.mirror[zxc0][2].childNodes[1],0);
if (!zxcCkOpactiy(zxcp.mirror[zxc0][2])) zxcES(zxcp.mirror[zxc0][2].childNodes[0],{zIndex:'2'});
}
if (zxcp.ary[zxc0][2].oop){
zxcp.ary[zxc0][2].oop.inc=0;
zxcOpacity(zxcp.ary[zxc0][2].childNodes[1],0);
if (!zxcCkOpactiy(zxcp.ary[zxc0][2])) zxcES(zxcp.ary[zxc0][2].childNodes[0],{zIndex:'2'});
}
}
}
}

function zxcInitImages(zxcid1,zxcid2){
var zxcp1=document.getElementById(zxcid1);
var zxcp2=document.getElementById(zxcid2);
zxcNoTxtNodes(zxcp1);
zxcNoTxtNodes(zxcp2);
var zxcimgs1=zxcp1.getElementsByTagName('IMG');
var zxcimgs2=zxcp2.getElementsByTagName('IMG');
zxcp2.mirror=[];
zxcp2.ary=[];
for (var zxc1=0;zxc1<zxcimgs1.length;zxc1++) zxcp2.mirror[zxc1]=[zxcimgs1[zxc1],zxcimgs2[zxc1],zxcES('DIV',{position:'absolute',left:(zxcimgs1[zxc1].offsetLeft)+'px',top:zxcimgs1[zxc1].offsetTop+'px',width:zxcimgs1[zxc1].width+'px',height:zxcimgs1[zxc1].height+'px',border:'solid black 0px'},zxcp1)];
for (var zxc3=0;zxc3<zxcimgs2.length;zxc3++) zxcp2.ary[zxc3]=[zxcimgs2[zxc3],zxcimgs1[zxc3],zxcES('DIV',{position:'absolute',left:(zxcimgs2[zxc3].offsetLeft)+'px',top:zxcimgs2[zxc3].offsetTop+'px',width:zxcimgs2[zxc3].width+'px',height:zxcimgs2[zxc3].height+'px',border:'solid black 0px'},zxcp2)];
for (var zxc2=0;zxc2<zxcp2.mirror.length;zxc2++){
zxcES(zxcp2.mirror[zxc2][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.mirror[zxc2][2]);
var zxcdiv=zxcES(zxcp2.mirror[zxc2][2].cloneNode(false),{left:'0px',top:'0px'},zxcp2.mirror[zxc2][2])
zxcES(zxcp2.mirror[zxc2][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
}
for (var zxc4=0;zxc4<zxcp2.ary.length;zxc4++){
zxcES(zxcp2.ary[zxc4][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.ary[zxc4][2]);
var zxcdiv=zxcES(zxcp2.ary[zxc4][2].cloneNode(false),{position:'absolute',zIndex:'1',left:'0px',top:'0px'},zxcp2.ary[zxc4][2])
zxcES(zxcp2.ary[zxc4][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseover');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseout');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','click');
}
zxcp2.hold=null;
zxcp2.holdmirror=null;
}

function zxcMseOverOut(zxcevt){
var zxcp=this.parentNode;
var zxcdivs=zxcp.childNodes;
if (zxcevt.type=='click'){
if (zxcp.hold) zxcFadeDo(zxcp.hold,'mouseout');
zxcp.hold=this;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==this) break;
}
if (zxcp.holdmirror) zxcFadeDo(zxcp.holdmirror,'mouseout');
zxcp.holdmirror=zxcp.mirror[zxc0][2];
zxcFadeDo(zxcp.holdmirror,'mouseover');
}
else if (this!=zxcp.hold){
zxcFadeDo(this,zxcevt.type);
}
}

function zxcFadeDo(zxcobj,zxcmde){
if (!zxcCkOpactiy(zxcobj)) zxcES(zxcobj.childNodes[0],{zIndex:(zxcevt.type=='mouseover')?'0':'2'});
if (!zxcobj.oop) zxcobj.oop=new zxcFadeOOP(zxcobj);
clearTimeout(zxcobj.oop.to);
zxcobj.oop.ud=(zxcmde=='mouseover')?2:-2; // adjust speed here
zxcobj.oop.swap();
}

function zxcCkOpactiy(zxcobj){
if (zxcobj.style.MozOpacity!=null&&zxcobj.style.opacity!=null&&zxcobj.style.filter!=null&&zxcobj.KHTMLOpacity!=null) return false;
return true;
}

var zxcOOPCnt=0;

function zxcFadeOOP(zxcobj,zxcident){
this.to=null;
this.ref='oop'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj.childNodes[1];
zxcES(zxcobj.childNodes[0],{zIndex:'0'});
this.ud=0;
this.inc=0;
this.opacity(0);
}

zxcFadeOOP.prototype.swap=function(){
if ((this.ud>0&&this.inc<100-this.ud)||(this.ud<0&&this.inc>0-this.ud)){
this.opacity(this.inc+=this.ud);
this.setTimeOut('swap()',10);
}
}

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

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

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

<body onload="zxcInitImages('logoC','links_BW')">
<input type="button" name="" value="Reset" onclick="zxcResetImages('links_BW')">
<div id="logoC" style="position:relative;width:600px;height:100px;">
<img src="http://www.enviromark.ca/head/images/logoButtons/info_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/YPP_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/social_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/med_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/legal_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/J2K_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/street_C.gif" >
</div>
<div id="links_BW" style="position:relative;width:10px;" >
<img src="http://www.enviromark.ca/head/images/logoButtons/info_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/YPP_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/social_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/med_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/legal_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/J2K_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/street_BW.jpg" >

</div>
<div id="pp" style="position:relative;left:100px;" >
* I will have a button for 'home' that will need to reset the images to their default states<br>
DONE<br>
<br>
<br>
* is it possible to set a minimum level of opacity to achieve during the onmouseover?
for ex: even if a user onmouseover's an image in "links_BW" for 1/10 of a second, it will still fade to 50% color before fading back to gray?
<br> LOT&nbsp;of EFFORT&nbsp;Rqd.<br>
<br>
* Lastly: I tried to change the speed at which it fades by modifying this.setTimeOut('swap()',10);, but i couldn't get it to go faster by setting it below 10. even if I set it to 1 it seems to fade as fast as at 10. should I be modifying something else to change the speed?
conditions for fade on the vertical images in div id="links_BW"><br>
SEE Line 228<br>
<br>
<br>
* onmouseover: when the user runs over an image in "links_BW", the fade from gray to color should begin<br>
* onmouseout: when the user's mouse leaves that image, the fade should reverse and fade back to gray.<br>
* click: When the user clicks on one of the images in "links_BW",<br>
that image should continue to fade to color, and stay colored until another image is clicked.<br>

<br>

conditions for fade on the horizontal images in div id="logoC"><br>

* click on image in "links_BW":<br>
when an image is clicked in links_BW, the image like it in "logoC" should fade from color to gray,
and stay that way until the next image in "links_BW" is clicked.<br>
<br>
o When the next image in "links_BW" is clicked,<br>
the image in "logoC" that was faded to gray (see point above) should fade back to color.<br>
<br>
<br>
I left my common function in as they may be usefull(only two are used).
<br>
<br>
I have removed the image id(s) as the ids are duplicated in cloning and can see no use for them.
<br>
<br>
The DIVs can be poitioned left and to to acieve the required layout without using margins.
<br>
<br>
</div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
<input size=10 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>
</body>

</html>

vwphillips
07-09-2007, 12:10 AM
done the delay thing anyway


<!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">
<!--
// Common Functions
// By Vic Phillips (30-June-2007) http://www.vicsjavascripts.org.uk


// Functional Code - No Need to Change

var zxcEvt=0;

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 zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcStyleRules(){
var zxcssheets=document.styleSheets;
var zxcruleary=[];
var zxcstyleary=[];
for (var zxc0=0;zxc0<zxcssheets.length;zxc0++){ zxcstyleary.push((document.all)?zxcssheets[zxc0].cssText:zxcssheets[zxc0]); }
if (document.all){
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
zxcstyleary[zxc1]=zxcstyleary[zxc1].split('}');
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].length-1;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1][zxc1a].replace(/\s/g,'')+'}');
}
}
}
else {
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].cssRules.length;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1].cssRules[zxc1a].cssText.replace(/\s/g,''));
}
}
}
return zxcruleary
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}

function zxcNoTxtNodes(zxcp){
var zxcclds=zxcp.childNodes,zxcary=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
return zxcclds;
}

function zxcMse(zxcevt){
if(!zxcevt) var zxcevt=window.event;
if (document.all) return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]];
return [zxcevt.pageX,zxcevt.pageY];
}

function zxcDocS(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}

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]; }
}
}

function zxcAddEvent(zxc,zxcfun,zxcevt){
if (zxc.addEvent){ return; }
zxc.addEvent=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'addEvent');
}

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

function zxcRemoveEvt(zxcfun,zxcevt){
if ( zxco.removeEventListener ){ zxco.removeEventListener(zxcevt,zxcfun,false); }
else if (zxco.detachEvent){ zxco.detachEvent('on'+zxcevt,zxcfun); }
}

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; }
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
var zxcft;
if (zxce.type=='mouseout'){ zxcft=zxcEventTo(zxce); }
else { zxcft=zxcEventFrom(zxce); }
if (zxcft.oop){ return false; }
while (zxcft.parentNode){
if (zxcft.oop){ return false; }
zxcft=zxcft.parentNode;
}
return true;
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
var zxceobj=(zxce.relatedTarget)?zxce.relatedTarget:(zxce.type=='mouseout')?zxce.toElement:zxce.fromElem ent;
while (zxceobj.parentNode){
if (window['zxc'+zxceobj.id]){ return false; }
zxceobj=zxceobj.parentNode;
}
return true;
}

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

function zxcResetImages(zxcid2){
var zxcp=document.getElementById(zxcid2);
zxcp.hold=null;
if (zxcp.ary){
for (var zxc0=0;zxc0<zxcp.ary.length;zxc0++){
if (zxcp.mirror[zxc0][2].oop){
zxcp.mirror[zxc0][2].oop.inc=0;
zxcOpacity(zxcp.mirror[zxc0][2].childNodes[1],0);
if (!zxcCkOpactiy(zxcp.mirror[zxc0][2])) zxcES(zxcp.mirror[zxc0][2].childNodes[0],{zIndex:'2'});
}
if (zxcp.ary[zxc0][2].oop){
zxcp.ary[zxc0][2].oop.inc=0;
zxcOpacity(zxcp.ary[zxc0][2].childNodes[1],0);
if (!zxcCkOpactiy(zxcp.ary[zxc0][2])) zxcES(zxcp.ary[zxc0][2].childNodes[0],{zIndex:'2'});
}
}
}
}

function zxcInitImages(zxcid1,zxcid2){
var zxcp1=document.getElementById(zxcid1);
var zxcp2=document.getElementById(zxcid2);
zxcNoTxtNodes(zxcp1);
zxcNoTxtNodes(zxcp2);
var zxcimgs1=zxcp1.getElementsByTagName('IMG');
var zxcimgs2=zxcp2.getElementsByTagName('IMG');
zxcp2.mirror=[];
zxcp2.ary=[];
for (var zxc1=0;zxc1<zxcimgs1.length;zxc1++) zxcp2.mirror[zxc1]=[zxcimgs1[zxc1],zxcimgs2[zxc1],zxcES('DIV',{position:'absolute',left:(zxcimgs1[zxc1].offsetLeft)+'px',top:zxcimgs1[zxc1].offsetTop+'px',width:zxcimgs1[zxc1].width+'px',height:zxcimgs1[zxc1].height+'px',border:'solid black 0px'},zxcp1)];
for (var zxc3=0;zxc3<zxcimgs2.length;zxc3++) zxcp2.ary[zxc3]=[zxcimgs2[zxc3],zxcimgs1[zxc3],zxcES('DIV',{position:'absolute',left:(zxcimgs2[zxc3].offsetLeft)+'px',top:zxcimgs2[zxc3].offsetTop+'px',width:zxcimgs2[zxc3].width+'px',height:zxcimgs2[zxc3].height+'px',border:'solid black 0px'},zxcp2)];
for (var zxc2=0;zxc2<zxcp2.mirror.length;zxc2++){
zxcES(zxcp2.mirror[zxc2][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.mirror[zxc2][2]);
var zxcdiv=zxcES(zxcp2.mirror[zxc2][2].cloneNode(false),{left:'0px',top:'0px'},zxcp2.mirror[zxc2][2])
zxcES(zxcp2.mirror[zxc2][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
}
for (var zxc4=0;zxc4<zxcp2.ary.length;zxc4++){
zxcES(zxcp2.ary[zxc4][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.ary[zxc4][2]);
var zxcdiv=zxcES(zxcp2.ary[zxc4][2].cloneNode(false),{position:'absolute',zIndex:'1',left:'0px',top:'0px'},zxcp2.ary[zxc4][2])
zxcES(zxcp2.ary[zxc4][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseover');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseout');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','click');
}
zxcp2.hold=null;
zxcp2.holdmirror=null;
}

function zxcMseOverOut(zxcevt){
var zxcp=this.parentNode;
var zxcdivs=zxcp.childNodes;
if (zxcevt.type=='click'){
if (zxcp.hold) zxcFadeDo(zxcp.hold,'mouseout');
zxcp.hold=this;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==this) break;
}
if (zxcp.holdmirror) zxcFadeDo(zxcp.holdmirror,'mouseout');
zxcp.holdmirror=zxcp.mirror[zxc0][2];
zxcFadeDo(zxcp.holdmirror,'mouseover');
}
else if (this!=zxcp.hold){
zxcFadeDo(this,zxcevt.type);
}
}

function zxcFadeDo(zxcobj,zxcmde){
if (!zxcCkOpactiy(zxcobj)) zxcES(zxcobj.childNodes[0],{zIndex:(zxcevt.type=='mouseover')?'0':'2'});
if (!zxcobj.oop) zxcobj.oop=new zxcFadeOOP(zxcobj);
clearTimeout(zxcobj.oop.to);
zxcobj.oop.ud=(zxcmde=='mouseover')?2:-2; // adjust speed here
document.Show.Show1.value=(zxcobj.oop.ud<0&&zxcobj.oop.inc<50);
if (zxcobj.oop.ud<0&&zxcobj.oop.inc<50) zxcobj.oop.cont();
else zxcobj.oop.swap();
}

function zxcCkOpactiy(zxcobj){
if (zxcobj.style.MozOpacity!=null&&zxcobj.style.opacity!=null&&zxcobj.style.filter!=null&&zxcobj.KHTMLOpacity!=null) return false;
return true;
}

var zxcOOPCnt=0;

function zxcFadeOOP(zxcobj,zxcident){
this.to=null;
this.ref='oop'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj.childNodes[1];
zxcES(zxcobj.childNodes[0],{zIndex:'0'});
this.ud=0;
this.inc=0;
this.opacity(0);
}

zxcFadeOOP.prototype.swap=function(){
if ((this.ud>0&&this.inc<=100-this.ud)||(this.ud<0&&this.inc>=0-this.ud)){
this.opacity(this.inc+=this.ud);
this.setTimeOut('swap()',10);
}
}

zxcFadeOOP.prototype.cont=function(){
if ((this.ud<0&&this.inc<50)||(this.ud>0&&this.inc>0)){
this.opacity(this.inc-=this.ud);
this.setTimeOut('cont()',10);
}
else if (this.ud<0&&this.inc>0){
this.ud=-this.ud
this.setTimeOut('cont()',10);
}
}

zxcFadeOOP.prototype.cont2=function(){
if (this.inc<0){
this.opacity(this.inc-=this.ud);
this.setTimeOut('cont2()',10);
}
}
zxcFadeOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}

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

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

<body onload="zxcInitImages('logoC','links_BW')">
<input type="button" name="" value="Reset" onclick="zxcResetImages('links_BW')">
<div id="logoC" style="position:relative;width:600px;height:100px;">
<img src="http://www.enviromark.ca/head/images/logoButtons/info_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/YPP_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/social_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/med_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/legal_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/J2K_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/street_C.gif" >
</div>
<div id="links_BW" style="position:relative;width:10px;" >
<img src="http://www.enviromark.ca/head/images/logoButtons/info_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/YPP_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/social_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/med_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/legal_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/J2K_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/street_BW.jpg" >

</div>
<div id="pp" style="position:relative;left:100px;" >
* I will have a button for 'home' that will need to reset the images to their default states<br>
DONE<br>
<br>
<br>
* is it possible to set a minimum level of opacity to achieve during the onmouseover?
for ex: even if a user onmouseover's an image in "links_BW" for 1/10 of a second, it will still fade to 50% color before fading back to gray?
<br> LOT&nbsp;of EFFORT&nbsp;Rqd.<br>
<br>
* Lastly: I tried to change the speed at which it fades by modifying this.setTimeOut('swap()',10);, but i couldn't get it to go faster by setting it below 10. even if I set it to 1 it seems to fade as fast as at 10. should I be modifying something else to change the speed?
conditions for fade on the vertical images in div id="links_BW"><br>
SEE Line 228<br>
<br>
<br>
* onmouseover: when the user runs over an image in "links_BW", the fade from gray to color should begin<br>
* onmouseout: when the user's mouse leaves that image, the fade should reverse and fade back to gray.<br>
* click: When the user clicks on one of the images in "links_BW",<br>
that image should continue to fade to color, and stay colored until another image is clicked.<br>

<br>

conditions for fade on the horizontal images in div id="logoC"><br>

* click on image in "links_BW":<br>
when an image is clicked in links_BW, the image like it in "logoC" should fade from color to gray,
and stay that way until the next image in "links_BW" is clicked.<br>
<br>
o When the next image in "links_BW" is clicked,<br>
the image in "logoC" that was faded to gray (see point above) should fade back to color.<br>
<br>
<br>
I left my common function in as they may be usefull(only two are used).
<br>
<br>
I have removed the image id(s) as the ids are duplicated in cloning and can see no use for them.
<br>
<br>
The DIVs can be poitioned left and to to acieve the required layout without using margins.
<br>
<br>
</div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
<input size=10 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=10 cols=100 ></textarea>
</form>
</body>

</html>

canadianjameson
07-09-2007, 03:11 PM
Hey Vic,

Thank you, this is just what I wanted. I am a little confused about what the form is at the end is for, could you give me a quick explanation?

I was wondering if it would be easy to modify the zxcResetImages('links_BW') function to fade the images back the their defaults instead of just resetting them instantly like it does now?

This is amazing Vic... I can't tell you how great this is. Thank you for adding in the delay as well. I feel bad because it must have taken you some time to do it, but I want you to know that it looks fantastic! Is there a place in the code where I can adjust the 'delay period'?
If not thats alright, i just figured I was missing the code like i did with:
zxcobj.oop.ud=(zxcmde=='mouseover')?2:-2; // adjust speed here

Thanks again vic, this looks great!

canadianjameson
07-09-2007, 04:30 PM
Hi Vic,

I noticed a few small glitches:

If I click a second time on an image in links_BW (double-click slowly), the image fades back from colored to gray and stays that way. Can you set the script to verify that an image in links_BW is not already "set to color" to avoid this?

I tried to add a link to the first image in links_BW and it breaks the script. The link doesn't open or even show the 'hand' cursor, and it causes the wrong image in "logoC" to fade to gray

also, I tried to put the script in it's own .js file and call it, but the script gave me errors if i take it out of the html... is this normal?

Sorry for this Vic. It is truly an amazing script though :)

vwphillips
07-09-2007, 11:39 PM
function zxcResetImages(zxcid2){
var zxcp=document.getElementById(zxcid2);
zxcp.hold=null;
if (zxcp.ary){
for (var zxc0=0;zxc0<zxcp.ary.length;zxc0++){
if (zxcp.mirror[zxc0][2].oop){
if (zxcp.mirror[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.mirror[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.mirror[zxc0][2])) zxcES(zxcp.mirror[zxc0][2].childNodes[0],{zIndex:'2'});
if (zxcp.ary[zxc0][2].oop){
if (zxcp.ary[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.ary[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.ary[zxc0][2])) zxcES(zxcp.ary[zxc0][2].childNodes[0],{zIndex:'2'});
}
}
}

vwphillips
07-09-2007, 11:56 PM
// to fix
* If I click a second time on an image in links_BW (double-click slowly), the image fades back from colored to gray and stays that way. Can you set the script to verify that an image in links_BW is not already "set to color" to avoid this?


function zxcMseOverOut(zxcevt){
var zxcp=this.parentNode;
var zxcdivs=zxcp.childNodes;
if (zxcevt.type=='click'){
if (zxcp.hold&&zxcp.hold!=this) zxcFadeDo(zxcp.hold,'mouseout');
zxcp.hold=this;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==this) break;
}
if (zxcp.holdmirror) zxcFadeDo(zxcp.holdmirror,'mouseout');
zxcp.holdmirror=zxcp.mirror[zxc0][2];
zxcFadeDo(zxcp.holdmirror,'mouseover');
}
else if (this!=zxcp.hold){
zxcFadeDo(this,zxcevt.type);
}
}




* I tried to add a link to the first image in links_BW and it breaks the script. The link doesn't open or even show the 'hand' cursor, and it causes the wrong image in "logoC" to fade to gray


Due to cloning links of horizontal images will appear as the link of the vertical rollover image. Will be necessary to swap the link with the link of the mouse out image.
I need examples of how you are applying links.



also, I tried to put the script in it's own .js file and call it, but the script gave me errors if i take it out of the html... is this normal?

No reason why but I am not testing this until ALL new requirements have been incorporated.

canadianjameson
07-10-2007, 12:57 AM
Hi Vic,

I think how you broke your response down is perfect, please do that in the future :)

For the links: I am using this script (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm) for my links, so the link is being activated by
<a href="javascript:ajaxpage('test.htm', 'contentarea'); loadobjs('css/pages.css')"><img src="images/logoButtons/info_BW.jpg" ></a> if that helps :)

apart from that, the only other question I had was regarding how to change the default onmouseover delay that you spent time adding in. I assume it is set to .X seconds... i just wanted to know how to change that (if i can, for later use)

I only had one other idea, but please dont spend too much time because it is really a 'if I want to use it later idea'.
as the onmouseover fading of the links_BW occurs, perhaps it would be cool to be able to have the corresponding images in "logoC" fade aswell.


Again if it's too much work please dont do it -- just a cool visual effect.

Vic, you're amazing!

vwphillips
07-10-2007, 01:45 AM
I have added an onclick event call to the first vertical image to count clicks in the debug form at the bottom.
Also done the fade horizontal image on mouse over/out of the vertical image.


<!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">
<!--
// Common Functions
// By Vic Phillips (30-June-2007) http://www.vicsjavascripts.org.uk


// Functional Code - No Need to Change

var zxcEvt=0;

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 zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcStyleRules(){
var zxcssheets=document.styleSheets;
var zxcruleary=[];
var zxcstyleary=[];
for (var zxc0=0;zxc0<zxcssheets.length;zxc0++){ zxcstyleary.push((document.all)?zxcssheets[zxc0].cssText:zxcssheets[zxc0]); }
if (document.all){
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
zxcstyleary[zxc1]=zxcstyleary[zxc1].split('}');
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].length-1;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1][zxc1a].replace(/\s/g,'')+'}');
}
}
}
else {
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].cssRules.length;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1].cssRules[zxc1a].cssText.replace(/\s/g,''));
}
}
}
return zxcruleary
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}

function zxcNoTxtNodes(zxcp){
var zxcclds=zxcp.childNodes,zxcary=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
return zxcclds;
}

function zxcMse(zxcevt){
if(!zxcevt) var zxcevt=window.event;
if (document.all) return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]];
return [zxcevt.pageX,zxcevt.pageY];
}

function zxcDocS(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}

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]; }
}
}

function zxcAddEvent(zxc,zxcfun,zxcevt){
if (zxc.addEvent){ return; }
zxc.addEvent=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'addEvent');
}

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

function zxcRemoveEvt(zxcfun,zxcevt){
if ( zxco.removeEventListener ){ zxco.removeEventListener(zxcevt,zxcfun,false); }
else if (zxco.detachEvent){ zxco.detachEvent('on'+zxcevt,zxcfun); }
}

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; }
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
var zxcft;
if (zxce.type=='mouseout'){ zxcft=zxcEventTo(zxce); }
else { zxcft=zxcEventFrom(zxce); }
if (zxcft.oop){ return false; }
while (zxcft.parentNode){
if (zxcft.oop){ return false; }
zxcft=zxcft.parentNode;
}
return true;
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
var zxceobj=(zxce.relatedTarget)?zxce.relatedTarget:(zxce.type=='mouseout')?zxce.toElement:zxce.fromElem ent;
while (zxceobj.parentNode){
if (window['zxc'+zxceobj.id]){ return false; }
zxceobj=zxceobj.parentNode;
}
return true;
}

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

function zxcResetImages(zxcid2){
var zxcp=document.getElementById(zxcid2);
zxcp.hold=null;
if (zxcp.ary){
for (var zxc0=0;zxc0<zxcp.ary.length;zxc0++){
if (zxcp.mirror[zxc0][2].oop){
if (zxcp.mirror[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.mirror[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.mirror[zxc0][2])) zxcES(zxcp.mirror[zxc0][2].childNodes[0],{zIndex:'2'});
if (zxcp.ary[zxc0][2].oop){
if (zxcp.ary[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.ary[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.ary[zxc0][2])) zxcES(zxcp.ary[zxc0][2].childNodes[0],{zIndex:'2'});
}
}
}

function zxcInitImages(zxcid1,zxcid2){
var zxcp1=document.getElementById(zxcid1);
var zxcp2=document.getElementById(zxcid2);
zxcNoTxtNodes(zxcp1);
zxcNoTxtNodes(zxcp2);
var zxcimgs1=zxcp1.getElementsByTagName('IMG');
var zxcimgs2=zxcp2.getElementsByTagName('IMG');
zxcp2.mirror=[];
zxcp2.ary=[];
for (var zxc1=0;zxc1<zxcimgs1.length;zxc1++) zxcp2.mirror[zxc1]=[zxcimgs1[zxc1],zxcimgs2[zxc1],zxcES('DIV',{position:'absolute',left:(zxcimgs1[zxc1].offsetLeft)+'px',top:zxcimgs1[zxc1].offsetTop+'px',width:zxcimgs1[zxc1].width+'px',height:zxcimgs1[zxc1].height+'px',border:'solid black 0px'},zxcp1)];
for (var zxc3=0;zxc3<zxcimgs2.length;zxc3++) zxcp2.ary[zxc3]=[zxcimgs2[zxc3],zxcimgs1[zxc3],zxcES('DIV',{position:'absolute',left:(zxcimgs2[zxc3].offsetLeft)+'px',top:zxcimgs2[zxc3].offsetTop+'px',width:zxcimgs2[zxc3].width+'px',height:zxcimgs2[zxc3].height+'px',border:'solid black 0px'},zxcp2)];
for (var zxc2=0;zxc2<zxcp2.mirror.length;zxc2++){
zxcES(zxcp2.mirror[zxc2][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.mirror[zxc2][2]);
var zxcdiv=zxcES(zxcp2.mirror[zxc2][2].cloneNode(false),{left:'0px',top:'0px'},zxcp2.mirror[zxc2][2])
zxcES(zxcp2.mirror[zxc2][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
}
for (var zxc4=0;zxc4<zxcp2.ary.length;zxc4++){
zxcES(zxcp2.ary[zxc4][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.ary[zxc4][2]);
zxcp2.ary[zxc4][2].onclick=zxcp2.ary[zxc4][0].onclick;
var zxcdiv=zxcES(zxcp2.ary[zxc4][2].cloneNode(false),{position:'absolute',zIndex:'1',left:'0px',top:'0px'},zxcp2.ary[zxc4][2])
zxcES(zxcp2.ary[zxc4][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseover');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseout');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','click');
}
zxcp2.hold=null;
zxcp2.holdmirror=null;
}


function zxcMseOverOut(zxcevt){
var zxcp=this.parentNode;
var zxcdivs=zxcp.childNodes;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==this) break;
}
if (zxcevt.type=='click'){
if (zxcp.hold&&zxcp.hold!=this) zxcFadeDo(zxcp.hold,'mouseout'); // to fix * If I click a second time on an image in links_BW (double-click slowly), the image fades back from colored to gray and stays that way. Can you set the script to verify that an image in links_BW is not already "set to color" to avoid this?
zxcp.hold=this;
if (zxcp.holdmirror) zxcFadeDo(zxcp.holdmirror,'mouseout');
zxcp.holdmirror=zxcp.mirror[zxc0][2];
zxcFadeDo(zxcp.holdmirror,'mouseover');
}
else if (this!=zxcp.hold){
zxcFadeDo(this,zxcevt.type);
zxcFadeDo(zxcp.mirror[zxc0][2],zxcevt.type);
}
}

function zxcFadeDo(zxcobj,zxcmde){
if (!zxcCkOpactiy(zxcobj)) zxcES(zxcobj.childNodes[0],{zIndex:(zxcevt.type=='mouseover')?'0':'2'});
if (!zxcobj.oop) zxcobj.oop=new zxcFadeOOP(zxcobj);
clearTimeout(zxcobj.oop.to);
zxcobj.oop.ud=(zxcmde=='mouseover')?2:-2; // adjust speed here
if (zxcobj.oop.ud<0&&zxcobj.oop.inc<50) zxcobj.oop.cont();
else zxcobj.oop.swap();
}

function zxcCkOpactiy(zxcobj){
if (zxcobj.style.MozOpacity!=null&&zxcobj.style.opacity!=null&&zxcobj.style.filter!=null&&zxcobj.KHTMLOpacity!=null) return false;
return true;
}

var zxcOOPCnt=0;

function zxcFadeOOP(zxcobj,zxcident){
this.to=null;
this.ref='oop'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj.childNodes[1];
zxcES(zxcobj.childNodes[0],{zIndex:'0'});
this.ud=0;
this.inc=0;
this.opacity(0);
}

zxcFadeOOP.prototype.swap=function(){
if ((this.ud>0&&this.inc<=100-this.ud)||(this.ud<0&&this.inc>=0-this.ud)){
this.opacity(this.inc+=this.ud);
this.setTimeOut('swap()',10);
}
}

zxcFadeOOP.prototype.cont=function(){
if ((this.ud<0&&this.inc<50)||(this.ud>0&&this.inc>0)){
this.opacity(this.inc-=this.ud);
this.setTimeOut('cont()',10);
}
else if (this.ud<0&&this.inc>0){
this.ud=-this.ud
this.setTimeOut('cont()',10);
}
}

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

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

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

<body onload="zxcInitImages('logoC','links_BW')">
<input type="button" name="" value="Reset" onclick="zxcResetImages('links_BW')">
<div id="logoC" style="position:relative;width:600px;height:100px;">
<img src="http://www.enviromark.ca/head/images/logoButtons/info_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/YPP_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/social_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/med_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/legal_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/J2K_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/street_C.gif" >
</div>
<div id="links_BW" style="position:relative;width:10px;" >
<img onclick="document.Show.Show0.value=vic++;" src="http://www.enviromark.ca/head/images/logoButtons/info_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/YPP_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/social_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/med_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/legal_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/J2K_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/street_BW.jpg" >

</div>
<div id="pp" style="position:relative;left:100px;" >
* I will have a button for 'home' that will need to reset the images to their default states<br>
DONE<br>
<br>
<br>
* is it possible to set a minimum level of opacity to achieve during the onmouseover?
for ex: even if a user onmouseover's an image in "links_BW" for 1/10 of a second, it will still fade to 50% color before fading back to gray?
<br> LOT&nbsp;of EFFORT&nbsp;Rqd.<br>
<br>
* Lastly: I tried to change the speed at which it fades by modifying this.setTimeOut('swap()',10);, but i couldn't get it to go faster by setting it below 10. even if I set it to 1 it seems to fade as fast as at 10. should I be modifying something else to change the speed?
conditions for fade on the vertical images in div id="links_BW"><br>
SEE Line 228<br>
<br>
<br>
* onmouseover: when the user runs over an image in "links_BW", the fade from gray to color should begin<br>
* onmouseout: when the user's mouse leaves that image, the fade should reverse and fade back to gray.<br>
* click: When the user clicks on one of the images in "links_BW",<br>
that image should continue to fade to color, and stay colored until another image is clicked.<br>

<br>

conditions for fade on the horizontal images in div id="logoC"><br>

* click on image in "links_BW":<br>
when an image is clicked in links_BW, the image like it in "logoC" should fade from color to gray,
and stay that way until the next image in "links_BW" is clicked.<br>
<br>
o When the next image in "links_BW" is clicked,<br>
the image in "logoC" that was faded to gray (see point above) should fade back to color.<br>
<br>
<br>
I left my common function in as they may be usefull(only two are used).
<br>
<br>
I have removed the image id(s) as the ids are duplicated in cloning and can see no use for them.
<br>
<br>
The DIVs can be poitioned left and to to acieve the required layout without using margins.
<br>
<br>
</div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
<input size=10 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=10 cols=100 ></textarea>
</form>
</body>

</html>


delay that you spent time adding in. I assume it is set to .X seconds... i just wanted to know how to change that (if i can, for later use)
you asked for 50%, thats what you have got. The time is governed by the speed(2:-2).

The code for this(note the 50):

zxcFadeOOP.prototype.cont=function(){
if ((this.ud<0&&this.inc<50)||(this.ud>0&&this.inc>0)){
this.opacity(this.inc-=this.ud);
this.setTimeOut('cont()',10);
}
else if (this.ud<0&&this.inc>0){
this.ud=-this.ud
this.setTimeOut('cont()',10);
}
}

canadianjameson
07-10-2007, 02:37 PM
Hey Vic,

Thanks for the help, I appreciate it :D Here are a few last things I've noticed:


I still can't get links to work. This is one thing that I need to fix because this is a nav :). you mentioned that we would have to swap the links with the mouse-out image. I hope that won't be too hard.
Again, here is the code I will be using for my links: <a href="javascript:ajaxpage('test.htm', 'contentarea'); loadobjs('css/pages.css')"> and the script is here http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
You'll also notice that when you do insert a link it causes the script to 'skip ahead' one image on the horizontal bar (onclick and onmouseover)


I like the fade horizontal image on mouse over/out of the vertical image :D However I was wondering if you could show me how to disable it and go back to the old way (just horizontal mouse-over/out fade), but if I want it later just activate it again. I'd like to keep it as an option if possible (i don't know if it's possible :o )

Apart from that Vic this is absolutely phenomenal and I can't wait to get it up and running. I can't really foresee any other major changes to the script apart from getting the links to work.

Thanks again :)

vwphillips
07-10-2007, 03:16 PM
I like the fade horizontal image on mouse over/out of the vertical image However I was wondering if you could show me how to disable it


function zxcMseOverOut(zxcevt){
var zxcp=this.parentNode;
var zxcdivs=zxcp.childNodes;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==this) break;
}
if (zxcevt.type=='click'){
if (zxcp.hold&&zxcp.hold!=this) zxcFadeDo(zxcp.hold,'mouseout'); // to fix * If I click a second time on an image in links_BW (double-click slowly), the image fades back from colored to gray and stays that way. Can you set the script to verify that an image in links_BW is not already "set to color" to avoid this?
zxcp.hold=this;
if (zxcp.holdmirror) zxcFadeDo(zxcp.holdmirror,'mouseout');
zxcp.holdmirror=zxcp.mirror[zxc0][2];
zxcFadeDo(zxcp.holdmirror,'mouseover');
}
else if (this!=zxcp.hold){
zxcFadeDo(this,zxcevt.type);
zxcFadeDo(zxcp.mirror[zxc0][2],zxcevt.type); // comment this line if not required
}
}



As for the links
If you have applied the links as the first vertical image in my last 'full' code post cant see why there should not be a problem unless it is a specific 'Ajax' problem.

Please provide a link to your latest HTML/code in action so I can have a look.

canadianjameson
07-10-2007, 03:46 PM
Hi Vic,

Perfect, the commented out part is exactly what I wanted :D

As for the links: even when I use your last full post and use a normal <a href="www.google.ca">image here</a> link it doesn't work. What occurs is that onmouseover there is no 'hand cursor' to indicate a link, and when I click on it nothing happens. give it a shot :)

in any case, here is my HTML with absolute links to make life easier :)
you can view it here: www.enviromark.ca/head/index.htm --> notice when you click on an image in the vertical column it fades the wrong image in the horizontal column



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


<link rel="stylesheet" href="http://www.enviromark.ca/head/css/main.css" type="text/css">

<script language="JavaScript">/***********************************************
* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>

<script language="JavaScript" type="text/javascript">
<!--
// Common Functions
// By Vic Phillips (30-June-2007) http://www.vicsjavascripts.org.uk


// Functional Code - No Need to Change

var zxcEvt=0;

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 zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcStyleRules(){
var zxcssheets=document.styleSheets;
var zxcruleary=[];
var zxcstyleary=[];
for (var zxc0=0;zxc0<zxcssheets.length;zxc0++){ zxcstyleary.push((document.all)?zxcssheets[zxc0].cssText:zxcssheets[zxc0]); }
if (document.all){
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
zxcstyleary[zxc1]=zxcstyleary[zxc1].split('}');
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].length-1;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1][zxc1a].replace(/\s/g,'')+'}');
}
}
}
else {
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].cssRules.length;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1].cssRules[zxc1a].cssText.replace(/\s/g,''));
}
}
}
return zxcruleary
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}

function zxcNoTxtNodes(zxcp){
var zxcclds=zxcp.childNodes,zxcary=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
return zxcclds;
}

function zxcMse(zxcevt){
if(!zxcevt) var zxcevt=window.event;
if (document.all) return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]];
return [zxcevt.pageX,zxcevt.pageY];
}

function zxcDocS(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}

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]; }
}
}

function zxcAddEvent(zxc,zxcfun,zxcevt){
if (zxc.addEvent){ return; }
zxc.addEvent=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'addEvent');
}

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

function zxcRemoveEvt(zxcfun,zxcevt){
if ( zxco.removeEventListener ){ zxco.removeEventListener(zxcevt,zxcfun,false); }
else if (zxco.detachEvent){ zxco.detachEvent('on'+zxcevt,zxcfun); }
}

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; }
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
var zxcft;
if (zxce.type=='mouseout'){ zxcft=zxcEventTo(zxce); }
else { zxcft=zxcEventFrom(zxce); }
if (zxcft.oop){ return false; }
while (zxcft.parentNode){
if (zxcft.oop){ return false; }
zxcft=zxcft.parentNode;
}
return true;
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
var zxceobj=(zxce.relatedTarget)?zxce.relatedTarget:(zxce.type=='mouseout')?zxce.toElement:zxce.fromElem ent;
while (zxceobj.parentNode){
if (window['zxc'+zxceobj.id]){ return false; }
zxceobj=zxceobj.parentNode;
}
return true;
}

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

function zxcResetImages(zxcid2){
var zxcp=document.getElementById(zxcid2);
zxcp.hold=null;
if (zxcp.ary){
for (var zxc0=0;zxc0<zxcp.ary.length;zxc0++){
if (zxcp.mirror[zxc0][2].oop){
if (zxcp.mirror[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.mirror[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.mirror[zxc0][2])) zxcES(zxcp.mirror[zxc0][2].childNodes[0],{zIndex:'2'});
if (zxcp.ary[zxc0][2].oop){
if (zxcp.ary[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.ary[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.ary[zxc0][2])) zxcES(zxcp.ary[zxc0][2].childNodes[0],{zIndex:'2'});
}
}
}

function zxcInitImages(zxcid1,zxcid2){
var zxcp1=document.getElementById(zxcid1);
var zxcp2=document.getElementById(zxcid2);
zxcNoTxtNodes(zxcp1);
zxcNoTxtNodes(zxcp2);
var zxcimgs1=zxcp1.getElementsByTagName('IMG');
var zxcimgs2=zxcp2.getElementsByTagName('IMG');
zxcp2.mirror=[];
zxcp2.ary=[];
for (var zxc1=0;zxc1<zxcimgs1.length;zxc1++) zxcp2.mirror[zxc1]=[zxcimgs1[zxc1],zxcimgs2[zxc1],zxcES('DIV',{position:'absolute',left:(zxcimgs1[zxc1].offsetLeft)+'px',top:zxcimgs1[zxc1].offsetTop+'px',width:zxcimgs1[zxc1].width+'px',height:zxcimgs1[zxc1].height+'px',border:'solid black 0px'},zxcp1)];
for (var zxc3=0;zxc3<zxcimgs2.length;zxc3++) zxcp2.ary[zxc3]=[zxcimgs2[zxc3],zxcimgs1[zxc3],zxcES('DIV',{position:'absolute',left:(zxcimgs2[zxc3].offsetLeft)+'px',top:zxcimgs2[zxc3].offsetTop+'px',width:zxcimgs2[zxc3].width+'px',height:zxcimgs2[zxc3].height+'px',border:'solid black 0px'},zxcp2)];
for (var zxc2=0;zxc2<zxcp2.mirror.length;zxc2++){
zxcES(zxcp2.mirror[zxc2][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.mirror[zxc2][2]);
var zxcdiv=zxcES(zxcp2.mirror[zxc2][2].cloneNode(false),{left:'0px',top:'0px'},zxcp2.mirror[zxc2][2])
zxcES(zxcp2.mirror[zxc2][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
}
for (var zxc4=0;zxc4<zxcp2.ary.length;zxc4++){
zxcES(zxcp2.ary[zxc4][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.ary[zxc4][2]);
zxcp2.ary[zxc4][2].onclick=zxcp2.ary[zxc4][0].onclick;
var zxcdiv=zxcES(zxcp2.ary[zxc4][2].cloneNode(false),{position:'absolute',zIndex:'1',left:'0px',top:'0px'},zxcp2.ary[zxc4][2])
zxcES(zxcp2.ary[zxc4][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseover');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseout');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','click');
}
zxcp2.hold=null;
zxcp2.holdmirror=null;
}


function zxcMseOverOut(zxcevt){
var zxcp=this.parentNode;
var zxcdivs=zxcp.childNodes;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==this) break;
}
if (zxcevt.type=='click'){
if (zxcp.hold&&zxcp.hold!=this) zxcFadeDo(zxcp.hold,'mouseout'); // to fix * If I click a second time on an image in links_BW (double-click slowly), the image fades back from colored to gray and stays that way. Can you set the script to verify that an image in links_BW is not already "set to color" to avoid this?
zxcp.hold=this;
if (zxcp.holdmirror) zxcFadeDo(zxcp.holdmirror,'mouseout');
zxcp.holdmirror=zxcp.mirror[zxc0][2];
zxcFadeDo(zxcp.holdmirror,'mouseover');
}
else if (this!=zxcp.hold){
zxcFadeDo(this,zxcevt.type);
// zxcFadeDo(zxcp.mirror[zxc0][2],zxcevt.type); // to make horizontal fade onmouseover
}
}

function zxcFadeDo(zxcobj,zxcmde){
if (!zxcCkOpactiy(zxcobj)) zxcES(zxcobj.childNodes[0],{zIndex:(zxcevt.type=='mouseover')?'0':'2'});
if (!zxcobj.oop) zxcobj.oop=new zxcFadeOOP(zxcobj);
clearTimeout(zxcobj.oop.to);
zxcobj.oop.ud=(zxcmde=='mouseover')?2:-2; // adjust speed here
if (zxcobj.oop.ud<0&&zxcobj.oop.inc<50) zxcobj.oop.cont();
else zxcobj.oop.swap();
}

function zxcCkOpactiy(zxcobj){
if (zxcobj.style.MozOpacity!=null&&zxcobj.style.opacity!=null&&zxcobj.style.filter!=null&&zxcobj.KHTMLOpacity!=null) return false;
return true;
}

var zxcOOPCnt=0;

function zxcFadeOOP(zxcobj,zxcident){
this.to=null;
this.ref='oop'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj.childNodes[1];
zxcES(zxcobj.childNodes[0],{zIndex:'0'});
this.ud=0;
this.inc=0;
this.opacity(0);
}

zxcFadeOOP.prototype.swap=function(){
if ((this.ud>0&&this.inc<=100-this.ud)||(this.ud<0&&this.inc>=0-this.ud)){
this.opacity(this.inc+=this.ud);
this.setTimeOut('swap()',10);
}
}

zxcFadeOOP.prototype.cont=function(){
if ((this.ud<0&&this.inc<50)||(this.ud>0&&this.inc>0)){ // change the '50' to change the min-fade delay
this.opacity(this.inc-=this.ud);
this.setTimeOut('cont()',10);
}
else if (this.ud<0&&this.inc>0){
this.ud=-this.ud
this.setTimeOut('cont()',10);
}
}

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

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

//-->
</script>

</head>

<body onload="zxcInitImages('logoC','links_BW')">
<div id="pageContainer">
<div id="topText"><img src="http://www.enviromark.ca/head/images/logoButtons/top_text.gif"></div>
<div id="logoC">
<img src="http://www.enviromark.ca/head/images/logoButtons/info_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/YPP_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/social_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/med_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/legal_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/J2K_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/street_C.gif" >
</div>
<div id="bottomText"><img src="http://www.enviromark.ca/head/images/logoButtons/bottom_text.gif"></div>

<div id="links_BW">
<a href="javascript:ajaxpage('http://www.enviromark.ca/head/test.htm', 'contentarea'); loadobjs('http://www.enviromark.ca/head/css/pages.css')"><img src="http://www.enviromark.ca/head/images/logoButtons/info_BW.jpg" ></a>
<img src="http://www.enviromark.ca/head/images/logoButtons/YPP_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/social_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/med_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/legal_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/J2K_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/street_BW.jpg" >

</div>
<div class="clear"></div>
<div id="contentarea"></div>

<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:hidden;top:420px;left:0px;" >
<input size=10 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=10 cols=100 ></textarea>
</form>

</div>
</body>
</html>


Thanks a million! :D

vwphillips
07-10-2007, 05:09 PM
as previous
change:

<a href="javascript:ajaxpage('http://www.enviromark.ca/head/test.htm', 'contentarea'); loadobjs('http://www.enviromark.ca/head/css/pages.css')"><img src="http://www.enviromark.ca/head/images/logoButtons/info_BW.jpg" ></a>


to


<img src="http://www.enviromark.ca/head/images/logoButtons/info_BW.jpg" onclick="ajaxpage('http://www.enviromark.ca/head/test.htm', 'contentarea'); loadobjs('http://www.enviromark.ca/head/css/pages.css')"></a>


This will resolve changing the wrong horizontal image and transfer the event call to the correct image.

as for the cursor(hand) this can be done with css but I will include the cursor in the code once you establish that the link(event call) works as intended.

canadianjameson
07-10-2007, 08:22 PM
Hi Vic,

The change worked perfectly!

Everything is a go for now, I can't see anything needing changing for the moment.

All that is left to add in is the hand cursor, and removing the debug form. (and possibly making it possible to move the script to a .js file).

Vic, Thank you so much.

Are you feeling better by the way?

vwphillips
07-10-2007, 11:18 PM
<!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" src="070707.js" type="text/javascript">
</script>
</head>

<body onload="zxcInitImages('logoC','links_BW')">
<input type="button" name="" value="Reset" onclick="zxcResetImages('links_BW')">
<div id="logoC" style="position:relative;width:600px;height:100px;">
<img src="http://www.enviromark.ca/head/images/logoButtons/info_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/YPP_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/social_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/med_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/legal_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/J2K_C.gif" >
<img src="http://www.enviromark.ca/head/images/logoButtons/street_C.gif" >
</div>
<div id="links_BW" style="position:relative;width:10px;" >
<img onclick="document.Show.Show0.value=vic++;" src="http://www.enviromark.ca/head/images/logoButtons/info_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/YPP_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/social_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/med_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/legal_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/J2K_BW.jpg" >
<img src="http://www.enviromark.ca/head/images/logoButtons/street_BW.jpg" >

</div>
<div id="pp" style="position:relative;left:100px;" >
* I will have a button for 'home' that will need to reset the images to their default states<br>
DONE<br>
<br>
<br>
* is it possible to set a minimum level of opacity to achieve during the onmouseover?
for ex: even if a user onmouseover's an image in "links_BW" for 1/10 of a second, it will still fade to 50% color before fading back to gray?
<br> LOT&nbsp;of EFFORT&nbsp;Rqd.<br>
<br>
* Lastly: I tried to change the speed at which it fades by modifying this.setTimeOut('swap()',10);, but i couldn't get it to go faster by setting it below 10. even if I set it to 1 it seems to fade as fast as at 10. should I be modifying something else to change the speed?
conditions for fade on the vertical images in div id="links_BW"><br>
SEE Line 228<br>
<br>
<br>
* onmouseover: when the user runs over an image in "links_BW", the fade from gray to color should begin<br>
* onmouseout: when the user's mouse leaves that image, the fade should reverse and fade back to gray.<br>
* click: When the user clicks on one of the images in "links_BW",<br>
that image should continue to fade to color, and stay colored until another image is clicked.<br>

<br>

conditions for fade on the horizontal images in div id="logoC"><br>

* click on image in "links_BW":<br>
when an image is clicked in links_BW, the image like it in "logoC" should fade from color to gray,
and stay that way until the next image in "links_BW" is clicked.<br>
<br>
o When the next image in "links_BW" is clicked,<br>
the image in "logoC" that was faded to gray (see point above) should fade back to color.<br>
<br>
<br>
I left my common function in as they may be usefull(only two are used).
<br>
<br>
I have removed the image id(s) as the ids are duplicated in cloning and can see no use for them.
<br>
<br>
The DIVs can be poitioned left and to to acieve the required layout without using margins.
<br>
<br>
</div>

</body>

</html>


070707.js


// By Vic Phillips (10-July-2007) http://www.vicsjavascripts.org.uk

function zxcResetImages(zxcid2){
var zxcp=document.getElementById(zxcid2);
zxcp.hold=null;
if (zxcp.ary){
for (var zxc0=0;zxc0<zxcp.ary.length;zxc0++){
if (zxcp.mirror[zxc0][2].oop){
if (zxcp.mirror[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.mirror[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.mirror[zxc0][2])) zxcES(zxcp.mirror[zxc0][2].childNodes[0],{zIndex:'2'});
if (zxcp.ary[zxc0][2].oop){
if (zxcp.ary[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.ary[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.ary[zxc0][2])) zxcES(zxcp.ary[zxc0][2].childNodes[0],{zIndex:'2'});
}
}
}

function zxcInitImages(zxcid1,zxcid2){
var zxcp1=document.getElementById(zxcid1);
var zxcp2=document.getElementById(zxcid2);
zxcES(zxcp2,{cursor:(document.all)?'hand':'pointer'});
zxcNoTxtNodes(zxcp1);
zxcNoTxtNodes(zxcp2);
var zxcimgs1=zxcp1.getElementsByTagName('IMG');
var zxcimgs2=zxcp2.getElementsByTagName('IMG');
zxcp2.mirror=[];
zxcp2.ary=[];
for (var zxc1=0;zxc1<zxcimgs1.length;zxc1++) zxcp2.mirror[zxc1]=[zxcimgs1[zxc1],zxcimgs2[zxc1],zxcES('DIV',{position:'absolute',left:(zxcimgs1[zxc1].offsetLeft)+'px',top:zxcimgs1[zxc1].offsetTop+'px',width:zxcimgs1[zxc1].width+'px',height:zxcimgs1[zxc1].height+'px',border:'solid black 0px'},zxcp1)];
for (var zxc3=0;zxc3<zxcimgs2.length;zxc3++) zxcp2.ary[zxc3]=[zxcimgs2[zxc3],zxcimgs1[zxc3],zxcES('DIV',{position:'absolute',left:(zxcimgs2[zxc3].offsetLeft)+'px',top:zxcimgs2[zxc3].offsetTop+'px',width:zxcimgs2[zxc3].width+'px',height:zxcimgs2[zxc3].height+'px',border:'solid black 0px'},zxcp2)];
for (var zxc2=0;zxc2<zxcp2.mirror.length;zxc2++){
zxcES(zxcp2.mirror[zxc2][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.mirror[zxc2][2]);
var zxcdiv=zxcES(zxcp2.mirror[zxc2][2].cloneNode(false),{left:'0px',top:'0px'},zxcp2.mirror[zxc2][2])
zxcES(zxcp2.mirror[zxc2][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
}
for (var zxc4=0;zxc4<zxcp2.ary.length;zxc4++){
zxcES(zxcp2.ary[zxc4][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.ary[zxc4][2]);
zxcp2.ary[zxc4][2].onclick=zxcp2.ary[zxc4][0].onclick;
var zxcdiv=zxcES(zxcp2.ary[zxc4][2].cloneNode(false),{position:'absolute',zIndex:'1',left:'0px',top:'0px'},zxcp2.ary[zxc4][2])
zxcES(zxcp2.ary[zxc4][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseover');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseout');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','click');
}
zxcp2.hold=null;
zxcp2.holdmirror=null;
}


function zxcMseOverOut(zxcevt){
var zxcp=this.parentNode;
var zxcdivs=zxcp.childNodes;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==this) break;
}
if (zxcevt.type=='click'){
if (zxcp.hold&&zxcp.hold!=this) zxcFadeDo(zxcp.hold,'mouseout'); // to fix * If I click a second time on an image in links_BW (double-click slowly), the image fades back from colored to gray and stays that way. Can you set the script to verify that an image in links_BW is not already "set to color" to avoid this?
zxcp.hold=this;
if (zxcp.holdmirror) zxcFadeDo(zxcp.holdmirror,'mouseout');
zxcp.holdmirror=zxcp.mirror[zxc0][2];
zxcFadeDo(zxcp.holdmirror,'mouseover');
}
else if (this!=zxcp.hold){
zxcFadeDo(this,zxcevt.type);
zxcFadeDo(zxcp.mirror[zxc0][2],zxcevt.type); // comment this line if not required
}
}

function zxcFadeDo(zxcobj,zxcmde){
if (!zxcCkOpactiy(zxcobj)) zxcES(zxcobj.childNodes[0],{zIndex:(zxcevt.type=='mouseover')?'0':'2'});
if (!zxcobj.oop) zxcobj.oop=new zxcFadeOOP(zxcobj);
clearTimeout(zxcobj.oop.to);
zxcobj.oop.ud=(zxcmde=='mouseover')?2:-2; // adjust speed here
if (zxcobj.oop.ud<0&&zxcobj.oop.inc<50) zxcobj.oop.cont();
else zxcobj.oop.swap();
}

function zxcCkOpactiy(zxcobj){
if (zxcobj.style.MozOpacity!=null&&zxcobj.style.opacity!=null&&zxcobj.style.filter!=null&&zxcobj.KHTMLOpacity!=null) return false;
return true;
}

var zxcOOPCnt=0;

function zxcFadeOOP(zxcobj,zxcident){
this.to=null;
this.ref='oop'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj.childNodes[1];
zxcES(zxcobj.childNodes[0],{zIndex:'0'});
this.ud=0;
this.inc=0;
this.opacity(0);
}

zxcFadeOOP.prototype.swap=function(){
if ((this.ud>0&&this.inc<=100-this.ud)||(this.ud<0&&this.inc>=0-this.ud)){
this.opacity(this.inc+=this.ud);
this.setTimeOut('swap()',10);
}
}

zxcFadeOOP.prototype.cont=function(){
if ((this.ud<0&&this.inc<50)||(this.ud>0&&this.inc>0)){
this.opacity(this.inc-=this.ud);
this.setTimeOut('cont()',10);
}
else if (this.ud<0&&this.inc>0){
this.ud=-this.ud
this.setTimeOut('cont()',10);
}
}

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

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

var zxcEvt=0;

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 zxcNoTxtNodes(zxcp){
var zxcclds=zxcp.childNodes,zxcary=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
return zxcclds;
}

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]; }
}
}

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

canadianjameson
07-11-2007, 03:56 AM
Thank you Vic,

This works perfectly, I will show it tomorrow and see how it goes over.

I will post a message tomorrow.

Thank you, a million times over.

edit:

Vic i tried to avoid getting you into this to cut down on what I was asking you to help me with, but maybe you are the best person to give me advice on this: http://www.codingforums.com/showthread.php?t=118478

isshin
07-12-2007, 08:48 AM
u got it, nice job

canadianjameson
07-12-2007, 09:25 AM
all of the credit goes to Vic :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum