I want to got a body with a defined background-image and be able to choose from a ul to the background i want to change(ex:car,dog,house...).
body {
width:1200px;
height:907px;
background-image: url("fotos/cc.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
<body>
<select id="borde" onchange="encender();" name="select1">
<option value="0" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</body>
If I'm understanding you correctly, then you want to change the background-image of the body according to what is selected in the tag right?
If so, then that can be accomplished through javascript with either a switch statement(shown below) or through setting the value on the option in the select tag to be a string and using the value as the background image. The first way would look something like this:
function changeBackground(selectedOption) {
var imgSRC = "";
switch (selectedOption.value) {
case "0":
imgSRC = "dog.png";
break;
case "1":
imgSRC = "cat.png";
break;
case "2":
imgSRC = "house.png";
break;
default:
imgSRC = "default.png";
break;
}
document.body.style.backgroundImage = "url('" + imgSRC + "')";
}
<select id="borde" onchange="changeBackground(this);" name="select1">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
You didn't clearly specify what you want to do with select tag. However as I understood you want to change background image on option change. Your eventHandler is calling a function which is not created. I have called onchange event via JQuery to store background Image from selected option value in the code below.
var body = document.getElementById('body');
var select= document.getElementById('borde');
$('select[name=select1]').on('change', function(){
body.style.backgroundImage = String('url('+ select.children[select.selectedIndex].getAttribute('value')+')')
})
body {
width:1200px;
height:907px;
background-image: url("http://cdn3.megarush.net/wp-content/uploads/2013/01/search-engine-friendly-urls.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id ='body'>
<select id="borde" name="select1">
<option value="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg">default</option>
<option value="https://res.cloudinary.com/ahrefs/image/upload/v1407314140/production-application-pending-logo-152.jpg">1</option>
<option value="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">2</option>
<option value="http://topwalls.net/wallpapers/2012/01/Nature-sea-scenery-travel-photography-image-768x1366.jpg">3</option>
<option value="http://img.gettyimageslatam.com/public/userfiles/redesign/images/landing/home/img_entry_002.jpg">4</option>
</select>
</body>
Related
I have two dropdown menus. The picture that's displayed changes based on the dropdown selection.
I want to make it so that when a User chooses a color and then an overlay, the overlay image displays on top of the color image rather than replacing it.
I'm new to javascript and not sure where to begin to solve this, so any insight at all really helps.
var changeColorImage = function() {
document.getElementById('image').src = this.options[this.selectedIndex].value + "_Image.png"
}
var colorList = document.getElementById('ColorList');
colorList.addEventListener('change', changeColorImage, false);
var changeOverlayImage = function() {
document.getElementById('image').src = this.options[this.selectedIndex].value + "_Image.png"
}
var overlayList = document.getElementById('OverlayList');
overlayList.addEventListener('change', changeOverlayImage, false);
img {
margin: 50px;
width: 100px;
}
<select id="ColorList">
<option value="none">None</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<select id="OverlayList">
<option value="overlay_1">Overlay 1</option>
<option value="overlay_2">Overlay 2</option>
<option value="overlay_3">Overlay 3</option>
</select>
<img id="image" src="none_Image.png" />
I am trying to load html page, based on dropdown selection. It works fine when selections are made. But want to load default page with default dropdown selection. Here is my code. Please help.
<!DOCTYPE html>
<html>
<head>
<style>
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
function showSelected(sel) {
locations = ["",
"/default.asp",
"test2.html",
"//example.com"
];
srcLocation = locations[sel.selectedIndex];
if (srcLocation != undefined && srcLocation != "") {
document.getElementById('content').innerHTML = '<iframe src="' + srcLocation +
'" width="100%" height="100%" frameborder="no" scrolling="auto"></iframe>';
//document.getElementById('content').innerHTML = "<br>Page Doesn't exists<br>";
}
}
$(function() {
$("select#page_selected").val("default.asp").change();
});
</script>
</head>
<body>
<select id="page_selected" onchange="showSelected(this);" onload="showSelected(this);">
<option value="">select an option...</option>
<option value="default.asp">Page 1</option>
<option value="test2.html">Page 2</option>
<option value="Page3.html">Page 3</option>
</select>
<div id="content"></div>
</body>
</html>
Something similar to below should do the work.
<select onchange="showSelected(this);" onload="showSelected(this);">
<option value="">select an option...</option>
<option value="default.asp" selected="selected">Page 1</option>
<option value="test2.html">Page 2</option>
<option value="Page3.html">Page 3</option>
</select>
Well HTML have an attribute for this, you can simply use selected attribute in your wanted option:
<select onchange="showSelected(this);">
<option value="">select an option...</option>
<option selected value="default.asp">Page 1</option>
<option value="test2.html">Page 2</option>
<option value="Page3.html">Page 3</option>
</select>
Your select does not have a page_selected id. Also there's a typo in default.asp
Without select id your code would have to be:
$(document).ready(function() {
$("select option").filter(function() {
return $(this).val() == "default.asp";
}).prop('selected', true);
//showSelected();
});
You could also use something like:
$(document).ready(function() {
$("select option[value='default.asp']").prop('selected', "selected");
//showSelected();
});
EDIT: to call the showSelected() after that, you'll need to pass in the $("select") object, but you could also just trigger the change event:
$("select").trigger("change");
Of course you'd want to add an id to your selectors!
EDIT: and you're not getting any errors in your console? For instance an error saying showSelected is not defined.
Here's a working fiddle: https://jsfiddle.net/oc8xcyce/
Even shorter: set the select value: https://jsfiddle.net/oc8xcyce/1/
I have a system where you are able to choose a car. You can then choose the transmission and color. Different cars and transmissions bring up different colors. Not sure how to make an image appear of a car when a color is chosen. So for example I choose the rs6 and automatic and then the black color. I would then want an image to appear depending on the color chosen. How would I program it so different cars and colors bring up different images. Im relatively new to coding. Any help would be aprreciated.
HTML
<!DOCTYPE html>
<html><head>
<title></title>
</head>
<body>
<form name="CarConfigurator">
<select id="car" name="Car_make">
<option value="" selected="selected">Which car?</option>
<option value="car1">Audi RS6</option>
<option value="car2">BMW M4</option>
<option value="car3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select id="trans" name="A_M">
<option value="" selected="selected">What trans?</option>
<option value="auto">Automatic</option>
<option value="man">Manual</option>
</select>
<br>
<br>
<select id="color" name="Color">
<option value="" selected="selected">What Color?</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="green">Green</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1 /jquery.min.js"/
</script>
<script src="configurator.js"></script>
</body>
</html>
Javascript
$("#car").change(function () {
transmission();
});
$("#trans").change(function () {
transmission();
});
function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
$("option[value$='red']").hide();
$("option[value$='white']").hide();
$("option[value$='green']").hide();
} else {
$("option[value$='red']").show();
$("option[value$='white']").show();
$("option[value$='green']").show();
}
}
For now it is only working for Audi - Automatic - black and blue to show you the basic idea but it is repeating code and you can do the same for the rest of the cars too.
In this example I am setting the src of the image as the car selected. For example if you select car1 and man and red then src of the image as car1manred.jpg, also I'm changing the alt attribute as well so that you can see the change.
you have to do a lot of manual work. I have created an object for the data that will determine how many cars you have in each category. It would be better if you use JSON for that.
Also I have made car1autoblack (which gets the src of the images) as an array but you can make it as an object and include other things about the cars in this category. for example name, price, availability and much more
$("#car").change(function () {
transmission();
selection();
});
$("#trans").change(function () {
transmission();
selection();
});
$("#color").change(function () {
selection();
});
var cars = {
car1autoblack:["car1auto1black1.png","car1auto1black2.jpg"],
car1autoblue:["car1auto1blue1.png","car1auto1blue2.jpg","car1auto1blue3.jpeg"]
}
function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
$("option[value$='red']").hide();
$("option[value$='white']").hide();
$("option[value$='green']").hide();
} else {
$("option[value$='red']").show();
$("option[value$='white']").show();
$("option[value$='green']").show();
}
}
function selection(){
if ($("#car").val() && $("#trans").val() && $("#color").val()) {
var carVal = $("#car").val();
var transVal = $("#trans").val();
var colorVal = $("#color").val();
var combineVal = carVal+transVal+colorVal;
//var imageLink = combineVal+".jpg";
//$("#showImg").attr("src", imageLink);
//$("#showImg").attr("alt", imageLink);
//console.log(cars[combineVal]);
var inputDivHTML = "";
var car = cars[combineVal];
for(i in car){
inputDivHTML += "<img class='showImg' src='"+car[i]+"' alt='"+car[i]+"'/>";
}
$(".imageHere").html(inputDivHTML);
}
}
img.showImg{
width:150px;
height:70px;
margin:10px 3px;
border:1px solid red;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="CarConfigurator">
<select id="car" name="Car_make">
<option value="" selected="selected">Which car?</option>
<option value="car1">Audi RS6</option>
<option value="car2">BMW M4</option>
<option value="car3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select id="trans" name="A_M">
<option value="" selected="selected">What trans?</option>
<option value="auto">Automatic</option>
<option value="man">Manual</option>
</select>
<br>
<br>
<select id="color" name="Color">
<option value="" selected="selected">What Color?</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="green">Green</option>
</select>
</form>
<div class="imageHere">
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
</div>
I want to change the font of selected value in the select tag after the value has been selected .
Following is the code for my html
<select class="form-control" id="session-select">
<option value="SELECT SESSION NUMBER" disabled selected>SELECT SESSION NUMBER</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
Following is the CSS
select{
border:none !important;
box-shadow: none;
font-family: $lgr;
font-size: 35px;
height: 54px;
#media (min-width: $mobile) and (max-width: $mobile-max){
/* Media Query Between Screen 320px and 480px */
font-size: 30px;
}
Not sure you can change the different font-size of option tags, but you can change color and background of selected option like in below demo.
Here is the DEMO http://jsfiddle.net/yeyene/99h7m/1/
Jquery
$('#session-select').on('change', function(){
var val = $(this).val();
$(this).find('option[value='+val+']').css({
'color':'red',
'background':'#e8e8e8'
});
});
I attempted this in the following way and it worked for me:
Html Part:
<select class="form-control" id="session-select">
<option value="SELECT SESSION NUMBER" disabled selected id="selectedDd">SELECT SESSION NUMBER</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
Jquery Part:
<script>
$(document).ready(function () {
$("#session-select").change(function () {
$("#session-select option").removeAttr("id");
var selected = $("#session-select option[value=" + $(this).val() + "]").attr('id','selectedDd');
});
});
</script>
Css Part:
<style type="text/css">
#session-select,#selectedDd {font-size:large!important; }
option:not(#session-select){ font-size:small; }
</style>
looked around for this for a while and can't find anything that seems to suit what I need. I want to be able to change the image of a t-shirt to one of a different colour, depending which colour is selected in the drop down menu.
Here's the DDL:
<select name="Colours" onchange = "changeImage()">
<option value="White">White</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
<option value="Purple">Purple</option>
</select>
Here's the JS function I've written (switch statement is repeated for each of the options):
<script type="text/javascript">
function changeImage(){
var x = document.getElementById("Colours").value;
switch(x){
case "White":
document.Mainimg.src = images/white.jpg;
location.reload();
break;
case "Red":
document.Mainimg.src = images/red.jpg;
location.reload();
break;
And finally, if it's needed, the code for the image:
<div id="main_img">
<img id="Mainimg" name="Mainpic" src=images/white.jpg>
</div>
This doesn't work, nothing happens when I select a new option in the list. Do I have the complete wrong idea of how to do this or is it just a simple tweak?
Thanks for any help.
Remove the location.reload() : When you reload the page you lose your changes. The fact you change the src of the image is enough to have it loaded.
Use getElementById to fetch your image and put the URL between quotes :
document.getElementById('Mainimg').src = "images/white.jpg";
The missing quotes could have been discovered simply by using the console which shows compilation errors. Use the console.
Perhaps what you want to do is this: http://jsfiddle.net/jWbUv/
HTML:
<select name="Colours" onchange = "changeImage(this)">
<option value="">please select</option>
<option value="White">White</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
<option value="Purple">Purple</option>
</select>
<div id="main_img">
</div>
JS:
function changeImage(src) {
var mainImg = document.getElementById('main_img');
mainImg.style.setProperty('background-image', 'url(\''+ src.value +'.png\')');
}
CSS:
#main_img {
width: 100px;
height: 100px;
background-size: contain;
background-repeat: no-repeat;
}