Jump to content

"changing Background Image Onclick"


GoDxNero

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

Link to comment
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.

Link to comment
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)";

Link to comment
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"

Link to comment
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 ?
Link to comment
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.

Link to comment
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 ^^
Link to comment
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.)

Link to comment
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 ^^
Link to comment
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.

Link to comment
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 .
Link to comment
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");  }}

Link to comment
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;	}}

Link to comment
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>

Link to comment
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.

Link to comment
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;   }}

Link to comment
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)

Link to comment
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( );}

Link to comment
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 .
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...