Looking to have a script written

[knystrom18]

Hey, I know absolutely no JS, so any help would be appreciated. I Googled this, and couldn't figure out how to implement the results I got into my page.Concept:I'd like to have a "<select>" drop down menu with the names of background images as options. As a user hovers over each option, the pages background image will change to the currently hovered over option. A left click will set the image, and the user can click out of the drop down menu, and go on about the site.This is only a one page deal, so I don't need cookies or anything to store the background image for the whole site.Thanks! :)edit: Don't know if it matters, but I'd like to be able to link to the code instead of have in the actual document. Something like:

<link rel="javascript" type="javascript" href="javascript.js" />

Thanks again.- Kedit... again:I've implemented a live example, minus the drop down here: http://kylenystrom.com/homepage/index.html the way the background changes is what I'm going for with the drop down. I think this is wicked cool.

[jeffman]

Easier than you think. I've pasted the change to your select tag, and the kind of change you'll need to make to your option elements. Just do the same thing for all your options. Note that I made 0 the default in case your user selects the "Choose" option again. There are ways to avoid that, but this is simplest.

<select onchange="changeBGImage(this.options[this.selectedIndex].value)">   <option value="0">Choose Background Image</option>   <option value="0">» Stripe Gradient</option>   <option value="1">» Splash</option>   <!-- etc. -->

[knystrom18]

So, if I wanted to have the image "bg04.jpg" which is indexed as [5], I'd write this?

<select onchange="changeBGImage(this.options[this.5].value)"><option value="0">Choose Background Image</option><option value="0">» Stripe Gradient</option><option value="1">» Splash</option><!-- etc. --><option value="5">» Angle</option>

Or do other things need to be changed, like "this.options" or".value"?

[ShadowMage]

No, DD had it right.<select onchange="changeBGImage(this.options[this.selectedIndex].value)">selectedIndex is a property of the select tag. It refers to the option that is currently selected. The function changeBGImage accepts the value of the selected option and then does some processing with it. In this case the value of the options is a number so you could use that to reference the source path for your images in an array.

[knystrom18]

Nice, I'll implement it and be back with or .edit: Its worked beautifully! I've come up with another question though. Since setting a background through CSS over-rides the JS, can I just make a particular option "selected?" I forget what the code is for that ATM, but I think it's something along the lines of...

<option value="0" selected>» Stripe Gradient</option>

Yes? No?

[ShadowMage]

...can I just make a particular option "selected?"...

You mean so that the selected option is displayed as the background when the page is loaded?Yea you can do that. You would create your select with an option marked as selected. Your code for that will work but in XHTML attribute minimization (I think that's what it's called...) isn't allowed. You'd need to write it like this:

<option value='0' selected='selected>» Stripe Gradient</option>

Then all you'd have to do is call your changeBG function with the window.onload event. You might have to make some small tweaks with the function though.

[knystrom18]

I'll keep that in mind for another day. As I said in the OP, I have no knowledge of JS whatsoever. So I don't know what you're talking about when you say I might have to make some small changes to the function. I mean, I know what a function() is... just not the syntax or the logic...

[ShadowMage]

Well, I don't know what the changeBGImage function looks like so I can't say for sure what changes will need to be made. I can say, however, that the way it is called will have to change. As of right now it accepts a number, since it's called by passing the value of the option like this:<select onchange="changeBGImage(this.options[this.selectedIndex].value)">So you'd need to change that so it will accept an ID perhaps. If you like, you can post the code for the function and we can help you work it out.As for setting the function to run when the page loads you need to set the window.onload event handler. Note that this will not work without making changes to the changeBGImage function:window.onload = function() { changeBGImage("bg_select"); }

[thescientist]

I'll keep that in mind for another day. As I said in the OP, I have no knowledge of JS whatsoever. So I don't know what you're talking about when you say I might have to make some small changes to the function. I mean, I know what a function() is... just not the syntax or the logic...

might be worth reading the tutorials...I don't know how you can even write a function without knowledge of syntax or logic, even at a rudimentary level :)not trying to be harsh, just saying you might feel more comfortable and confident with a little knowledge under your belt.

[knystrom18]

might be worth reading the tutorials...I don't know how you can even write a function without knowledge of syntax or logic, even at a rudimentary level :)not trying to be harsh, just saying you might feel more comfortable and confident with a little knowledge under your belt.

