Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > changing background image? Help?

Reply
Thread Tools

changing background image? Help?

 
 
Gequina
Guest
Posts: n/a
 
      10-21-2004
Something goes wrong in my script. I'm all new to it so i don't know
much yet.
I have a set of buttons. And when you click on either of them, the
background image will change. Only it's not working. It works when i
click on one, but then when i want to click on another, it's not
working.
What am i doing wrong?
thanks in advance



<html><head><title></title>

<script type="text/javascript">
var buttons="<img src=\"buttonrood2.jpg\"
onclick=\"print_waarde0()\"><img src=\"buttongroen2.jpg\"
onclick=\"print_waarde1()\"><img src=\"buttongeel2.jpg\"
onclick=\"print_waarde2()\"><img src=\"buttonblauw2.jpg\"
onclick=\"print_waarde3()\"><img src=\"buttonoranje2.jpg\"
onclick=\"print_waarde4()\"><img src=\"buttonmagenta2.jpg\"
onclick=\"print_waarde5()\"><img src=\"buttoncyaan2.jpg\"
onclick=\"print_waarde6()\">";



function print_waarde0() {
var a = "achtergrondrood.jpg";
var top = '<html><body background="' + a + '">';
var bottom = "</body></html>";
document.write(top+buttons+bottom);
}

function print_waarde1() {
var b = "achtergrondgroen.jpg";
var top1 = '<html><body background="' + b + '">';
var bottom1 = "</body></html>";
document.write(top1+buttons+bottom1);
}

function print_waarde2() {
var c = "achtergrondgeel.jpg";
var top2 = '<html><body background="' + c + '">';
var bottom2 = "</body></html>";
document.write(top2+buttons+bottom2);
}

function print_waarde3() {
var d = "achtergrondblauw.jpg";
var top3 = '<html><body background="' + d + '">';
var bottom3 = "</body></html>";
document.write(top3+buttons+bottom3);
}

function print_waarde4() {
var e = "achtergrondoranje.jpg";
var top4 = '<html><body background="' + e + '">';
var bottom4 = "</body></html>";
document.write(top4+buttons+bottom4);
}

function print_waarde5() {
var f = "achtergrondmagenta.jpg";
var top5= '<html><body background="' + f + '">';
var bottom5 = "</body></html>";
document.write(top5+buttons+bottom5);
}

function print_waarde6() {
var g = "achtergrondcyaan.jpg";
var top6 = '<html><body background="' + g + '">';
var bottom6 = "</body></html>";
document.write(top6+buttons+bottom6);




}

</script>

</head>
<body background="paeceachtergrond.jpg" bgproperties="fixed">
<h2>Welkom op Understanding Colors!</h2><br>
<font face="georgia">
Do you want to change the background?<br>
Choose from the following buttons and click on one.<br>

<body>

<img src="buttonrood2.jpg" onclick="print_waarde0()">
<img src="buttongroen2.jpg" onclick="print_waarde1()">
<img src="buttongeel2.jpg" onclick="print_waarde2()">
<img src="buttonblauw2.jpg" onclick="print_waarde3()">
<img src="buttonoranje2.jpg" onclick="print_waarde4()">
<img src="buttonmagenta2.jpg" onclick="print_waarde5()">
<img src="buttoncyaan2.jpg" onclick="print_waarde6()">

<br>
<br>

Op deze site kan je alles lezen over kleur en wat er mee te maken
heeft.<br>

</body>
</html>
 
Reply With Quote
 
 
 
 
Evertjan.
Guest
Posts: n/a
 
      10-21-2004
Gequina wrote on 21 okt 2004 in comp.lang.javascript:

> Something goes wrong in my script. I'm all new to it so i don't know
> much yet.
> I have a set of buttons. And when you click on either of them, the
> background image will change. Only it's not working. It works when i
> click on one, but then when i want to click on another, it's not
> working.
> What am i doing wrong?
> thanks in advance
>


Als je document.write gebruikt,
vernietig je de huidige pagina INCLUSIEF!!! aanwezige javascript.

Gebruik javascript en css:

<body>
Probeer dit eens:<br><br>
<button
onclick="document.body.style.backgroundColor='gree n'">
Groen</button>
<button
onclick="document.body.style.backgroundColor='red' ">
Rood</button>
<button
onclick="document.body.style.backgroundColor='yell ow'">
Geel</button>
</body>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

 
Reply With Quote
 
 
 
 
Randy Webb
Guest
Posts: n/a
 
      10-21-2004
Gequina wrote:

> Something goes wrong in my script. I'm all new to it so i don't know
> much yet.
> I have a set of buttons. And when you click on either of them, the
> background image will change. Only it's not working. It works when i
> click on one, but then when i want to click on another, it's not
> working.
> What am i doing wrong?
> thanks in advance


<--snip-->

> function print_waarde0() {
> var a = "achtergrondrood.jpg";
> var top = '<html><body background="' + a + '">';
> var bottom = "</body></html>";
> document.write(top+buttons+bottom);
> }


You are using document.write after the page has finished loading. That
removes the current page and replaces it with your new code. That means
your script is no longer present so it can't be run. Look at the FAQ and
its DynWrite function to modify a page.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?
 
Reply With Quote
 
Gequina girl
Guest
Posts: n/a
 
      10-21-2004
ok, ergens begrijp ik het wel, maar niet helemaal. Ik ben echt nieuw
hierin, maar moet aankomende maandag wel een presentatie hierover houden
en t gaat lastiger dan dat ik dacht.
Ik snap nu niet wat ik weg moet halen en wat moet blijven staan. Kan je
me helemaal helpen met het hele script? sorry als ik lastig ben, het
hoeft niet.

moeten al deze vakjes weg?

function print_waarde0() {
var a = "achtergrondrood.jpg";
var top = '<html><body background="' + a + '">';
var bottom = "</body></html>";
document.write(top+buttons+bottom);
}

*zucht*...sorry, ik ben het helemaal kwijt nu.

en je zegt dat ik javascript+css moet doen. Maar hoe schrijf ik dat op?
< script type="text/javascript/css" > ???
of anders?

ok, wat ik nu in elkaar heb gefrabiceerd is dit:


<html><head><title></title>

<script type="text/javascript">
var buttons="<img src=\"buttonrood2.jpg\"
onclick=\"print_waarde0()\"><img src=\"buttongroen2.jpg\"
onclick=\"print_waarde1()\"><img src=\"buttongeel2.jpg\"
onclick=\"print_waarde2()\"><img src=\"buttonblauw2.jpg\"
onclick=\"print_waarde3()\"><img src=\"buttonoranje2.jpg\"
onclick=\"print_waarde4()\"><img src=\"buttonmagenta2.jpg\"
onclick=\"print_waarde5()\"><img src=\"buttoncyaan2.jpg\"
onclick=\"print_waarde6()\">";
</script>
</head>

<body background="paeceachtergrond.jpg" bgproperties="fixed">
<h2>Welkom op Understanding Colors!</h2><br>

<body>

<font face="georgia">
Wil je de achtergrond kleur veranderen?<br>
Kies dan uit 1 van de volgende buttons.<br>

<script type="text/javascript">
<button
onclick="document.body.style.backgroundImage='acht ergrondrood.jpg'">
<img src="buttonrood2.jpg"></button>
<button
onclick="document.body.style.backgroundImage='acht ergrondgroen.jpg'">
<img src="buttongroen2.jpg"></button>
<button
onclick="document.body.style.backgroundImage='acht ergrondgeel.jpg'">
<img src="buttongeel2.jpg"></button>
<button
onclick="document.body.style.backgroundImage='acht ergrondblauw.jpg'">
<img src="buttonblauw2.jpg"></button>
<button
onclick="document.body.style.backgroundImage='acht ergrondoranje.jpg'">
<img src="buttonoranje2.jpg"></button>
<button
onclick="document.body.style.backgroundImage='acht ergrondmagenta.jpg'">
<img src="buttonmagenta2.jpg"></button>
<button
onclick="document.body.style.backgroundImage='acht ergrondcyaan.jpg'">
<img src="buttoncyaan2.jpg"></button>

</script>

<br>
<br>

Op deze site kan je alles lezen over kleur en wat er mee te maken
heeft.<br>

</body>
</html>

ik ben t echt helemaal kwijt, please help me? haha
alvast bedankt!
xxx

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      10-21-2004
Gequina girl wrote on 21 okt 2004 in comp.lang.javascript:

> <script type="text/javascript">
> <button
> onclick="document.body.style.backgroundImage='acht ergrondrood.jpg'">
> <img src="buttonrood2.jpg"></button>
>


Heb je mijn code wel geprobeerd op zich zelf? Dat is werkende code,
hoor, zonder 1 toevoeging in een file test.html te zetten en te runnen
in de IE.

Dan zou je moeten zien dat <button> gewoon in HTML saat en niet in
<script> en dat onclick vanzelf een javascript uitvoert.


> <script type="text/javascript">
> var buttons="<img src=\"buttonrood2.jpg\"
> onclick=\"print_waarde0()\"><img src=\"buttongroen2.jpg\"
> onclick=\"print_waarde1()\"><img src=\"buttongeel2.jpg\"
> onclick=\"print_waarde2()\"><img src=\"buttonblauw2.jpg\"
> onclick=\"print_waarde3()\"><img src=\"buttonoranje2.jpg\"
> etc ....


Dat stuk heb je helemaal niet nodig.

> Kan je me helemaal helpen met het hele script?


Nee, daar is een NG echt niet voor. Dan zou je iemand in moeten huren.

> Ik ben echt nieuwhierin, maar moet aankomende maandag wel een
> presentatie hierover houden en t gaat lastiger dan dat ik dacht.


Een presentatie moet je toch houden over iets wat je grondig begrijpt?
Je hebt toch nog heet hele weekend?

Gooi je oude code nu eens helemaal weg en begin met mijn eerste aanleg.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
DIV background-repeat background-image? For shadow effect jc ASP .Net 3 03-19-2008 04:19 PM
not able to click on background tab and backgrounds in properties to change the background. rex Computer Support 2 12-06-2006 02:26 AM
Background transparent when 'background' is used JWL HTML 4 09-26-2006 05:37 PM
Background Check - Background search - People search mason66 ASP .Net 0 07-27-2006 10:20 AM
changing a background image to a background colour? Dj Frenzy Javascript 3 02-10-2004 08:08 PM



Advertisments
 



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57