PDA

View Full Version : Image Selector



dalbeck
12-06-2007, 03:56 PM
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
12-06-2007, 05:34 PM
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
12-06-2007, 05:47 PM
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
12-06-2007, 05:48 PM
I was wondering the same thing. Thanks for the coding.

jscheuer1
12-07-2007, 08:58 AM
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
12-10-2007, 05:26 PM
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
12-10-2007, 05:55 PM
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
12-10-2007, 07:53 PM
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
12-11-2007, 06:27 AM
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
12-11-2007, 02:25 PM
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.

jscheuer1
12-12-2007, 03:11 PM
How a bout a demo? You could include just two sample background images, the logo, and enough markup and code to demonstrate the problem. Upload that to a server and test that it is showing the problem, and give me a link to that. Or test it locally, to see that it accurately represents the problem, then create a zip archive of the files involved, and attach that to a post.

Screen shots are almost never enough to go on.

Also, you raise another issue. Since you say this is for an intranet, does that mean that we will only be dealing with one or two browsers? Think about this. If people can access this intranet from home, or if they are allowed to use the browser of their choice on their work computer, or if you don't know all about the possible viewing circumstances for this intranet, the answer is no.

If the answer is yes, which browser(s)?