...

View Full Version : multi image change with drop down menu?



boyjarv
01-25-2006, 01:42 AM
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
:)

boyjarv
01-25-2006, 12:15 PM
anyone?

boyjarv
01-25-2006, 04:25 PM
please help?!

vwphillips
01-25-2006, 05:00 PM
this should help


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

boyjarv
01-26-2006, 01:51 PM
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:


<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:
<select id="Sel1" onchange="ChangeImg(this,'Img1');"> to tell it to change Img2 Img3 and Img4 ?

vwphillips
01-26-2006, 02:26 PM
<!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>

boyjarv
01-27-2006, 03:17 PM
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

boyjarv
01-27-2006, 04:47 PM
Pleeeeeeeease Help!!

vwphillips
01-28-2006, 10:22 AM
you can change the




obj.className='NewClassName"
or

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

boyjarv
01-29-2006, 03:55 PM
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?

vwphillips
01-29-2006, 06:45 PM
or

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

jamry
03-07-2006, 05:31 PM
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.

vwphillips
03-07-2006, 07:27 PM
google for image gallery

or

http://www.vicsjavascripts.org.uk/BatchSlideShow/BatchSlideShow.htm

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

Beagle
03-07-2006, 07:38 PM
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:



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:



function changeTheme(themeName)
{
document.body.className = themeName;
}


And your pull down box (simple example):



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

jamry
03-07-2006, 09:53 PM
google for image gallery

or

http://www.vicsjavascripts.org.uk/BatchSlideShow/BatchSlideShow.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?

vwphillips
03-07-2006, 11:04 PM
what do you want simplified?

jamry
03-07-2006, 11:58 PM
The JS code.

vwphillips
03-08-2006, 06:15 PM
<!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">
<!--

//-->
</script>
</head>

<body>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum