Jump to content
Sign in to follow this  
GoDxNero

"changing Background Image Onclick"

Recommended Posts

Hi guys. I am kinda new to this forum as well html, I just started a few weeks ago. I hope we can be friendly ^^.Alright there is my little probleem:I got my background from the body class source :

<body class="home">

There is it in stylesheet :

body.home{background-image:url('background1.jpg');background-repeat:no-repeat;background-attachment:fixed}

I want to change my body background image when i click on one of those following icons(small model of the originale size of the other backgrounds):

<div class="bgs">Background selector:<div class="bg"><img id="bg" src="Background1.jpg" /></div><div class="bg"><img id="bg" src="Background2.jpg" /></div><div class="bg"><img id="bg" src="Background3.jpg" /></div><div class="bg"><img id="bg" src="Background4.jpg" /></div><div class="bg"><img id="bg" src="Background5.jpg" /></div><div class="bg"><img id="bg" src="Background6.jpg" /></div><div class="bg"><img id="bg" src="Background7.jpg" /></div><div class="bg"><img id="bg" src="Background8.jpg" /></div></div>

I tried few onclicks events but none of them worked... like:

<div class="bg"><img id="bg" src="Background1.jpg" onclick="this.style.background-image:url(Background1.jpg) /></div>

but its not working... I dont really understand the probleem, perhaps I gotta use javascripts since none of the css's work for this ?My aim is to change the background on click events without losing "background-repeat:no-repeat" and "background-attachment:fixed" . And hopefully the background wont auto change back to the origineel when I refresh the page or when I go to the next page ( The selected background appears on every page except when I select a new one on my background list ) Is there any simple way to solve this probleem ? Well, it doesnt really matter if its simple or not ^^ I just prefer simple because I have to explain everythings later to my teacher when I am done with my html :) .Thanks alots if anyone can help me :).This site got an example of exactly what I want but I just cant understand how to do it :) : http://www.mangafox.com

Edited by Nero

Share this post


Link to post
Share on other sites

In Javascript the hyphen is used for subtraction. When you need to reference a CSS property that has a hyphen you use camelcase instead.this.style.backgroundImage:url(Background1.jpg)Also, you can't have more than one element with the same ID, each of those images needs a unique ID or none at all.

Share this post


Link to post
Share on other sites

Also, as it stands, the "this.style.backgroundImage" is referring to the img element rather than the body. Once you get the other stuff sorted out, you might try:

document.body.style.backgroundImage = "url(theimage.jpg)";

Share this post


Link to post
Share on other sites

I just tried it out but doesnt seem to workBody :

<body class="home" onload="startklok()"><div class="bgs">Background's<div class="bg"><img id="bg" src="Background1.jpg" onclic="this.style.backgroundImage:url(Background1.jpg)" /></div><div class="bg"><img id="bg" src="Background2.jpg" onclic="this.style.backgroundImage:url(Background2.jpg)" /></div><div class="bg"><img id="bg" src="Background3.jpg" onclic="this.style.backgroundImage:url(Background3.jpg)" /></div><div class="bg"><img id="bg" src="Background4.jpg" onclic="this.style.backgroundImage:url(Background4.jpg)" /></div><div class="bg"><img id="bg" src="Background5.jpg" onclic="this.style.backgroundImage:url(Background5.jpg)" /></div><div class="bg"><img id="bg" src="Background6.jpg" onclic="this.style.backgroundImage:url(Background6.jpg)" /></div><div class="bg"><img id="bg" src="Background7.jpg" onclic="this.style.backgroundImage:url(Background7.jpg)" /></div><div class="bg"><img id="bg" src="Background8.jpg" onclic="this.style.backgroundImage:url(Background8.jpg)" /></div></div></body>

StyleSheet:

body.home{background-image:url('Afbeeldingen/Achtergrond1.jpg');background-repeat:no-repeat;background-attachment:fixed}div.bgs{border:4px solid blue;text-align:center;font-weight:bold;color:green;width:110px;height:78px;margin-top:10px;background-color:black}div.bg{border:1px solid white;width:19px;height:19px;margin:3px 3px;float:left}img#bg{width:100%;height:100%}

Perhaps because I put my background in a body class ? If so is there a way to change the background without changing the current setting ?Is it possible to onclick change body class style ? mine : onclick="this.style.body=body.home2" doesnt work"

Share this post


Link to post
Share on other sites
Also, as it stands, the "this.style.backgroundImage" is referring to the img element rather than the body. Once you get the other stuff sorted out, you might try:
document.body.style.backgroundImage = "url(theimage.jpg)";

