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.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image swaping and style changing

    Hi,
    I'm working on a portfolio project that has a page containing up to 8 image thumbnails down the side, and in the middle one large image which is the selected. What i'm trying to do is have the selected image thumbnail stay solid and color, while the rest are in a gray scale and slightly transparent, and when there rolled over they will change to solid. I have this working correctly. The problem is when i click on one of the other images i need it to change the "onmouseover" and "onmouseout" for that image so that it doesn't change and is now the selected one, while all the others now have rollovers. Everything is dynamically driven so i will never truly know file names or the amount (just up to 8) of the images which makes this a little tougher.

    Here is what i've come up with so far...
    PHP Code:
    function ShowColor(image){
            
    document.getElementById(image).style.filter '';
    }
    function 
    HideColor(image){
            
    document.getElementById(image).style.filter 'Gray Alpha(Opacity=50)';
        
    }
        
    function 
    SwapImage(image_namenum){
            var 
    NewImage document.getElementById(image_name).value;
            var 
    ProjID document.getElementById('ProjID').value;
            
            
    document.getElementById('MainImage').src '/graphics/portfolio/' ProjID '/' NewImage;
            
        
            for(
    j=1j<9j++)
                {
                    
                    if(
    document.getElementById('thumb'+j) != null){
                        
                        
    document.getElementById('thumb'+j).style.filter 'Gray Alpha(Opacity=50)';
                        
    document.getElementById('thumb'+j).onmouseover = function(){ShowColor('thumb' j);}
                        
    document.getElementById('thumb'+j).onmouseout = function(){HideColor('thumb' j);}

                    }
                }
            
    document.getElementById('thumb' num).onmouseout '';
            
    document.getElementById('thumb' num).onmouseover '';
            
    document.getElementById('thumb' num).style.filter '';


    and there are 8 images called as follows...
    PHP Code:
    <img src="/graphics/portfolio/#thisPageContent.PortfolioID#/#Replace(thisPageContent.ProjImage2,".jpg","","ALL")#_small.jpg" border="0" style="Filter: Gray Alpha(Opacity=50);" id="thumb2" onmouseover="ShowColor('thumb2');" onmouseout="HideColor('thumb2');" onClick="SwapImage('image2',2);"  /> 
    So basically what this does is the first 2 functions takes in the id in an event handler and either shows it in color or grey depending on mouseover or out. Each of the eight images have id's thumb1 - thumb8.

    The only part of this that doesn't work is in the SwapImage function. What this does is actually swaps the large image with whatever thumbnail was clicked (that is all working so now worries there) but then what it does in the for loop is sets each image (if they exist) to grey and then adds a the mouseover and mouseout to each one (even the clicked one). And then after the clicked one it sets the stlye, mouseover, and mouseout based on which was clicked (which is passed through the event handler, this is also working). So basically the only piece of this thing i'm having a hard time with is in the SwapImage function, when trying to set the mouseover and mouseout events. All its trying to do is set them to call the original functions but it doesn't seem to want to take it with the event handler.

    Any help or advice would be great, thanks,
    ~Jamie


    EDIT: i also just noticed that in the for loop the variable "j" is getting into the functions called on mouseover and mouseout as "9" as if the functions get called after the loop is run.
    Last edited by JayStang; 07-31-2006 at 05:46 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Posts
    603
    Thanks
    2
    Thanked 1 Time in 1 Post
    why are you putting
    Code:
    document.getElementById('thumb'+j).onmouseover = function(){ShowColor('thumb' + j);} 
    document.getElementById('thumb'+j).onmouseout = function(){HideColor('thumb' + j);}
    arent those functions already defined above that part? try:

    Code:
    document.getElementById('thumb'+j).onmouseover = ShowColor('thumb' + j);
    document.getElementById('thumb'+j).onmouseout = HideColor('thumb' + j);
    Last edited by boeing747fp; 07-31-2006 at 06:49 PM.

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts
    right they are already defined. I wasn't redefining them. I was having a hard time calling a function that also contained an eventhandler when setting it that way, so i was trying to create another function as shown that just calls my initial function.

    either way both of the above examples don't work.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcAddGray(zxccls,zxcid){
     var zxcdivs=document.getElementsByTagName('BODY')[0].getElementsByTagName('DIV');
     var zxcobj=document.getElementById(zxcid);
     var zxcimgs=zxcobj.getElementsByTagName('IMG');
     for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){ zxcStyle(zxcimgs[zxc0],{position:'absolute',visibility:'hidden',left:'0px',top:'0px'}); }
     var zxccnt=0;
     for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
      if (zxcdivs[zxc0].className){
       if (zxcdivs[zxc0].className.match(zxccls)){
        var zxcgd=zxcStyle('DIV',{position:'absolute',left:'0px',top:'0px',width:'100%',height:(zxcdivs[zxc0].offsetHeight)+'px',backgroundColor:'gray'});
        if (zxcOpacity(zxcgd,50)){
         zxcdivs[zxc0].appendChild(zxcgd);
        }
        zxcdivs[zxc0].cnt=zxccnt++;
        zxcdivs[zxc0].obj=zxcobj;
        zxcAddEvt(zxcdivs[zxc0],'zxcMse','mouseover')
        zxcAddEvt(zxcdivs[zxc0],'zxcMse','mouseout')
       }
      }
     }
    }
    
    function zxcMse(){
     var zxcimgs=this.obj.getElementsByTagName('IMG');
     for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){ zxcimgs[zxc0].style.visibility=(zxc0==this.cnt)?'visible':'hidden'; }
     var zxcgd=this.getElementsByTagName('DIV')[0];
     if (!zxcgd){ return; }
     zxcgd.style.visibility=(zxcgd.style.visibility=='hidden')?'visible':'hidden';
    }
    
    function zxcStyle(zxcele,zxcstyle,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    function zxcOpacity(zxcobj,zxcopc) {
     if (zxcopc<0||zxcopc>100){ return false; }
     if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; return true; }
     else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; return true; }
     else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')'; return true;	}
     else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; return true; }
     return false;
    }
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    
    var zxcEvt=0;
    
    function zxcAddEvt(zxco,zxcfun,zxcevt){
     if (zxco['zxc'+zxcfun+zxcevt]){ return; }
     zxco['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxco['zxc'+zxcfun+zxcevt]=true;
     zxcEventAdd(zxco,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    
    
    /*]]>*/
    </script></head>
    
    <body onload="zxcAddGray('zxcgray','Main');" >
    <br>
    <div class="zxcgray" style="position:relative;overflow:hidden;width:50px;height:50px;" >
     <img  src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" >
    </div>
    <div class="zxcgray" style="position:relative;overflow:hidden;width:50px;height:50px;" >
     <img  src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" >
    </div>
    <br />
    <div class="zxcgray" style="position:relative;overflow:hidden;width:50px;height:50px;" >
     <img  src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" >
    </div>
    
    <div id="Main" style="position:relative;width:400px;height:400px;" >
     <img  src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="400" height="400" >
     <img  src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="400" height="400" >
     <img  src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="400" height="400" >
    </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/


  •  

    Posting Permissions

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