On my theoretical to-do list.

[knystrom18]

Well, I don't know what the changeBGImage function looks like so I can't say for sure what changes will need to be made. I can say, however, that the way it is called will have to change. As of right now it accepts a number, since it's called by passing the value of the option like this:<select onchange="changeBGImage(this.options[this.selectedIndex].value)">So you'd need to change that so it will accept an ID perhaps. If you like, you can post the code for the function and we can help you work it out.As for setting the function to run when the page loads you need to set the window.onload event handler. Note that this will not work without making changes to the changeBGImage function:window.onload = function() { changeBGImage("bg_select"); }

Sorry for the mad delayed reply.Here's the code:

<script language="JavaScript"><!--var backImage = new Array();backImage[0] = "";backImage[1] = "images/bg/01StripeGradient.jpg";backImage[2] = "images/bg/02Splash.jpg";backImage[3] = "images/bg/03Splash2.jpg";backImage[4] = "images/bg/04Phones.jpg";backImage[5] = "images/bg/05City.jpg";backImage[6] = "images/bg/06Paisley.jpg";backImage[7] = "images/bg/07PaisleyGradient1.jpg";backImage[8] = "images/bg/08PaisleyGradient2.jpg";backImage[9] = "images/bg/09LoneVictorian.jpg";backImage[10] = "images/bg/10VictorianPaired1.jpg";backImage[11] = "images/bg/11VictorianPaired2.jpg";backImage[12] = "images/bg/12VictorianPaired3.jpg";backImage[13] = "images/bg/13VictorianPaired4.jpg";backImage[14] = "images/bg/14CarpeDiem.jpg";// Do not edit below this line.//-----------------------------function changeBGImage(whichImage){if (document.body){document.body.background = backImage[whichImage];}}//--></script>

<option value="1">» Stripe Gradient</option>

[ShadowMage]

Well, actually now that I think about it there are two ways that this could be done. The first way involves making some slight changes to your changeBGImage function, the second way involves a little extra work with the window.onload function. I'll show you both and you can decide which one you want to do.Regardless of which way you choose you'll need to give the select an id:<select id='bg_select' onchange="changeBGImage(this.options[this.selectedIndex].value)">So this is the first way. You need to change the type of parameter that is passed to the function. Right now it accepts a number which it uses as an index in the array. You'll need to pass it an element's id as a string which will be used to get the reference to the element and in turn used to get the selected index.

function changeBGImage(selectID){ //Pass the id as a string   var bgSelect = document.getElementById(selectID); //Get the reference to the select element   var index = 0; //Set a default value for index      if (bgSelect){	  index = Number(bgSelect.options[bgSelect.selectedIndex].value); //Set the index equal to the select's index   }   document.body.background = backImage[index]; //Set the background}

Then you'll need to add the following line as the first thing in your script before you declare the array for you background images:window.onload = function() { changeBGImage("bg_select"); }The second way is to leave your changeBGImage function alone and get the index in the onload function before you call the changeBGImage function. You would add this code in the same place as you put the window.onload declaration above.

window.onload = function () {   var bgSelect = document.getElementById(selectID); //Get the reference to the select element   var index = 0; //Set a default value for index      if (bgSelect){	  index = Number(bgSelect.options[bgSelect.selectedIndex].value); //Set the index equal to the select's index   }   changeBGImage(index); //Call the changeBGImage function}

[knystrom18]

Jeez, I forgot about this thread...Anyways, after reading your last response jkloth, it would seem that the 2nd option would be easier.I'll implement, and get back with results, no frickin MONTH delay this time. Haha.Thanks for that code BTW.

[knystrom18]

Well this is embarrassing. :)In this:

window.onload = function () {   var bgSelect = document.getElementById(selectID); //Get the reference to the select element   var index = 0; //Set a default value for index     if (bgSelect){	  index = Number(bgSelect.options[bgSelect.selectedIndex].value); //Set the index equal to the select's index   }   changeBGImage(index); //Call the changeBGImage function}

Would "(selectID)" be replaced with the id of my select element: "bg_select?"I currently have it implemented as such...

<script language="JavaScript"><!--//Sets pre-determined backgroundwindow.onload = function () {   var bgSelect = document.getElementById(selectID); //Get the reference to the select element   var index = 15; //Set a default value for index     if (bgSelect){	  index = Number(bgSelect.options[bgSelect.selectedIndex].value); //Set the index equal to the select's index   }   changeBGImage(index); //Call the changeBGImage function}var backImage = new Array();backImage[0] = "";backImage[1] = "images/bg/01StripeGradient.jpg";backImage[2] = "images/bg/02Splash.jpg";backImage[3] = "images/bg/03Splash2.jpg";backImage[4] = "images/bg/04Phones.jpg";backImage[5] = "images/bg/05City.jpg";backImage[6] = "images/bg/06Paisley.jpg";backImage[7] = "images/bg/07PaisleyGradient1.jpg";backImage[8] = "images/bg/08PaisleyGradient2.jpg";backImage[9] = "images/bg/09LoneVictorian.jpg";backImage[10] = "images/bg/10VictorianPaired1.jpg";backImage[11] = "images/bg/11VictorianPaired2.jpg";backImage[12] = "images/bg/12VictorianPaired3.jpg";backImage[13] = "images/bg/13VictorianPaired4.jpg";backImage[14] = "images/bg/14CarpeDiem.jpg";backImage[15] = "images/bg/15Lightning1.jpg";backImage[16] = "images/bg/16Lightning2.jpg";//---------------------------function changeBGImage(whichImage){if (document.body){document.body.background = backImage[whichImage];}}//--></script>

<select id="bg_select" onchange="changeBGImage(this.options[this.selectedIndex].value)">

... and it doesn't seem to be working.See any errors? Your thoughts/guidance?Thanks a bunch.

[ShadowMage]

Sorry that was my bad. That was a copy/paste and I forgot to change it. Yes, it should be the id of your select. So if the select's id is "bg_select" then it should look like this:var bgSelect = document.getElementById("bg_select");

[knystrom18]

Still not working. :)I moved the <script> block to the <head> section which leads me to these questions.Should the whole <script> block of code be in the <head> section or the <body> section? The place where I got the code from said to post it in the <body>, but I've heard elsewhere that it should be in the <head>. I also removed the "<!--" and "//-->" stuff. (I was told this tells older browsers to ignore the JS code within those.) Dunno if that makes any difference or not.But alas, when loaded, the page defaults to black and not the specified index.New, edited code:

<!DOCTYPE html><html lang="en"><head><link rel="shortcut icon" href="images/favicon.jpg" /><link rel="stylesheet" type="text/css" href="css/general.css" /><link rel="stylesheet" type="text/css" href="css/divs.css" /><link rel="stylesheet" type="text/css" href="css/links.css" /><link rel="stylesheet" type="text/css" href="css/content.css" /><title>Base Page</title><script language="JavaScript">//Sets pre-determined backgroundwindow.onload = function () {   var bgSelect = document.getElementById("bg_select"); //Get the reference to the select element   var index = 9; //Set a default value for index     if (bgSelect){	  index = Number(bgSelect.options[bgSelect.selectedIndex].value); //Set the index equal to the select's index   }   changeBGImage(index); //Call the changeBGImage function}var backImage = new Array();backImage[0] = "";backImage[1] = "images/bg/01StripeGradient.jpg";backImage[2] = "images/bg/02Splash.jpg";backImage[3] = "images/bg/03Splash2.jpg";backImage[4] = "images/bg/04Phones.jpg";backImage[5] = "images/bg/05City.jpg";backImage[6] = "images/bg/06Paisley.jpg";backImage[7] = "images/bg/07PaisleyGradient1.jpg";backImage[8] = "images/bg/08PaisleyGradient2.jpg";backImage[9] = "images/bg/09LoneVictorian.jpg";backImage[10] = "images/bg/10VictorianPaired1.jpg";backImage[11] = "images/bg/11VictorianPaired2.jpg";backImage[12] = "images/bg/12VictorianPaired3.jpg";backImage[13] = "images/bg/13VictorianPaired4.jpg";backImage[14] = "images/bg/14CarpeDiem.jpg";backImage[15] = "images/bg/15Lightning1.jpg";backImage[16] = "images/bg/16Lightning2.jpg";//---------------------------function changeBGImage(whichImage){if (document.body){document.body.background = backImage[whichImage];}}</script></head><body>	  <div id="allContain" align="center">		   <a href="http://localhost/Sites/" id="localhost">http://localhost/Sites</a>		   <div id="choosebg">		   <select id="bg_select" onchange="changeBGImage(this.options[this.selectedIndex].value)">				   <option value="0">Choose</option>				   <option value="1">» Stripe Gradient</option>				   <option value="2">» Splash</option>				   <option value="3">» Splash 2</option>				   <option value="4">» Phones</option>				   <option value="5">» City</option>				   <option value="6">» Plain Paisley</option>				   <option value="7">» Paisley Gradient</option>				   <option value="8">» Paisley Gradient 2</option>				   <option value="9">» Lone Victorian</option>				   <option value="10">» Victorian Paired</option>				   <option value="11">» Victorian Paired 2</option>				   <option value="12">» Victorian Paired 3</option>				   <option value="13">» Victorian Paired 4</option>				   <option value="14">» Carpe Diem</option>				   <option value="15">» Lightning 1</option>				   <option value="16">» Lightning 2</option>		   </select>	  </div><!--choosebg-->

Thanks, if the next fix doesn't work, I'll stop bothering you about it and go ask someone else on another forum.

[knystrom18]

Never mind. Got it working. :)I think you left out another copy-paste thing.I changed

changeBGImage(index); //Call the changeBGImage function

to:

changeBGImage(15); //Call the changeBGImage function

What's weird is that if I change the number in this line:

var index = 15; //Set a default value for index

nothing happens.This line seems to over-ride that one ^^^

changeBGImage(15); //Call the changeBGImage function

I was looking for a missing semicolon or a misspelling or something like that.Thanks for all your help.

INTERNET FIST BUMP!

[ShadowMage]

I changed

changeBGImage(index); //Call the changeBGImage function

to:

changeBGImage(15); //Call the changeBGImage function

What's weird is that if I change the number in this line:

var index = 15; //Set a default value for index

nothing happens.This line seems to over-ride that one ^^^

changeBGImage(15); //Call the changeBGImage function

If you hard code a value into the call for the changeBGImage function it doesn't matter what index equals. If you call changeBGImage(15) the background image will always be the image at index 15 of your array.I think I misunderstood what you were asking. I thought you were generating this page in PHP and changing which option was selected in your select. But now I don't think that's the case. If my new understanding is correct you just wanted to specify a default value for when the page loads.Well, in that case you could just specify one in your CSS. Or you could just call the changeBGImage function with the index of whichever image you want.window.onload = function() { changeBGImage(9); }Do I have my understanding correct?BTW

Should the whole <script> block of code be in the <head> section or the <body> section? The place where I got the code from said to post it in the <body>, but I've heard elsewhere that it should be in the <head>. I also removed the "<!--" and "//-->" stuff. (I was told this tells older browsers to ignore the JS code within those.) Dunno if that makes any difference or not.

Scripts are typically placed in the head. But I think they will work no matter where you place them since a script is evaluated (is that the right term?) as the pages loads.I'm not 100% sure about the "<!--" and "//-->" but I think you're right. It tells older browsers to ignore the script. Removing them is pretty safe. However, if you want embedded javascript to validate against a strict DTD you need to enclose it with CDATA tags like so:<script type='text/javascript'>//<![CDATA[...code...//]]></script>

[knystrom18]

I think I misunderstood what you were asking. I thought you were generating this page in PHP and changing which option was selected in your select.

Haha, nah.

If my new understanding is correct you just wanted to specify a default value for when the page loads.

That is indeed correct.

Well, in that case you could just specify one in your CSS.

One would think, but that's not the case. Whenever I declare a background with CSS, the script is suddenly useless...

Or you could just call the changeBGImage function with the index of whichever image you want.window.onload = function() { changeBGImage(9); }

Where would I put that?And thanks for answering my other questions.

[ShadowMage]

Where would I put that?

That would go:

<script language="JavaScript">//Sets pre-determined backgroundwindow.onload = function () { //<---- FROM THIS LINE   var bgSelect = document.getElementById("bg_select"); //Get the reference to the select element   var index = 9; //Set a default value for index     if (bgSelect){	  index = Number(bgSelect.options[bgSelect.selectedIndex].value); //Set the index equal to the select's index   }   changeBGImage(index); //Call the changeBGImage function} //<---- TO THIS LINE

Replace the whole window.onload declaration with the one I gave you. (Substituting in the appropriate index for the image you want)In other words, just get rid of everything in that function except the call to changeBGImage.

[knystrom18]

Thanks again for all you help. I've got it working now.