Image Selector

[dalbeck]

Hello everyone,

I am trying to find a javascript that will allow the user to see about 4 - 5 small thumbnail images at the top of the page. When they select one it will change the background of the banner to whatever that image is whether it be leaves, snow, trees, different color but keep the logo. Can anyone help me out with this, or point me in the right direction? Thank you for your help!

[jscheuer1]

Set things up something like so with your banner:

<div id="banner_bg"><img src="logo.gif"></div>

Then you can just do this with any existing pair of thumbnail and background images and place it anywhere on your page that you like:

<img src="thumb1.jpg" alt="Background Thumnail" title="whatever"
onclick="document.getElementById('banner_bg').style.backgroundImage='url(bg1.jpg)';">

[dalbeck]

hmm this is going to be a little tricky, since I am using Joomla CMS for this.

<a href="<?php echo $mosConfig_live_site;?>" title=""><span id="logo">&nbsp;</span></a>
			          			
                                <div id="top">

that is the code for where the "banner" is. The css contains all of the information for the banner in the #logo and #top id's.

#logo {
	position: absolute;
	top: 35px;
	left: 25px;
	display: block;
	width:350px;
	height: 66px;
	background: url(../images/logo.png) no-repeat;
}

#top {
	height: 60px;
	padding-top: 35px;
	overflow: hidden;
	margin-left: 395px;
	margin-bottom: 10px;
	margin-right: 25px;
	color: #999;
}

The code provided in your response didn't quite show up in the Joomla Template. Any ideas? Thanks again!

[lstammer]

I was wondering the same thing. Thanks for the coding.

[jscheuer1]

You would just need to make a container for it:

<div id="banner_bg">
<a href="<?php echo $mosConfig_live_site;?>" title=""><span id="logo">&nbsp;</span></a>
</div>

Set the style for banner_bg to include height and width greater than for logo, transfer its positioning to the container, and center it in the container:

	#banner_bg {
	position: absolute;
	top: 35px;
	left: 25px;
	width:370px;
	height: 86px;
}

	#logo {
	margin:10px auto;
	display: block;
	width:350px;
	height: 66px;
	background: url(../images/logo.png) no-repeat;
}

Some other adjustments in markup and/or more likely style may still need to be made. But this has nothing to do with the scripting of the background changes.

[dalbeck]

Ok, I have it working to an extent. How do you get the image bg to stay? After I click on the image that I want as the bg, it goes back to the original when I go to another page or refresh. I want to set it up to stay at what they chose, and one of the choices will be to make it the default again. I appreciate your help!!

[jscheuer1]

With Joomla, or any CMS, even simply with a PHP supporting host, you can set a server side cookie in the user's profile. I won't go into that, as it isn't my area of expertise, but it would probably be the best method.

Using javascript, you can add these quirksmode.org cookie functions to the page (in the head in either a script bock or as an external script):

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

Then when you set the bg, also set the cookie:

<img src="thumb1.jpg" alt="Background Thumnail" title="whatever"
onclick="document.getElementById('banner_bg').style.backgroundImage='url(bg1.jpg)';
createCookie('banner_bg','bg1.jpg',50);">

50 will be the number of days persistence. Then, where you have this markup:

<div id="banner_bg">
<a href="<?php echo $mosConfig_live_site;?>" title=""><span id="logo">&nbsp;</span></a>
</div>

Add to it:

<div id="banner_bg">
<a href="<?php echo $mosConfig_live_site;?>" title=""><span id="logo">&nbsp;</span></a>
</div>
<script type="text/javascript">
;(function(){
var bg=readCookie('banner_bg')? readCookie('banner_bg') : 'some.jpg';
document.getElementById('banner_bg').style.backgroundImage='url('+bg+')';
})();
</script>

some.jpg is the default background image.

[dalbeck]

That worked great! Thank you so much for all of your help. The one final problem I am running in to is the image that is selected is appearing about 30px or so higher than it should be (starting) Any ideas? I have messed around with the CSS for quite some time now. If you would like I can provide a screenshot.

[jscheuer1]

A link to the live page would be better.

Please post a link to the page on your site that contains the problematic code so we can check it out.

[dalbeck]

Well, I really cannot supply a Live link. I am developing this on my machine using WAMP. It is being made in to a company intranet, and we are just waiting on the server to come in for it to go on. The best I could do is provide screen shots, and sample of the code.