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 18
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question multi image change with drop down menu?

    I would like to setup a theme to my site so a user can select the look of the site?! if I set up an image changer chooser this would be great, I need to change the top image, bottom image, logo and background colour?! How easy is this? is there a tutorial anywhere I could use?!

    http://www.mutedesigns.co.uk/ws

  • #2
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    anyone?

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    please help?!

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    this should help
    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">
    <!--
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    
    function ChangeImg(obj,id){
     if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
     var img=document.getElementById(id);
     img.src=ImgPath+obj.options[obj.selectedIndex].value;
     f19_SetFormCookie();
    }
    
    function Set(){
     ChangeImg('Sel1','Img1')
    
    }
    //-->
    </script></head>
    
    <body onload="f19_GetFormCookie();Set()" >
    <table>
     <tr>
      <td title="f19_Include">
    <select id="Sel1" onchange="ChangeImg(this,'Img1');">
    <option value="Two.gif" >Fred</option>
    <option value="Three.gif" >Tom</option>
    </select>
      </td>
     </tr>
    </table>
    <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif">
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // Form Compendium f19_Part1 (12-05-2005)
    // Form Cookie
    // by Vic Phillips http://www.vicsJavaScripts.org.uk
    
    // A Cookie Script to Store and Retrieve
    // the values and states of common form elements
    // TEXT BOXES   - value
    // TEXT AREA    - value
    // CHECK BOX    - checked state
    // RADIO BUTTON - checked state
    // SELECT LIST  - selected Index
    
    // Application Notes and Customising Variables
    
    // Application Notes
    
    // Values and states of each element are stored
    // as the page is unloaded or form submitted.
    
    // The storage duration is specified by a customising variable
    
    // Stored values and states of elements included in the cookie
    // are re-established as the page is reloaded.
    
    // The number and type of elements included must respect
    // the maximum cookie size of 4K.
    
    // The Retrieval is initialised by a <BODY> onload event
    // The Storage occurs on a <BODY> onunload event
    // e.g.
    //  <body onload="f19_GetFormCookie();" onunload="f19_SetFormCookie();" >
    
    
    // To include a form element in the Store and Retrieve
    // it must be child nodes of an element with a title of 'f19_Include'
    // e.g.
    // <span title="f19_Include" >
    // <INPUT type="text" size="10" >
    // <INPUT type="checkbox >
    // </span>
    
    // There may be any number of elements titled 'f19_Include' on a page
    // and as many child elements of each 'f19_Include' as required.
    
    // All variable, function etc. names are prefixed with 'f19_'
    // to minimise conflicts with other JavaScripts
    
    
    // Customising Variables
    
    var f19_Days=1;       // The cookie will be available on revisits for a specified number of days
    var f19_Cookie='My Form';        // The Cookie name
    
    //-->
    </script>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // Form Compendium f19_Part2 (12-05-2005)
    // Form Cookie
    // by Vic Phillips http://www.vicsJavaScripts.org.uk
    
    
    // Functional Code
    
    // No Need To Change ***************************
    var f19_TBAry=new Array();
    var f19_RCAry=new Array();
    var f19_TAAry=new Array();
    var f19_SLAry=new Array();
    
    var f19_TBString,f19_RCString,f19_TAString,f19_SLString;
    var f19_,f19_exp,f19_st,f19_len,f19_end,f19_st;
    
    var f19_Exp=new Date(new Date().getTime()+f19_Days*86400000).toGMTString();
    
    function f19_GetFormCookie(){
     f19_TBString=f19_GetCookie(f19_Cookie+'TB');
     f19_RCString=f19_GetCookie(f19_Cookie+'RC');
     f19_SLString=f19_GetCookie(f19_Cookie+'SL');
     f19_TAString=f19_GetCookie(f19_Cookie+'TA');
     f19_=document.getElementsByTagName('*');
     for (f19_0=0;f19_0<f19_.length;f19_0++){
      if (f19_[f19_0].title=='f19_Include'){
       f19_Inc=f19_[f19_0].getElementsByTagName('*');
       for (f19_1=0;f19_1<f19_Inc.length;f19_1++){
        if (f19_Inc[f19_1].tagName=='INPUT'){
         if (f19_Inc[f19_1].type=='text'){
          f19_TBAry[f19_TBAry.length]=f19_Inc[f19_1];
         }
         if (f19_Inc[f19_1].type=='radio'||f19_Inc[f19_1].type=='checkbox'){
          f19_RCAry[f19_RCAry.length]=f19_Inc[f19_1];
         }
        }
        if (f19_Inc[f19_1].tagName=='TEXTAREA'){
         f19_TAAry[f19_TAAry.length]=f19_Inc[f19_1];
        }
        if (f19_Inc[f19_1].tagName=='SELECT'){
         f19_SLAry[f19_SLAry.length]=f19_Inc[f19_1];
        }
       }
      }
     }
     if (f19_TBString){
      for (f19_1=0;f19_1<f19_TBAry.length;f19_1++){
       f19_TBAry[f19_1].value=f19_TBString.split('~^~')[f19_1];
      }
     }
     if (f19_RCString){
      for (f19_2=0;f19_2<f19_RCAry.length;f19_2++){
       f19_RCAry[f19_2].checked=false;
       if (f19_RCString.split('~^~')[f19_2]=='true'){
        f19_RCAry[f19_2].checked=true;
       }
      }
     }
     if (f19_TAString){
      for (f19_3=0;f19_3<f19_TAAry.length;f19_3++){
       f19_TAAry[f19_3].value=f19_TAString.split('~^~')[f19_3];
      }
     }
     if (f19_SLString){
      for (f19_4=0;f19_4<f19_SLAry.length;f19_4++){
       f19_SLAry[f19_4].selectedIndex=f19_SLString.split('~^~')[f19_4];
      }
     }
    }
    
    function f19_GetCookie(name) {
     var f19_st=document.cookie.indexOf(name+"=");
     var f19_len=f19_st+name.length+1;
     if ((!f19_st)&&(name != document.cookie.substring(0,name.length))) return null;
     if (f19_st==-1) return null;
     var f19_end=document.cookie.indexOf(";",f19_len);
     if (f19_end==-1) f19_end=document.cookie.length;
     return unescape(document.cookie.substring(f19_len,f19_end));
    }
    
    function f19_SetFormCookie(value){
     f19_TBString='';
     for (f19_0=0;f19_0<f19_TBAry.length;f19_0++){
      f19_TBString+=f19_TBAry[f19_0].value+'~^~';
     }
     document.cookie=f19_Cookie+"TB="+escape(f19_TBString)+";expires="+f19_Exp+";path=/;"
     f19_RCString='';
     for (f19_1=0;f19_1<f19_RCAry.length;f19_1++){
      f19_RCString+=f19_RCAry[f19_1].checked+'~^~';
     }
     document.cookie=f19_Cookie+"RC="+escape(f19_RCString)+";expires="+f19_Exp+";path=/;"
     f19_TAString='';
     for (f19_0=0;f19_0<f19_TAAry.length;f19_0++){
      f19_TAString+=f19_TAAry[f19_0].value+'~^~';
     }
     document.cookie=f19_Cookie+"TA="+escape(f19_TAString)+";expires="+f19_Exp+";path=/;"
     f19_SLString='';
     for (f19_1=0;f19_1<f19_SLAry.length;f19_1++){
      f19_SLString+=f19_SLAry[f19_1].selectedIndex+'~^~';
     }
     document.cookie=f19_Cookie+"SL="+escape(f19_SLString)+";expires="+f19_Exp+";path=/;"
    }
    
    
    //-->
    </script>
    </body>
    
    </html>
    serverside persistance would be better
    Last edited by vwphillips; 01-25-2006 at 04:03 PM.

  • #5
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, that helped but say if i wanted 4 images to change at the same time, i tried adding another 4 line and changing the NAME and ID as seen below:

    Code:
    <select id="Sel1" onchange="ChangeImg(this,'Img1');">
      <option value="One.gif">default</option>
      <option value="Two.gif">Fred</option>
    <option value="Three.gif" >Tom</option>
    </select>
      </td>
     </tr>
    </table>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" name="Img1" id="Img1">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" name="Img2" id="Img2">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" name="Img3" id="Img3">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" name="Img4" id="Img4">
    is there something i have to do to this line:
    Code:
    <select id="Sel1" onchange="ChangeImg(this,'Img1');">
    to tell it to change Img2 Img3 and Img4 ?

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 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">
    <!--
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    
    function ChangeImg(obj,id){
     var imgs=obj.options[obj.selectedIndex].value.split(',');
     var objs=id.split(',');
     for (var zxc0=0;zxc0<objs.length;zxc0++){
      objs[zxc0]=document.getElementById(objs[zxc0]);
      objs[zxc0].src=ImgPath+imgs[zxc0];
     }
    }
    
    //-->
    </script>
    </head>
    <select id="Sel1" onchange="ChangeImg(this,'Img1,Img2,Img3,Img4');">
      <option value="One.gif,One.gif,One.gif,One.gif">default</option>
      <option value="Four.gif,One.gif,Two.gif,Three.gif">Fred</option>
    <option value="One.gif,Three.gif,Two.gif,Four.gif" >Tom</option>
    </select>
      </td>
     </tr>
    </table>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" name="Img1" id="Img1">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" name="Img2" id="Img2">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" name="Img3" id="Img3">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" name="Img4" id="Img4">
    <body>
    
    </body>
    
    </html>

  • #7
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    yay!

    thanks! now, I have changed things round to suit my site and so that the images change when someone selects what theme, how do I set NAME or ID to a background image?! ie; 'Img3' this is what i have so far...

    http://www.mutedesigns.co.uk/ws/test1.asp
    Last edited by boyjarv; 01-27-2006 at 02:44 PM.

  • #8
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    Pleeeeeeeease Help!!

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    you can change the




    obj.className='NewClassName"
    or

    obj,style.backgroundImage="url(newimage.gif)";

  • #10
    New Coder
    Join Date
    Jan 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips
    you can change the




    obj.className='NewClassName"
    or

    obj,style.backgroundImage="url(newimage.gif)";
    whereabouts do i put this? I want it to change background when I select GREY (option 2)

    Also is there a drop down box script that changes the CSS?

  • #11
    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>
    <style type="text/css">
    <!--
    body {
     background-image:url('http://www.vicsjavascripts.org.uk/StdImages/One.gif');
    }
    
    -->
    </style>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    
    function ChangeImg(obj,id){
     var img=obj.value;
     alert((ImgPath+obj.options[obj.selectedIndex].value));
     document.getElementById(id).style.backgroundImage='url(\''+(ImgPath+obj.options[obj.selectedIndex].value)+'\')';
    }
    
    //-->
    </script>
    </head>
    <body id="Bdy" >
    
    <select id="Sel1" onchange="ChangeImg(this,'Bdy');">
      <option value="One.gif">default</option>
      <option value="Four.gif">Fred</option>
    <option value="Three.gif" >Tom</option>
    </select>
      </td>
     </tr>
    </body>
    
    </html>

  • #12
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I need a JavaScript code that could, group images into categories.. There’s going to be about 100+ images. Some images can be displayed more than once based on what category you selected. i.e. animals, nature, technology, etc.

    I tried the sample codes above which what I am looking for, however I want something more robust, flexible and manageable for 100+ images.

    Would appreciate help on this.

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    google for image gallery

    or

    http://www.vicsjavascripts.org.uk/Ba...hSlideShow.htm

    there is no need to pm me I will answer forum questions as best I can and have time for
    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/

  • #14
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    My recommendation would be to define your themes as classes in a CSS file. Then use IDs or classes to define the background images you want, as well as the color scheme, like so:

    Code:
    body.theme1{
      color: red;
      background-color: black;
    }
    
    body.theme1 .header {
      background-image: url('/images/theme1header.gif');
    }
    
    body.theme2 {
      color: black;
      background-color: white;
    }
    
    body.theme2 .header {
      background-image: url('/images/theme2header.gif');
    }
    Then you can very easily make theme changes with javascript by changing the class on your body:

    Code:
    function changeTheme(themeName)
    {
    document.body.className = themeName;
    }
    And your pull down box (simple example):

    Code:
    <select onchange="changeTheme(this.value);">
    <option value="theme1">Red on Black</option>
    <option value="theme2">Black on White</option>
    </select>

  • #15
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips
    google for image gallery

    or

    http://www.vicsjavascripts.org.uk/Ba...hSlideShow.htm

    there is no need to pm me I will answer forum questions as best I can and have time for
    =============

    Thanks for the reply. But do you have any simplied JS version of that?


  •  
    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
    •