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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    rollover multiple images: almost done!

    hi all;
    i'm almost done with this little script but i can't figure out the finishing touch. basically i have an image gallery. there's like 8 thumbnails and then a main image holder. so when you rollover the thumbnails, the main image changes. now, i have the rollovers working and the main image chaning to correspond, BUT I CAN'T get the thumnails to stay on, if you rollout to blank space. also, i want the first thumbnail to appear on when the user comes to the page so they know which one is selected, and then to turn off when the user rolls over another thumbnail.
    am i making sense?

    here's my code so far:
    the main javascript in the header:
    <script>
    function chngMain(name){
    document.images['main'].src = "images/" + name + ".jpg";
    }
    </script>


    for the thumbnail images:
    <a href="#" onMouseOver="imgAdjJ('thm2', 'on');chngMain('imgGallery2')" onMouseOut="imgAdjJ('thm2', 'off');" onclick="javascript:chngMain('imgGallery2')"><img src="images/thm2_off.jpg" width="66" height="75" border="0" name="thm2"></a>


    and finally the main image:
    <img src="images/imgGallery1.jpg" width="329" height="384" border="0" name="main">

    can someone give me some direction?
    thanks so much.
    best,
    j

  • #2
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm looking to do the same thing. I'd love to see your example in action. Do you have a URL?
    bloome

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    try this shorter (a single function, for both events and for both actions, using id instead of names and this as self reference) variant:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    var 
    r1 ='images/';var r2='.jpg';
    function 
    roll(obj){
    var 
    obj.src.split('/')[obj.src.split('/').length-1].split('_');
    var 
    p[0].split('thm')[1];
    obj.src=(p[1].indexOf('off')==0)?r1+p[0]+'_on'+r2:r1+p[0]+'_off'+r2;//rollover effect
    document.getElementById('main').src=r1+'imgGallery'+q+r2;//changes the picture in main
    }
    onload=function(){//sets onload the first thumb on
    roll(document.getElementById('thm1'))
    }
    </script>
    </head>
    <body>
    <img src="images/thm1_off.jpg" id="thm1" width="66" height="75" border="0" style="cursor:pointer" onmouseover="roll(this)" onmouseout="roll(this)">
    <br>
    <img src="images/thm2_off.jpg" id="thm2" width="66" height="75" border="0" style="cursor:pointer" onmouseover="roll(this)" onmouseout="roll(this)">
    <br>
    <img src="images/thm3_off.jpg" id="thm3" width="66" height="75" border="0" style="cursor:pointer" onmouseover="roll(this)" onmouseout="roll(this)">
    ....
    ....
    <img src="images/imgGallery1.jpg" id="main" width="329" height="384" border="0">
    </body>
    </html> 
    Last edited by Kor; 08-19-2005 at 12:31 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    or
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body onload="sssInit('ThumbNails','sssMainImg','*Message*');" >
    <table border=1 cellspacing=1 cell padding=1 bgcolor=#FFCC66>
      <tr height="20" >
        <td colspan="3" align="center" style="font-Size:12px;" >
         Click the Thumb Image to Enlarge<br>
         Click the Large Image<br>
         to View in Picture Frames
        </td>
      </tr>
      <tr height="200" >
        <td colspan="3" align="center" >
        <img id="sssMainImg" src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/Initial.gif"  >
        </td>
      </tr>
      <tr>
        <td width=70 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" width=20 height=20 onclick="sssSSBack();" ></td>
        <td id="sssMessage" width=60 align="center" style="font-Size:12px;" >&nbsp;</td>
        <td width=70 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" width=20 height=20 onclick="sssSSFwd();" ></td>
      </tr>
    </table>
    <table id="ThumbNails" >
      <tr>
        <td align="center" width="70"><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/picasso.jpg" width=50 height=60 ></td>
        <td align="center"  width="70"><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/Pic1.jpg" width=50 height=60 ></td>
        <td align="center"  width="70"><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/Pic2.jpg" width=50 height=60 ></td>
      </tr>
      <tr>
        <td align="center"><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/picasso.jpg" width=60 height=50 ></td>
        <td align="center" ><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/Pic1.jpg" width=60 height=50 ></td>
        <td align="center" ><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/Pic2.jpg" width=60 height=50 ></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Simple Slide Show sssPart1 (02-07-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // A Simple Slide Show which includes
    // Display of a Large Image on Slide Show Forward or Back
    // Display of a Large Image on Clicking The Thumb Nail Image
    // Preloading of the Large Image before Displaying
    // Directory Swapping when preloading the large image.
    
    // The Thumb Nail and Large Image must have the same file name but different directories.
    // Directory Swapping is carried outwhen preloading the large image.
    
    // Application Notes
    
    // The ThumbNail Images are defined in HTML Code and nested within an Element
    // e.g.
    //<table id="*ThumbNails*" >
    //  <tr>
    //    <td align="center" width="70"><img  src="ThumbPortrait/picasso.jpg" width=50 height=60 ></td>
    //    <td align="center"  width="70"><img  src="ThumbPortrait/Pic1.jpg" width=50 height=60 ></td>
    //    <td align="center"  width="70"><img  src="ThumbPortrait/Pic2.jpg" width=50 height=60 ></td>
    //  </tr>
    //  <tr>
    //    <td align="center"><img  src="ThumbLandScape/picasso.jpg" width=60 height=50 ></td>
    //    <td align="center" ><img  src="ThumbLandScape/Pic1.jpg" width=60 height=50 ></td>
    //    <td align="center" ><img  src="ThumbLandScape/Pic2.jpg" width=60 height=50 ></td>
    //  </tr>
    // </table>
    
    // where:
    // *ThumbNails* = a unique id name (string)
    
    // The Large Image is Defined in HTML Code
    // e.g.  <img id="*LargeImageID*" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >
    
    // where:
    // *LargeImage* = a unique id name (string)
    // A 'Blank' .gif is the initial image src.
    
    // The Slide Show Controls are Defined in HTML Code
    // e.g.
    // <table>
    //  <tr>
    //    <td width=70 align="center" >
    //      <img src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" width=20 height=20 onclick="sssSSBack();" >
    //    </td>
    //    <td id="*Message*" width=60 align="center" style="font-Size:12px;" ></td>
    //    <td width=70 align="center" >
    //     <img src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" width=20 height=20 onclick="sssSSFwd();" >
    //    </td>
    //  </tr>
    // </table>
    
    // The onclick event call functions 'sssSSBack();' and 'sssSSFwd();' control the Side Show
    // A message to advise on Large Image preload statue is optional
    // where:
    // *Message* = a unique id name (string)
    
    // The Script is initalised from a <BODY> on load event
    // e.g. <body onload="sssInit('*ThumbNails*','*LargeImage*','*Message*');" >
    // where:
    // *ThumbNails* = a unique id name (string)
    // *LargeImage* = a unique id name (string)
    // *Message*    = a unique id name (string)
    
    // Directory Swapping
    // The Thumb Nail and Large Image must have the same file name
    // but different directories.
    // These Directories are defined in customising variables 'sssThumbDirectory' and 'sssLargeDirectory'
    // To allow a number of directory applications the directories are specified in dimensioned arrays.
    // When the directory of the Thumb Nail image matches a directory in 'sssThumbDirectory'
    
    // the location of the Large image will be the corresponding field of 'sssLargeDirectory'
    
    // All variable, function etc. names are prefixed with 'sss' to minimise conflicts with other JavaScripts.
    
    // The Functional Code sssPart2(less than 1.5K) is best as an Extenal JavaScript
    
    
    // Tested with IE6 and Mozilla FoxFire
    
    
    
    // Customising Variables
    
    var sssThumbDirectory = new Array('ThumbPortrait','ThumbLandScape');
    var sssMainDirectory  = new Array('LargePortrait','LargeLandScape');
    
    
    //-->
    </script>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // Simple Slide Show sssPart2 (02-07-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    
    // Functional Code - NO Need to change
    var sssTarget,sssImg,sssMess;
    var sssImgAry=new Array();
    var sssImage=new Array();
    
    var sssCnt=-1;
    
    function sssInit(tn,li,m){
     sssTarget=document.getElementById(li);
     sssImg=document.getElementById(tn).getElementsByTagName('IMG');
     sssMess=document.getElementById(m);
     for (sss0=0;sss0<sssImg.length;sss0++){
      sssImgAry[sss0]=sssImg[sss0];
      sssImg[sss0].nu=sss0-1;
    //  sssImg[sss0].onclick=function(){ sssCnt=this.nu; sssSSFwd(); }
      sssImg[sss0].onmouseover=function(){ sssCnt=this.nu; sssSSFwd(); }
    }
    }
    
    function sssSSBack(){
     sssCnt--;
     if (sssCnt<0){ sssCnt=sssImg.length-1; }
     sssLoad();
    }
    
    function sssSSFwd(){
     sssCnt++;
     if (sssCnt==sssImg.length){ sssCnt=0; }
     sssLoad();
    }
    
    function sssLoad(){
     if (sssImage[sssCnt]){
      sssTarget.src=sssImage[sssCnt].src;
     }
     else {
      if (sssMess){ sssMess.innerHTML='Please Wait'; }
      sssThisImg=sssImg[sssCnt];
      for (sss0=0;sss0<sssThumbDirectory.length;sss0++){
       sssImg[sssCnt].src=sssImg[sssCnt].src.replace(sssThumbDirectory[sss0],sssMainDirectory[sss0]);
      }
      sssImage[sssCnt]=new Image();
      sssImage[sssCnt].onload=function(){
                               if (sssMess){ sssMess.innerHTML='&nbsp;'; }
                               sssTarget.src=sssImage[sssCnt].src;
                              }
      sssImage[sssCnt].src=sssImg[sssCnt].src;
     }
    }
    
    
    
    //-->
    </script>
    
    </body>
    
    </html>
    edited to allow mouseover and onclick operation
    Last edited by vwphillips; 08-19-2005 at 12:54 PM.

  • #5
    Registered User
    Join Date
    Oct 2004
    Posts
    592
    Thanks
    0
    Thanked 1 Time in 1 Post
    why don't you use CSS for this ?

    http://forum.flashband.net/viewtopic.php?t=300

  • #6
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by iota
    why don't you use CSS for this ?

    http://forum.flashband.net/viewtopic.php?t=300
    Because CSS cannot change another objects properties on hover.
    Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

  • #7
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank You!

    thanks for all of your responses! i have a lot of feedback to put into use; thanks so much

  • #8
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    one last issue: last post i swear!

    thanks for all your time in helping me with the mouse over issue. i just have two issues that i need to figure out. just to let you know i've utilized the code provided by Kor; i've pasted that below. i'm trying to modify it to conquer these two issues:

    1.) right now the first thumbnail loads, that's great, but is there a way to have it turn off when another thumbnail is rolled over?


    2.) and is there a way to have the thumbnails stay "on" until another thumb is rolled over?

    again, thanks so much for your help...
    best,
    j

    HERE IS THE CODE!!!


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    var r1 ='images/';var r2='.jpg';
    function roll(obj){
    var p = obj.src.split('/')[obj.src.split('/').length-1].split('_');
    var q = p[0].split('thm')[1];
    obj.src=(p[1].indexOf('off')==0)?r1+p[0]+'_on'+r2:r1+p[0]+'_off'+r2;//rollover effect
    document.getElementById('main').src=r1+'imgGallery'+q+r2;//changes the picture in main
    }
    onload=function(){//sets onload the first thumb on
    roll(document.getElementById('thm1'))
    }
    </script>
    </head>
    <body>
    <img src="images/thm1_off.jpg" id="thm1" width="66" height="75" border="0" style="cursorointer" onmouseover="roll(this)" onmouseout="roll(this)">
    <br>
    <img src="images/thm2_off.jpg" id="thm2" width="66" height="75" border="0" style="cursorointer" onmouseover="roll(this)" onmouseout="roll(this)">
    <br>
    <img src="images/thm3_off.jpg" id="thm3" width="66" height="75" border="0" style="cursorointer" onmouseover="roll(this)" onmouseout="roll(this)">
    ....
    ....
    <img src="images/imgGallery1.jpg" id="main" width="329" height="384" border="0">
    </body>
    </html>

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    try:
    PHP Code:
    <script type="text/javascript">
    var 
    r1 ='images/';var r2='.jpg';
    function 
    roll(obj){
    if(
    document.getElementById('thm1')!=obj){document.getElementById('thm1').src=r1+'thm1_off'+r2}
    var 
    obj.src.split('/')[obj.src.split('/').length-1].split('_');
    var 
    p[0].split('thm')[1];
    if(
    p[1].indexOf('off')==0){document.getElementById('main').src=r1+'imgGallery'+q+r2;}
    obj.src=(p[1].indexOf('off')==0)?r1+p[0]+'_on'+r2:r1+p[0]+'_off'+r2;//rollover effect
    }
    onload=function(){//sets onload the first thumb on
    roll(document.getElementById('thm1'))
    }
    </script> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by SpirtOfGrandeur
    Because CSS cannot change another objects properties on hover.
    http://www.meyerweb.com/eric/css/edge/popups/demo2.html
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #11
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts

    True you can get child elements to change, but in a document of this type and layout that he is looking for, there would be no way to get it to work.
    Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by SpirtOfGrandeur
    True you can get child elements to change, but in a document of this type and layout that he is looking for, there would be no way to get it to work.
    It might or might not be possible. But I just thought it seemed you "generalized" it.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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