SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot shiftless's Avatar
    Join Date
    Mar 2005
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Switching images and <a> class with javascript

    I am workingon a small picture gallery here (best to use FF, as I have not yet done the IE hacks for the layout yet):

    http://www.helpfighthiv.org/readyStudies.htm

    I am trying to use javascript to switch the large image out, and also switch the class of the <a> tag for the tumbnail that you click. This is my javascript:

    Code:
    function switch(which,count) {
    	var theSplit = which.id.split('_');
    
    	for (i=1; i<=count; i++){
    		document.getElementById(theSplit[0]+'_'+i).className = (i==theSplit[1]) ? 'Over' : '';
    	}
    	
    	var theSplit2 = document.getElementById('pscreen').src.split('_');
    	document.getElementById('pscreen').src = theSplit2[0]+'_'+theSplit2[1]+'_'+theSplit[1]+'.jpg';
    }
    And here is the relevant HTML from the page:

    Code:
    <div class="campaigns">
    			<img id="pscreen" src="images/HIV_vac_1.jpg" width="360" height="275" alt="I want to help find a vaccine because I never want to get infected">
    			
    			<ul class="campaignNav">
    				<li><a id="pex_1" onclick="return switch(this,7);" href="#" class="Over" onFocus="this.blur()"><img src="images/HIV_vac_cantget_small.jpg" width="70" height="70" alt="Thumbnail-1" border="0"></a></li>
    				<li><a id="pex_2" onclick="return switch(this,7);" href="#" onFocus="this.blur()"><img src="images/HIV_vac_together_small.jpg" width="70" height="70" alt="Thumbnail-2" border="0"></a></li>
    				<li><a id="pex_3" onclick="return switch(this,7);" href="#" onFocus="this.blur()"><img src="images/HIV_vac_freakout_small.jpg" width="70" height="70" alt="Thumbnail-3" border="0"></a></li>
    				<li><a id="pex_4" onclick="return switch(this,7);" href="#" onFocus="this.blur()"><img src="images/HIV_vac_fireman_small.jpg" width="70" height="70" alt="Thumbnail-4" border="0"></a></li>
    				<li><a id="pex_5" onclick="return switch(this,7);" href="#" onFocus="this.blur()"><img src="images/HIV_vac_proud_small.jpg" width="70" height="70" alt="Thumbnail-5" border="0"></a></li>
    				<li><a id="pex_6" onclick="return switch(this,7);" href="#" onFocus="this.blur()"><img src="images/HIV_vac_cantget2_small.jpg" width="70" height="70" alt="Thumbnail-6" border="0"></a></li>
    				<li><a id="pex_7" onclick="return switch(this,7);" href="#" onFocus="this.blur()"><img src="images/HIV_vac_neverinfect_small.jpg" width="70" height="70" alt="Thumbnail-7" border="0"></a></li>
    			</ul>
    			
    		</div>
    All the large images follow the same naming convention model: HIV_vac_1.jpg, HIV_vac_2.jpg , etc etc.

    It obvoiouslt doesn't work, what I am doing wrong? Should the onClick be in the image tag (also didn't work, so I guess the answer is 'no' there)? I'm am completely new to javascript so any help would be appreciated...

  2. #2
    SitePoint Enthusiast ada80ro's Avatar
    Join Date
    Apr 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, first you should change the name of your function: "switch" because switch is a reserved word in javascript which means you cannot used for a function or variable name .
    http://javascript.about.com/library/blreserved.htm

    Nice layout, BTW.

    [Edit]

    I've had some time off and I've written the script for you.

    Code:
    <script type="text/javascript">
    //set images folder
    var imgFolder='images/';
    
    //images array: key: a id, value: array, first element: small image src, second element:large image src
    var imgNames={
      pex_1:['HIV_vac_cantget_small.jpg','HIV_vac_1.jpg'],
      pex_2:['HIV_vac_together_small.jpg','HIV_vac_2.jpg'],
      pex_3:['HIV_vac_freakout_small.jpg','HIV_vac_3.jpg'],
      pex_4:['HIV_vac_fireman_small.jpg','HIV_vac_4.jpg'],
      pex_5:['HIV_vac_proud_small.jpg','HIV_vac_5.jpg'],
      pex_6:['HIV_vac_cantget2_small.jpg','HIV_vac_6.jpg'],
      pex_7:['HIV_vac_neverinfect_small.jpg','HIV_vac_7.jpg']
    }
    
    imgObjects=new Object();
    
    //preload images
    for (imgId in imgNames){
        //small image
        imgObjects[imgId] = new Array();
        imgObjects[imgId][0]=new Image();
        imgObjects[imgId][0].src=imgFolder+imgNames[imgId][0];
    
    
        //big image
        imgObjects[imgId][1]=new Image();
        imgObjects[imgId][1].src=imgFolder+imgNames[imgId][1];
    
    
    
    }
    
    
    //onclick
    function change_image(aRef){
    
            //get 'a' id
            var aId=aRef.id;
    
            //change big image
            document.getElementById('pscreen').src=imgObjects[aId][1].src;
            document.getElementById('pscreen').width=imgObjects[aId][1].width;
            document.getElementById('pscreen').heigth=imgObjects[aId][1].height;
    
            //remove class on previous a elements
            var ulRef=document.getElementById('images_bar');
            var liRef=ulRef.getElementsByTagName('li');
    
            for(var i=0, no_li=liRef.length; i<no_li; i++){
                 var aLink=liRef[i].getElementsByTagName('a')[0];
                 aLink.className='';
            }
    
            //change class of a element:
            aRef.className='Over';
    
    }
    
    function add_onclick(){
      //get reference to ul and li
      var ulRef=document.getElementById('images_bar');
      var liRef=ulRef.getElementsByTagName('li');
    
          for(var i=0, no_li=liRef.length; i<no_li; i++){
            var aRef=liRef[i].getElementsByTagName('a')[0];
    
            aRef.onclick=function(){
                 change_image(this);
            }
            aRef.onfocus=function(){
                this.blur();
            }
          }//end for
    
    }//end function add_onclick
    
    
    if(window.attachEvent){
        window.attachEvent('onload',add_onclick);
    }
    else{
        window.addEventListener('load',add_onclick, false);
    }
    
    
    </script>

    And in the body change ul class="campaignNav" with:
    Code:
    <ul class="campaignNav" id="images_bar">
    				<li><a id="pex_1" href="#"><img src="readyStudies_files/HIV_vac_cantget_small.jpg" alt="Thumbnail-1" border="0" height="70" width="70"></a></li>
    				<li><a id="pex_2" href="#"><img src="readyStudies_files/HIV_vac_together_small.jpg" alt="Thumbnail-2" border="0" height="70" width="70"></a></li>
    				<li><a id="pex_3" href="#"><img src="readyStudies_files/HIV_vac_freakout_small.jpg" alt="Thumbnail-3" border="0" height="70" width="70"></a></li>
    				<li><a id="pex_4" href="#"><img src="readyStudies_files/HIV_vac_fireman_small.jpg" alt="Thumbnail-4" border="0" height="70" width="70"></a></li>
    				<li><a id="pex_5" href="#"><img src="readyStudies_files/HIV_vac_proud_small.jpg" alt="Thumbnail-5" border="0" height="70" width="70"></a></li>
    				<li><a id="pex_6" href="#"><img src="readyStudies_files/HIV_vac_cantget2_small.jpg" alt="Thumbnail-6" border="0" height="70" width="70"></a></li>
                    <li><a id="pex_7" href="#"><img src="readyStudies_files/HIV_vac_neverinfect_small.jpg" alt="Thumbnail-7" border="0" height="70" width="70"></a></li>
    			</ul>
    Last edited by ada80ro; Jul 6, 2006 at 02:12.

  3. #3
    SitePoint Zealot shiftless's Avatar
    Join Date
    Mar 2005
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    wow

    That's amazing that you did all that for me, but I have to say it's a bit complicated for me right now, I'll have to study it. But your original comment was correct, and just chaging the name of my function was all I needed to make it work *eyeroll*.

    So, not to dimiss the excellent help you offered, but I am going to stick with what I understand for now and study what you wrote to help me learn.

    Now, using things as they are on that same page, what if, above the image thumbnails, I wanted to have textlinks for "BACK" and "NEXT" as a second way to cycle through the images? Is it possible split the src of the 'pscreen' id image, and then convert the last substring from a string to it's equivalent number value, so that I may add or subtract and get the next image in the series? or am I barking up the wrong tree entirely?


Bookmarks

Posting Permissions

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