this not work too : ( . Is this with javascript ?

Share this post


Link to post
Share on other sites

Yes, that is Javascript. Make sure you're using the correct path to the background image.

Share this post


Link to post
Share on other sites
Yes, that is Javascript. Make sure you're using the correct path to the background image.
Got no idea how to start the javascript. Cant find it on w3school , please anyone send me a link to this tutorial .

Share this post


Link to post
Share on other sites

We've been doing Javascript this whole time...although I noticed that your original code was wrong, I didn't notice that before. The code from jesh goes in your onclick handler. Just make sure you spell "onclick" correctly.

Share this post


Link to post
Share on other sites
We've been doing Javascript this whole time...although I noticed that your original code was wrong, I didn't notice that before. The code from jesh goes in your onclick handler. Just make sure you spell "onclick" correctly.
oh yes . thanks for noticing . It still doesnt work, i dont have any js in my html .Guess i gotta check around google for some tutorial on this area :) . . Srry for being noob ^^

Share this post


Link to post
Share on other sites

Make sure the entire attribute looks like this:onclick="document.body.style.backgroundImage = 'url(image.jpg)'"I suspect you may be getting the quotation marks incorrect. Always use single quotes inside double quotes. If you need more than two levels of quotation marks, use the escape character. (You should not need that in this case.)

Edited by Deirdre's Dad

Share this post


Link to post
Share on other sites
Make sure the entire attribute looks like this:onclick="document.body.style.backgroundImage = 'url(image.jpg)'"I suspect you may be getting the quotation marks incorrect. Always use single quotes inside double quotes. If you need more than two levels of quotation marks, use the escape character. (You should not need that in this case.)
Oo IT WORKED LIKE A CHARM : ) . Thanks alots !!! Just noticed I miss a few things before :) How can I keep the background I choose when I goes to the next page ? Like when I refresh the page and the selected background wont change. Anyway thanks alots ^^ Edited by Nero

Share this post


Link to post
Share on other sites

You could store the value in a cookie, and then have a small script at the top of every page that looks for the cookie and sets the background color based on what it finds.

Share this post


Link to post
Share on other sites
You could store the value in a cookie, and then have a small script at the top of every page that looks for the cookie and sets the background color based on what it finds.
Is there no other way ? :) I dont really know much about cookies .

Share this post


Link to post
Share on other sites

I dont really understand anymore of this :) . Please someone explain me . On the site there is not any explaination about the code so I just tried messing around and change a few things ... Can someone tell me what to do next ? I want the cookie to save the current background setting and onload of the page it loads the current setting . So if I refresh or goes to the next page the background remains the same .

