|
JavaScript - Javascript Dropdown Change Background Image Depending On Selection
Hello.
The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code. Code: <html>
<head>
<style type='text/css'>
#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>
<script type='text/javascript'>
function div_bg(team){
document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";
}
</script>
</head>
<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>
Thanks in advance!! Similar TutorialsHello Folks, Here is my dropdown menu: Code: <select name="peeps"> <option value="Frank Tompson">Frank Tompson</option> <option value="Henry Wilson">Henry Wilson</option> <option value="Bill Kent">Bill Kent</option> <option value="Jessi McDonald"> Jessi McDonald</option> <option value="John Hays">John Hays</option> How can i make it so if i click on John Hays a JavaScript pop up will say Hello John Hays, and if i click on Bill Kent a popup will say hello Bill Kent and if i click on any other name nothing happens? Dear Javascript programmers, Do you have an example of a Javascript something like this: A dropdownlist with values "one" and "two". The radio button is not visible (as a start). - If you have selected "one" from the dropdown list, then a radio button will appear. - If you have selected "two" from the dropdown list, then a radio button will NOT appear. Thanks, Cornelis Gouda - The Netherlands Hi coders, I need to achieve two things upon making a selection from a drop down field: 1) Changing the background picture of a cell. 2) Changing the size of a uploaded foreground picture within the same cell. Code: <select name=ADDITIONALINFO> <option value="25 x 25">25 x 25</option> <option value="35 x 35">35 x 35</option> <option value="45 x 45">45 x 45</option> <option value="55 x 55">55 x 55</option> </select> Any guidance how to achieve this is appreciated. 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! 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 all.This is part of my code which I am using to edit the record from database.Initially the input boxes show the values from database and if any one of the value is changed, I want to reflect the change according to the changes made in the fields.The code works fine but if I change values in qty,rate or amount, the other values are not changing.Can experts over here tell me why?Here is my code: Code:
<html>
<head>
<script type="text/javascript">
function tot() {
var d=document.getElementById("total").value;
var st=Number(d);
var e=document.getElementById("vat_amt").value;
var tx=Number(e);
var f=document.getElementById("cash_discount").value;
var ad=Number(f);
var g=document.getElementById("vat").value;
var vat=Number(g);
var h=(st+tx)-ad;
document.getElementById("amount").value = Math.ceil(h);
var z=vat+100;
var y=(st*100)/z;
var i=st-y;
var result=Math.round(i*100)/100; //returns 28.45
document.getElementById("vat_amt").value =result;
}
var total = 0;
function getValues() {
var qty = 0;
var rate = 0;
var obj = document.getElementsByTagName("input");
for(var i=0; i<obj.length; i++){
if(obj[i].name == "qty[]"){var qty = obj[i].value;}
if(obj[i].name == "rate[]"){var rate = obj[i].value;}
if(obj[i].name == "amt[]"){
if(qty > 0 && rate > 0){obj[i].value = qty*rate;total+=(obj[i].value*1);}
else{obj[i].value = 0;total+=(obj[i].value*1);}
}
}
document.getElementById("total").value = total*1;
total=0;
}
</script>
</head>
<body>
<table width="23%" cellpadding="0" cellspacing="0" class="normal-text" border="0" style="margin-top:0px; padding-top:0px; margin-bottom:0px; padding-bottom:0px;">
<tr>
<td>Qty</td>
<td>Rate</td>
<td>Amount</td>
</tr>
<tr>
<td class="forhead"><input type="text" name="qty[]" onkeyup="getValues()" style="width:120px;" value="<?PHP echo "$row3[qty]" ?>" class="text medium"></td>
<td class="forhead"><input type="text" name="rate[]" onKeyUp="getValues()" style="width:120px;" value="<?PHP echo "$row3[rate]" ?>" class="text medium"></td>
<td class="forhead"><input type="text" name="amt[]" style="width:120px;"
onKeyUp="getValues()" class="text medium" value="<?PHP echo "$row3[amt]" ?>"></td>
</tr>
<tr>
<td class="dt" colspan="2">Sub Total:</td>
<td class="forhead"><input type="text" id="total" name="total" style="width:120px;" value="<?PHP echo "$row[total]" ?>" class="text medium"></td>
</tr>
<tr>
<td class="dt" colspan="2">Vat:</td>
<td class="forhead"><?PHP
$query5=mysql_query("SELECT * FROM vat");
echo "<select name='vat' id='vat' style='width:120px; border: 1px solid #BFBFBF;' onChange='tot()'>";
echo "<option value='0'>
Select</option>";
while($row5=mysql_fetch_array($query5))
{?>
<option value= <?PHP echo $row5[vat]; ?> <?PHP echo($row5[vat]==$row[vat])?'selected':''?>> <?PHP echo $row5[vat]; ?> </option>
<?PHP }
echo "</select>";
?></td>
</tr>
<tr>
<td class="dt" colspan="2">Vat Amt :</td>
<td class="forhead"><input type="text" id="vat_amt" name="vat_amt" style="width:120px;" value="<?PHP echo "$row[vat_amt]" ?>" class="text medium" onKeyUp="tot()"></td>
</tr>
<tr>
<td class="dt" colspan="2">Cash Discount :</td>
<td class="forhead"><input type="text" id="cash_discount" name="cash_discount" style="width:120px;" value="<?PHP echo "$row[cash_discount]" ?>" class="text medium" onKeyUp="tot()"></td>
</tr>
<tr>
<td class="dt" colspan="2">Total :</td>
<td class="forhead"><input type="text" name="amount" id="amount" style="width:120px;" class="text medium" onKeyUp="tot()" value="<?PHP echo "$row[amount]" ?>"></td>
</tr>
</table>
</body>
</html>
Hey i am using a dropdown list to change an image but i doesnt work Javascript: Code: addEventListener("load", configurator, false);
function configurator() {
var model = document.getElementById("Model").value
var afbeelding = document.getElementById("modelafbeelding")
switch (model) {
case "Audi A1":
var foto = "./images/audia1.png"
afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
break;
case "Audi A3":
var foto = "./images/audia3.png"
afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
break;
case "Audi A4":
var foto = "./images/audia4.png"
afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
break;
case "Audi A5":
var foto = "./images/audia5.png"
afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
break;
case "Audi A6":
var foto = "./images/audia6.png"
afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
break;
case "Audi R8":
var foto = "./images/audir8.png"
afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
break;
}
}
HTML: Code: <tr>
<td><select id="Model" name="Model">
<option>Audi A1</option>
<option>Audi A3</option>
<option>Audi A4</option>
<option>Audi A5</option>
<option>Audi A6</option>
<option>Audi R8</option>
</select></td>
<div id="modelafbeelding"></div>
</tr>
I'm in the middle of teaching myself PHP and SQL so I'm only at the paste-and-tweak level with Javascript. Bear with my newbie-ness. I've seen a few solutions for creating a form dropdown menu that changes a nearby image based on what is selected. I want exactly that, but is it possible to have the images also appear on mouseover? I found a menu solution using CSS, but when I applied it to a form, it didn't work. Can anyone put me in the right direction on how to do that? I've started with this code, but need to tweak it to do this if possible: Code:
<html>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="ddmessage"><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><select name="selectbox" size="1" onChange="changecontent(this)">
<option selected value="What is JavaScript?">What is JavaScript?</option>
<option value="Why learn JavaScript?">Why learn JavaScript?</option>
<option value="The difference between JavaScript and Java">The difference between Java and JavaScript</option>
<option value="What is DHTML?">What is DHTML?</option>
</select><br>
</td>
</tr>
<tr>
<td width="100%"><div id="output"></div><br>
<font face="arial" size="-2">This free script provided by <a href="http://javascriptkit.com">JavaScript Kit</a></font>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<p>
<script language="JavaScript">
/*
Drop down messages script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/
//change contents of message box, where the first one corresponds with the first drop down box, second with second box etc
var thecontents=new Array()
thecontents[0]='JavaScript is a scripting language developed by Netscape to add interactivity and power to web documents. Examples of JavaScript include live clocks, rollover effects,<br> <img src="http://www.google.com.au/intl/en_au/images/logo.gif"></img>'
thecontents[1]='The first word that comes to mind is: "Freedom baby, freedom!" With html, you are restricted to creating static, non interactive webpages. This, in today\'s internet standards, etc etc 1'
thecontents[2]='Java is completely different from JavaScript-It\'s a lot more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, etc. etc. 2'
thecontents[3]='DHTML, or Dynamic HTML, is a new web technology that enables elements inside your web page to be, well, dynamic. Things once considered unchangeable etc. etc 3'
//don't edit pass this line
function changecontent(which){
document.getElementById('output').innerHTML=thecontents[which.selectedIndex]
}
document.getElementById('output').innerHTML=thecontents[document.ddmessage.selectbox.selectedIndex]
</script>
</body>
</html>
Hi Within a classic asp webform (using vbscript) I would like part of the form (input boxes within table structure) to be specific/displayed depending on the users selection from the combo box in the row above. I think the best solution would be using Javascript can anyone suggest a solution or example code? Many thanks Sarah Hi I'm new to javascript, so this is probably very simple. I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success! Thanks in advance Hello, I am completely new to HTML/JS/CSS, therefore I know very little. I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July". I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected). If it matters, I am using IE8. Thanks! I currently have a web site in which I am using some Javascript to change the Background of a DIV. The DIV is defined as follows : <div id="outerscreen"> <div id="mainscreen"> </div> </div> and the Javascript I am using is as follows : var docEl = document.getElementById('outerscreen'); docEl.style.backgroundImage = "url('pics/intro.gif')"; My problem arises where this function works perfectly on IE but fails for Chrome, FF and Safari. Can anyone shed any light on what the problem is and how I might be able to resovle this. Thanks in advance Chris I am wondering if it would be possible to add a Cookie to this code i found, i am wanting the browser to remember the chosen background image and save it when the user closes the browser. Currently when the option is selected it does not remember the choice when you then go back to the page, any help on this would be much appreciated! Many Thanks Code: <script type="text/javascript">
function changeTheme()
{
var e = document.getElementById("themes");
var theme = e.options[e.selectedIndex].value;
console.log(theme);
document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
}
</script>
<body id="shelf"> <select id="themes" onChange="changeTheme()"> <option value="images/background1.jpg">Default</option> <option value="images/background2.jpg">Oriental</option> </select> Could anyone show me a script that would allow the user whos on my site change the background image from the default color to an image from a URL? And then it would have to save their choice in a cookie. Thanks!
Hi, i have a <td> with a background image and 3 other <td>'s that contains blank photos in them, i need 2 things that they'll make: 1. when i click on one td that contain blank image lets call it tdimg1 it will toggle the visibility of the div inside the first td lets call it tdframe and for the div lets call it divframe1, (i have a script that works) but the main issue is that when i click tdimg1 tdimg2 and tdimg3 it will show divframe1 divframe2 and divframe3 what i want is that it will show only one at a time, so if ill hit the tdimg2 it will show me divframe2 and if after that ill hit tdimg3 it will hide the divframe2 and appear the divframe3. 2.the tdframe have an image as a background lets call it basicbg.jpg, i want that when i will hit tdimg1 the background of the tdframe will change to lets say newbg1.jpg, and as ill hit it again it will go back to basicbg.jpg, as ill hit tdimg3 it will change to newbg3.jpg and if i wont "close" it and click tdimg2 it will just change it to newbg2.jpg thanks! can you explain someone step by this code?i didn't get it. <script language="Javascript"> <!-- function backcolor(form){ temp = "" for (var i = 0; i < 16; i++) { temp = form.color[i].value if (form.color[i].checked){ document.bgColor = temp } } } function randombackground(){ document.bgColor = getColor() } function getColor(){ currentdate = new Date() backgroundcolor = currentdate.getSeconds() if (backgroundcolor > 44) backgroundcolor = backgroundcolor - 45 else if (backgroundcolor > 29) backgroundcolor = backgroundcolor - 30 else if (backgroundcolor > 15) backgroundcolor = backgroundcolor - 16 if (backgroundcolor == 0 ) return "olive"; else if (backgroundcolor == 1 ) return "teal"; else if (backgroundcolor == 2 ) return "red"; else if (backgroundcolor == 3 ) return "blue"; else if (backgroundcolor == 4 ) return "maroon"; else if (backgroundcolor == 5 ) return "navy"; else if (backgroundcolor == 6 ) return "lime"; else if (backgroundcolor == 7 ) return "fuschia"; else if (backgroundcolor == 8 ) return "green"; else if (backgroundcolor == 9 ) return "purple"; else if (backgroundcolor == 10 ) return "gray"; else if (backgroundcolor == 11 ) return "yellow"; else if (backgroundcolor == 12 ) return "aqua"; else if (backgroundcolor == 13 ) return "black"; else if (backgroundcolor == 14 ) return "white"; else if (backgroundcolor == 15 ) return "silver"; } // --> </script> I have a div that changes background on click. Example: <script type="text/javascript"> function changeBackground(strURL) { document.getElementById('about').style.backgroundImage="url("+strURL+")"; } </script> <body> <div id="about"> <a href="#about" onClick="changeBackground('mainbackground.jpg');">text</a> <a href="#about" onClick="changeBackground('background2.jpg');">text</a> </div> This part works just fine so no issues. However, I have content on the mainbackground.jpg that is getting transferred over to the other backgrounds as well. I would like each background to have its own paragraph content. I do not want to embed the info into the images for SEO reasons. Any ideas on how to do this? Thanks! Hi, what I want to do is create a menu with rollover buttons but each button also changes the background image of a div. I've managed to change the colour of the div but not add an image there. I've added my code so you can have a look. Case 0 shows me attempting to change the background image. I must be doing something wrong. I've left the other cases as colours so you can see how I did that. I eventually want it all to be images. I'm creating a Joomla website (not sure if that makes a difference). Code: <body onload="addHandlers()">
<script type="text/javascript" language="javascript">
function addHandlers(){
var allMenus = document.getElementById("services_menu").getElementsByTagName("li");
for(var k = 0; k < allMenus.length; k++)
{
allMenus[k].setAttribute('onmouseover', 'ChangeContentBg('+ k + ')' );
allMenus[k].setAttribute('onmouseout', 'Reset()');
}
}
</script>
<script type="text/javascript">
function ChangeContentBg(i)
{
var Num = parseInt(i);
var ContentDiv = document.getElementById("content");
switch(Num)
{
case 0:
ContentDiv.style.background-image = 'url(../images/waxingtinting_rollover_image.jpg)';
break;
case 1:
ContentDiv.style.backgroundColor = 'red';
break ;
case 2:
ContentDiv.style.backgroundColor = 'purple';
break ;
case 3:
ContentDiv.style.backgroundColor = 'green';
break ;
case 4:
ContentDiv.style.backgroundColor = 'yellow';
break ;
/*For each new color you would have to add a new case and change ChangeContentBg() parameter , to the case you want in <li> tag*/
}
}
function Reset()
{
document.getElementById("content").style.backgroundColor = '';
}
</script>
I have a div that changes background on click. Example: <script type="text/javascript"> function changeBackground(strURL) { document.getElementById('about').style.backgroundImage="url("+strURL+")"; } </script> <body> <div id="about"> <a href="#about" onClick="changeBackground('mainbackground.jpg');">text</a> <a href="#about" onClick="changeBackground('background2.jpg');">text</a> </div> This part works just fine so no issues. However, I have content on the mainbackground.jpg that is getting transferred over to the other backgrounds as well. I would like each background to have its own paragraph content. I do not want to embed the info into the images for SEO reasons. Any ideas on how to do this? Thanks! Hi Complete novice with Java so need some help please! I want to put a button on a website that when clicked changes the background. The button needs to be an image. For example, click on the image and it makes the background image1 and then click again to switch to background image2. The image/button that is being clicked will be 2 images (one says "turn lights on" then when clicked shows other image "turn lights off") I have managed to pick up bits of code from the net that change the background and got another code that makes 2 images a toggle button. The button changes the background on the first click but no back again on the second click. I guess it needs an if/else statement but not sure. Thanks for any help!!!! |
|||||||