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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    676
    Thanks
    1
    Thanked 0 Times in 0 Posts

    onclick change thumbnail and larger image...AAANNNDDD...

    *peeks into the ol' coding forum n' sooo glad its still just a here®!!!

    k...heres the scenerio...

    there are four 'thumbs' in row 1...thumb1 thumb2 thumb3 and thumb4

    there is one just a large® image in row 2 that changes when the respective thumb is clicked from row 1...AND @ the same time??? the thumb that was clicked just a changes® too...

    so now when the viewer just a clicks® thumb2....the big picture should change to BIG 2...the thumb1 should go back to its 'off' state n' thumb2 should be in its 'on' state...

    /me found just a script® that does it for two thumbs...aka they change back when one or the other is click...BUTTT.../me cant just a copy® the script changing values to make it work when thumbs 3 and 4 are added into the mix...:O(((

    heres what /me has so far...

    Code:
    <a href="javascript:changeImage('front1.jpg')"><img src="news.jpg" id="1"  onclick="set(this.id)" width="30" height="30" border="0"></a>
    <a href="javascript:changeImage('front2.jpg')"><img src="gallery.jpg" id="2"  onclick="set(this.id)" width="30" height="30" border="0"></a>
    <a href="javascript:changeImage('front3.jpg')">3</a>
    <a href="javascript:changeImage('front4.jpg')">4</a>

    and for the 'large' image its...
    Code:
    <img name="mainimage" src="front1.jpg" width="700" height="304" border="0" alt="">'
    the above uses coding as just a follows®...

    Code:
    <script type="text/javascript">
    function set(val)
    {
         var path=document.getElementById(val).src;
    	 var start=path.lastIndexOf("/")+1;
    	 var end=path.lastIndexOf(".");
    	 var source = path.substring(start,end);
    	 //alert(type);
    	 if(val==1)
    	 {
    		 document.getElementById("2").setAttribute("src","gallery.jpg");
    		if(source=="news")
    		  document.getElementById(val).setAttribute("src","news1.jpg");
    		else if(source=="news1")
    		  document.getElementById(val).setAttribute("src","news.jpg");
    	 }
    	  if(val==2)
    	 {
    		 document.getElementById("1").setAttribute("src","news.jpg");
    		if(source=="gallery")
    		  document.getElementById(val).setAttribute("src","gallery1.jpg");
    		else if(source=="gallery1")
    		  document.getElementById(val).setAttribute("src","gallery.jpg"); 
    	 }
    	
    }
    </script>
    n' too have this script in play being used to 'change' the big image...
    Code:
    <script language="JavaScript" type="text/javascript">
    
    function changeImage(filename)
    {
       document.mainimage.src = filename;
    }
    </script>
    sooooooo...
    what /me is trying to do is get the numbers three and four into the 'when clicked be the large coloured square'... AND if one of the other 4 are clicked the one you were just one goes back to just a small®...:O)

    Code:
    <a href="javascript:changeImage('front1.jpg')"><img src="news.jpg" id="1"  onclick="set(this.id)" width="30" height="30" border="0"></a>
    <a href="javascript:changeImage('front2.jpg')"><img src="gallery.jpg" id="2"  onclick="set(this.id)" width="30" height="30" border="0"></a>
    <a href="javascript:changeImage('front3.jpg')"><img src="promotion.jpg" id="3"  onclick="set(this.id)" width="30" height="30" border="0"></a>
    <a href="javascript:changeImage('front4.jpg')"><img src="community.jpg" id="4"  onclick="set(this.id)" width="30" height="30" border="0"></a>

    *just a whispers®...
    /me has seen scripts/css that just put just a border® 'round the thumbnail which is just a 'downsized copy'®of the large one.....where as THE SCRIPT just a bove®...one uses two graphics for EACH of the four links...news and news1... gallery and gallery1...n' /me would like to have large/small boxes vs a shrunk big one...:O(



    just a huuugggsss® to all that just a remember® /me n' just a BIGGER® hugs to those who can just a help® :O)))
    Last edited by justame; 11-19-2010 at 10:35 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 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 type="text/javascript">
    function set(obj,src){
     if (set.lst&&set.lst[0]!=obj){
      set.lst[0].src=set.lst[1];
     }
     set.lst=[obj,obj.src];
     var path=obj.src.substring(0,obj.src.lastIndexOf("/")+1);
     obj.src=path+src;
    }
    </script></head>
    
    <body>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"  onclick="set(this,'Eight.gif')" width="30" height="30" border="0">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif"  onclick="set(this,'Eight.gif')" width="30" height="30" border="0">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif"  onclick="set(this,'Eight.gif')" width="30" height="30" border="0">
    
    </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/

  • Users who have thanked vwphillips for this post:

    justame (11-19-2010)

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    676
    Thanks
    1
    Thanked 0 Times in 0 Posts
    just a BIGGESTEVER® HUGGGSSS to ya vic!!!

    youre my just a hero® of the day!!!

    hugs as just a lways® n' just a gain® thank YOU!!!


  •  

    Posting Permissions

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