function setCookie(background,value,expiredays){var exdate=new Date();exdate.setDate(exdate.getDate()+expiredays);document.cookie=background+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());}function getCookie(background){if (document.cookie.length>0)  {  c_start=document.cookie.indexOf(background + "=");  if (c_start!=-1)    {    c_start=c_start + c_name.length+1;    c_end=document.cookie.indexOf(";",c_start);    if (c_end==-1) c_end=document.cookie.length;    return unescape(document.cookie.substring(c_start,c_end));    }  }return "";}function checkCookie(){background=getCookie('background');if (background=")  {  document.getElementById("  ").style.backgroundimage=get_cookie("bg");  }}

Share this post


Link to post
Share on other sites

There was really no need to change the setCookie function. You would call it like this:

setCookie ("background", "2", 180);

which means: create a cookie called "background", set its value to "2", and it expires in 180 days.The only function you want to customize is checkCookie(). Based on code we've discussed earlier, this is one way to go:

function checkCookie() {	var background = getCookie("background");	if (background != "") {		var bg_image = "url(background" + background + ".jpg)";		document.body.style.backgroundImage = bg_image;	}}

Share this post


Link to post
Share on other sites

Thanks alots . I have just edited the url abit because all my pictures are in a document called "Afbeeldingen" and within this documents there are 16 background which names from "Achtergrond01.jpg" to "Achtergrond16.jpg" So the url which I currently have to get the background is Afbeeldingen/Achtergrond##.jpg . Wonder if i did it right in the code below but seems like its wrong coz it not work. I did two things : Put this code in my javascript file and in the body of the html <body onload="startclock();checkCookie()"> because I also use a java script clock for a timer on my html . What have I done wrong ? :< Oh and I just changed the expires date to 1 .

setCookie ("background", "2", 1);function checkCookie() {   var background = getCookie("background");   if (background != "") {        var bg_image = "url(Afbeeldingen/" + background + ".jpg)";        document.body.style.backgroundImage = bg_image;   }}

<body class="home" onload="startclock();checkCookie()">Stylesheet //body.home{background-image:url('Afbeeldingen/Achtergrond01.jpg');background-repeat:no-repeat;background-attachment:fixed}

I use this to change background

<div class="bgs">Achtergronden<div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-01.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond01.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-02.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond02.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-03.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond03.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-04.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond04.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-05.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond05.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-06.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond06.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-07.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond07.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-08.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond08.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-09.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond09.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-10.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond10.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-11.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond11.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-12.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond12.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-13.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond13.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-14.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond14.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-15.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond15.jpg)'" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-16.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond16.jpg)'" /></div></div>

Edited by Nero

Share this post


Link to post
Share on other sites

Try this instead:var bg_image = "url(Afbeeldingen/Achtergrond" + background + ".jpg)";If that doesn't work, try some debugging. alert (background) will tell you if you have set the cookie correctly and retrieved it correctly.

Share this post


Link to post
Share on other sites

Just tried this but nothings show up . If I understand correctly the " setCookie ("background", "2", 1); " only create a cookie and give it a name right ? So this code " var background = getCookie("background"); " make that the cookie realise which is my current background or just get the cookie by name ? So if my current background name is Achtergrond01.jpg then " var background = getCookie("background");" var background will be Achtergrond01 . But I didnt give any specifiek name to my backgrounds . I only give the url of my background to onclick events :<img id="bg" src="Afbeeldingen/Bg-icon-01.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond01.jpg)'" />Afbeeldingen/Bg-icon-01.jpg is a small model of Afbeeldingen/Achtergrond01.jpg which I used as a small icon to click on .

setCookie ("background", "2", 1);function checkCookie() {   var background = getCookie("background");   if (background != "") {        alert (background);        var bg_image = "url(Afbeeldingen/Achtergrond" + background + ".jpg)";        document.body.style.backgroundImage = Afbeeldingen/Achtergrond12.jpg;   }}

Share this post


Link to post
Share on other sites

Btw i just found a good exemplaar so I copied and edit it abit. But a part is not working :

<html><head><script>var expDays = 365;var exp = new Date(); var favImage = "";exp.setTime(exp.getTime() + (expDays*24*60*60*1000));function saveImage(form){    var favImage = form.favSelect.value;    if ( favImage == "" ) return;    SetCookie('image', favImage, exp);    getBodyBG( );}function GetCookie(name) {      var cookies = document.cookie.split(/; /g);    var arg = name + "=";      for ( var c = 0; c < cookies.length; ++c )    {        var ck = cookies[c];        if ( ck.indexOf(arg) == 0 )        {            var temp = ck.split(/=/);            return unescape(temp[1]);        }    }    return "";}function SetCookie (name, value) {      var argv = SetCookie.arguments;      var argc = SetCookie.arguments.length;      var expires = (argc > 2) ? argv[2] : null;      var path = (argc > 3) ? argv[3] : null;      var domain = (argc > 4) ? argv[4] : null;      var secure = (argc > 5) ? argv[5] : false;      document.cookie = name + "=" + escape (value) +             ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +             ((path == null) ? "" : ("; path=" + path)) +              ((domain == null) ? "" : ("; domain=" + domain)) +                ((secure == true) ? "; secure" : "");}function DeleteCookie (name) {      var exp = new Date();      exp.setTime (exp.getTime() - 1);      var cval = GetCookie (name);      document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();}function getBodyBG(){    document.body.style.backgroundImage="url('" + GetCookie("image") + "')";}</script><style>body, #mydiv { background-repeat: repeat-all; }</style></head><body onload="getBodyBG();"><div class="bgs"><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-01.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond01.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-02.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond02.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-03.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond03.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-04.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond04.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-05.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond05.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-06.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond06.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-07.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond07.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-08.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond08.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-09.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond09.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-10.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond10.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-11.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond11.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-12.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond12.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-13.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond13.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-14.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond14.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-15.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond15.jpg)';saveImage(document.body.style.backgroundImage)" /></div><div class="bg"><img id="bg" src="Afbeeldingen/Bg-icon-16.jpg" onclick="document.body.style.backgroundImage='url(Afbeeldingen/Achtergrond16.jpg)';saveImage(document.body.style.backgroundImage)" /></div></div></body></html>

I think its not suppose to be like this ... There is the originale : http://www.clearviewarts.com/cookiebgi.htmlI want to active the java on clicking the image instead clicking the button. Anyway this is pretty much a big code >< . Is there a way to make this smaller like yours ? This code below seems to be wrong .

saveImage(document.body.style.backgroundImage)

Share this post


Link to post
Share on other sites

It looks like the saveImage function is expecting you to send it a form, but you're sending it the URL of the image. It looks like it's expecting a form with a select dropdown where you choose the image. If you want to just send it the URL to save then remove the parts where it's trying to get the URL from the form.

function saveImage(favImage){	if ( favImage == "" ) return;	SetCookie('image', favImage, exp);	getBodyBG( );}

Share this post


Link to post
Share on other sites
There was really no need to change the setCookie function. You would call it like this:
setCookie ("background", "2", 180);

which means: create a cookie called "background", set its value to "2", and it expires in 180 days.The only function you want to customize is checkCookie(). Based on code we've discussed earlier, this is one way to go:

function checkCookie() {	var background = getCookie("background");	if (background != "") {		var bg_image = "url(background" + background + ".jpg)";		document.body.style.backgroundImage = bg_image;	}}

Do I need "getCookie" too ? I though there are always setCookie , getCookie and checkCookie right ? Please explain me ... I cant find anything more information on w3school .

Share this post


Link to post
Share on other sites

I don't understand what your question is. You probably need all of the functions, they each do a different thing.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×