Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Modifying a fade script to work with rollovers

    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:
    Code:
    <!--
    // 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:
    Code:
    <!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>
    Code:
    /* 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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    As all ways I have trouble understanding your requirement and coping with your css(margins) but

    Code:
    <!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.scrollTop];
    }
    
    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
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!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.scrollTop];
    }
    
    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.fromElement;
     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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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 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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!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.scrollTop];
    }
    
    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.fromElement;
     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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    done the delay thing anyway

    Code:
    <!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.scrollTop];
    }
    
    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.fromElement;
     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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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!
    Last edited by canadianjameson; 07-09-2007 at 04:31 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Last edited by canadianjameson; 07-09-2007 at 07:15 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    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'});
      }
     }
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    // 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?
    Code:
    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.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #13
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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/dynamici...jaxcontent.htm) for my links, so the link is being activated by
      Code:
      <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!
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #14
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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.

    Code:
    <!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.scrollTop];
    }
    
    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.fromElement;
     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):
    Code:
    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);
     }
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #15
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Hey Vic,

    Thanks for the help, I appreciate it 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.
    • 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 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 )


    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •