JavaScript - Changing The Background Picture Depending On A Drop Down Field Selection

hello
i have this code that tags between three images in an certain amount of time
and this works fine
Code:

<script language = "Javascript">
<?php $count_im=1;
 $req=mysql_query("select * from banner");
	while ($res=mysql_fetch_array($req)){ ?>
var image<?php echo $count_im; ?> =new Image()
image<?php echo $count_im; ?>.src="<?php echo $res["banner"]; ?>"
<?php $count_im++;
}?>
</script>

Code:

<div class="banner">
	<p class="banner_image">
		<img src="banner/12.jpg" name="slide" width="290px">
		<script>
			<!--
			//variable that will increment through the images
			var step=1
			function slideit(){
			//if browser does not support the image object, exit.
			if (!document.images)
			return
			document.images.slide.src=eval("image"+step+".src")
			if (step<3)
			step++
			else
			step=1
			//call function "slideit()" every ... seconds
			setTimeout("slideit()",10000)
			}
			slideit()
			//-->
		</script>
	</p>
</div>

and i want it also to tag between hrefs too, so tried the following but didnt work
Code:

<?php $count_im=1;
 $req=mysql_query("select * from banner");
	while ($res=mysql_fetch_array($req)){ ?>
var image<?php echo $count_im; ?> =new Image()
image<?php echo $count_im; ?>.src="<?php echo $res["banner"]; ?>"

var link<?php echo $count_im; ?> =new String()
link<?php echo $count_im; ?>.href="<?php echo $res["banner_title"]; ?>"

<?php $count_im++;
}?>

Code:

<div class="banner">
	<p class="banner_image">
		<a href="" rel="nofollow" target="_blank" name="links">
		<img src="banner/12.12" name="slide" width="290px"></a>
		<script>
			<!--
			//variable that will increment through the images
			var step=1
			function slideit(){
			//if browser does not support the image object, exit.
			if (!document.images)
			return
			document.images.slide.src=eval("image"+step+".src")
			document.a.links.href=eval("link"+step+".src")
			if (step<3)
			step++
			else
			step=1
			//call function "slideit()" every ... seconds
			setTimeout("slideit()",10000)
			}
			slideit()
			//-->
		</script>
	</p>
</div>

anyone can help???

I have a form that I am using for several different pages as they are exactly the same... however at the top you must make a choice from the drop down box that then shows the appropriate fields to fill in.

Can I make the drop down default to a certain option depending on which page they are coming from?

So i have this code and when you click on the first set of them (a specific one) it copys it and then when you click on one of the other ones it pastes it but its not working properly. (If you need to you can put an other image in there)

Code:

<script>
var change = new Array
change [0] = [0,0,0,0,0];
change [1] = [0,0,0,0,0];
change [2] = ["",0];
change [3] = [0,0,0,0,0];
function equipaa(){
change [0][0] = 1
change [0][4] = 0
change [0][1] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipab(){
change [0][1] = 1
change [0][0] = 0
change [0][4] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipac(){
change [0][2] = 1
change [0][0] = 0
change [0][1] = 0
change [0][4] = 0
change [0][3] = 0
changea();
}
function equipad(){
change [0][3] = 1
change [0][0] = 0
change [0][1] = 0
change [0][2] = 0
change [0][4] = 0
changea();
}
function equipae(){
change [0][4] = 1
change [0][0] = 0
change [0][1] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}



function equipba(){
change [1][0] = 1
change [1][4] = 0
change [1][1] = 0
change [1][2] = 0
change [1][3] = 0
changefinal();
}
function equipbb(){
change [1][1] = 1
change [1][0] = 0
change [1][2] = 0
change [1][3] = 0
change [1][4] = 0
changefinal();
}
function equipbc(){
change [1][2] = 1
change [1][0] = 0
change [1][1] = 0
change [1][3] = 0
change [1][4] = 0
changefinal();
}
function equipbd(){
change [1][3] = 1
change [1][4] = 1
change [1][0] = 0
change [1][1] = 0
change [1][2] = 0
changefinal();
}
function equipbe(){
change [1][4] = 1
change [1][0] = 0
change [1][1] = 0
change [1][2] = 0
change [1][3] = 0
changefinal();
}

function changea(){
if(change [0] [0] = 1){
change [2] [0] = document.getElementById("is1i").src;
change [2] [1] = change [3] [0];
}
else if(change [0] [1] = 1){
change [2] [0] = document.getElementById("is2i").src;
change [2] [1] = change [3] [1];
}
else if(change [0] [2] = 1){
change [2] [0] = document.getElementById("is3i").src;
change [2] [1] = change [3] [2];
}
else if(change [0] [3] = 1){
change [2] [0] = document.getElementById("is4i").src;
change [2] [1] = change [3] [3];
}
else if(change [0] [4] = 1){
change [2] [0] = document.getElementById("is5i").src;
change [2] [1] = change [3] [4];
}
}
function changefinal(){
if(change [1] [0] = 1){
document.getElementById("i1").src = change [2] [0];
}
else if(change [1] [1] = 1){
document.getElementById("i2").src = change [2] [0];
}
else if(change [1] [2] = 1){
document.getElementById("i3").src = change [2] [0];
}
else if(change [1] [3] = 1){
document.getElementById("i4").src = change [2] [0];
}
else if(change [1] [4] = 1){
document.getElementById("i5").src = change [2] [0];
}
clear();
}
function clear(){
change [0] [0] = 0;
change [0] [1] = 0;
change [0] [2] = 0;
change [0] [3] = 0;
change [0] [4] = 0;
change [1] [0] = 0;
change [1] [1] = 0;
change [1] [2] = 0;
change [1] [3] = 0;
change [1] [4] = 0;
}
</script>
<html>
<body>
<table  border="0">
<tr>
<td><div ><img onclick="equipba()" id="i1" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbb()" id="i2" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbc()" id="i3" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbd()" id="i4" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbe()" id="i5" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
</tr>
</table>
<div id="invent">
<table  border="o">
<tr>
<td><div ondblclick="dropa();" onclick="equipaa();"><img id="is1i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is1n"></div></td>
<td><div id="is1d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropb()" onclick="equipab();"><img id="is2i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is2n"></div></td>
<td><div id="is2d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropc()" onclick="equipac();"><img id="is3i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is3n"></div></td>
<td><div id="is3d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropd()" onclick="equipad();"><img  id="is4i"src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is4n"></div></td>
<td><div id="is4d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="drope()" onclick="equipae();"><img  id="is5i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is5n"></div></td>
<td><div id="is5d"></div></td>
<td></td>
</tr>
</table>
</body>
</html>

Not 100% sure why or how to make this work.

I have 5 options in a select drop-down. Only two of them are to disable a text field. I have written it successfully to disable on one option. How would I add the second option? I have tried many different ways, and i know its something small that i am missing.

Below is the code that does not work but shows the 2 options that disable my text field.

Code:

<script type="text/javascript">
    function type_disable() {
		var qr_type = document.getElementById('qr_type');
    var qr_owner = document.getElementById('qr_owner');
    if(qr_type.value == 'bio' || 'rebrand')
        qr_owner.disabled = true
    else
        qr_owner.disabled = false
}
	
</script>

Code:

<tr>
	
	<td align="right"><span class="re">*</span>Type: </td>
	<td align="left"> &nbsp;<select id="qr_type"  name="qr_type" onChange="type_disable()">
	
	<option value="0">Select Type</option>
		 <option value="property">Property Code</option> 
		 <option value="ipw">IPW Code</option> 
		 <option value="bio">Biography Code</option> 
		 <option value="rebrand">Rebrand Code</option> 
		 <option value="property_rebrand">Property-rebrand Code</option> 
		 </select>
	 
	 </td>
	<td ></td>
	</tr>

	
	<tr>
	
	<td align="right"><span class="re">*</span>Owner: </td>
	<td align="left"> &nbsp;<input type="textbox" name="qr_owner" id="qr_owner" size="30" value=""/></td>
	<td ></td>
	</tr>

Thanks for any help!

I am trying to change text in one cell of a table when a user selects an item from a select menu. The data for the select menu is being pulled from a database (which works fine). The select menu is displayed as expected; however the text in the div tag always comes up as "undefined"

The code below is part of a PHP script (thus \" instead of ")
I would like to employ a method that does not require extra Javascript in the <head> section as in this instance the code is being output from an include that is called long after the <head> area of the document is processed.

Here is what I have
Code:

<tr><td><select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo\">
<option selected=\"selected\" value=\"\">Select Race</option>\n";
$sql = mysql_query("SELECT * FROM races");$i=1;
while ($row = mysql_fetch_array($sql)){
	$output .= "<option value=\"$i\" ExtraInfo=\"{$row['des']}\">{$row['race']}</option>\n";
	$i++;
}
$output .= "</select></td>
<td><div id=\"ExtraInfo\">Select Race</div></td></tr>

Any help will be greatly appreciated.

I found a solution to my problem:
by replacing:
Code:

<select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo\">

with this:
Code:

<select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('extrainfo')\">

Hello

I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page:
http://www.watphotos.com/introductio...otography.html

And here is the code in question:

Code:

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 
 $(document).ready(function(){
	var initial	= 0
	var total = 0;
	var services = 0;
	function addServices()
	{
		initial = 150
		total = initial
		services = 0;
		$("input:checked").each(function(){
			value = $(this).attr("value");		
			services += parseInt(value);
		});
	}
	$(function()
	{
		addServices();
		total += services;
		$("form").before('<p class="price"></p>')		
		$("p.price").text("Total Price: US$" + total);
	});
 	$("input:radio, input:checkbox").click(function () {
		addServices();
		total += services
		$("p.price").text("Total Price: US$" + total);
    });
 
 });
 
</script>

I have two questions...

Question 1
How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky.
I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this?

Question 2
The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document?

Thanks in advance!

Watch the answer to this problem be simple... but when I tried searching for similar problems, I can't find anything that helps.

On a website of mine, I have a picture that acts as the navigation. When the user hovers over it, it changes pictures to show one section lighting up and the text to show where that one links to under it. Later, I changed it to show, when the mouse isn't hovering over the picture, the pictures automatically scrolling on a timer to show all the options.

While this works most of the time, I recently discovered the reason behind a 'glitch' my friend noticed... but I'm unsure of how to fix it. The problem is, when the mouse is already on the picture as the page loads, it starts the timer even though the mouse is there. This causes it to keep trying to switch the picture on its own even when hovering over the picture. And when the mouse is off the picture, it changes it twice at an odd interval. In other words, it's starting the timer up twice and only cuts one of them off when you hover over the image.

Here's a link to the site so you can see for yourself: http://nebula-andra.com/
(And if links aren't allowed, just let me know and I'll remove it--it's simply easier to see)

Here's the code I have for the image timer...

In the header, in a Javascript tag:

Code:

var currPic = 0;

var totPics = 12;

var keepTime;

var picName;

function setupPicChange(){
keepTime=setTimeout("changePic()", 2000);
}

function changePic(){
currPic++;
if(currPic > totPics) currPic = 1;
document.getElementById("logos").src="../images/logo/NA Logo - " + currPic + ".png";
setupPicChange();
}

function stopTimer(){
clearTimeout(keepTime);
}

function startTimer(){
keepTime=setTimeout("changePic()", 2000);
}

In the body:

Code:

<body onload="setupPicChange();">

<div id="logo_setup">
<p align="center" onmouseover="stopTimer();" onmouseout="startTimer();"><img src="../images/logo/NA_Logo.png" id="logos" name="logos" border=0 usemap="#logo">

I want the timer to start without the user having to do anything and complete stop when the user hovers over the picture.

If there's anything else you need to see to help with this problem, please let me know. And thank you for taking the time to read this; I look forward to any suggestions you can give me.

Note: This is being tested in Chrome, but the problem has appeared in both Firefox and IE as well.

I have problem ,the code cannot operate. I would like your opinion.The user must select in dropdown list having one display of image every time.Thanks
js code
Code:

var sel = document.getElementById("sw");
function f1(){
   var imgs = ['chart1.cgi', 'chart2.cgi', 'chart3.cgi', 'chart4.cgi'];
   var im = document.getElementById("pic");
   im.src = imgs[this.selectedIndex]; 
}

html code
Code:

<img id="pic" src="chart1.cgi" />

<select name="sw" id="sw" onchange = "f1()" >
   <option value="s1">what</option>
   <option value="s2">whatever 2</option>
   <option value="s3">whatever 3</option>
   <option value="s4">whatever 4</option>
</select>

Dear all,

background information:
I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values):

echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>";

When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly.

The javascript looks like this

function set_time_hour(hour_value,next_field){
alert (hour_value);
alert (next_field);
document.getElementById(next_field).value = hour_value;
}

The alert calls are giving me the right values. but the

document.getElementById(next_field).value = hour_value;

is not working. What is wrong there? Do you have an idea?

How can I change the value of a select box with Javascript?

The select box values are already popoluated with PHP so I just want to select the right value.

I'm trying to use javascript to have my webpage black at night and bright blue (#2A7FFF) in the day time. How would I go about this? :/

I have also tried to use javascript to change a picture depending on the time of day, this is what I have used.

IN THE <head>

Code:

<script type="text/javascript">
var hourofday = thedate.getUTCHours();
function sun()
{
   // return TRUE if it's day

   if (hourofday > 7 && hourofday < 10) {
     return true;
   }
   return false;
}
</script><script type="text/javascript">
var hourofday = thedate.getUTCHours();
function sun()
{
   // return TRUE if it's day
   if (hourofday > 7 && hourofday < 10) {
     return true;
   }
   return false;
}
</script>

IN THE <body>

Code:

<div id="layer1" style="position:absolute; top:5px; left:5px; width:190px; height:190px; z-index:1; padding:5px; border:#000000 2px solid;background:color:#000000;">
<script type="text/javascript">
if (sun()) {
  document.write("<img src="www.oliverbinns.webs.com/images/sun.png" />");
} else {
  document.write("<img src="www.oliverbinns.webs.com/images/moon.png" />");
}
</script>
</div>

Hi, I have a page with a drop down and there are external js file that are included in the page which define handlers and other actions for onchange of this drop down. So if the selection in the drop down changes, we display a different color map (based on the selection).

Now I have to pre-select an option on a specific page (which has been completed) and the drop down shows the correct selection, but the event is not fired (that changes the map color). Any idea what I need to do?

Thanks

Hey all,

I was just wondering if you could help me out with the following, I've done a bit of google searching but haven't come up with anything.

Basically, there will be 3 drop down boxes (Option a, Option b, Option c)

In each drop down box there will be 3 options (One, Two, Three)

Whats a script I can use that will write on page
:Yellow

If they select:
Option a - One
Option b - One
Option c - Three

Of the script will write blue if they selection
Option a - Two
Option b - One
Option c - One

Hey everyone, I have a simple html form that asks a user to select a state from a drop down list. Later, in the same form, there's a question that needs to display an image of the state they previously selected from the drop down menu. How can I accomplish this using javaScript?

hello,

i am more a designer than a developer so i need your help.

i want to create a form containing :

1. drop down list of countries (that i managed to create)
2. action on selection (redirect to a link on country selection)
3. post the selected option into a text box below and remeber (if possible)

The remeber part is optional .

I want a form where user will select country , based on the selection to be redirected to a link and message display , you selected : [textarea]Option[/textarea]

can it be done?