I need to change the image on my website using 2 select for colour and size.
e.g. If I choose the option "Red" under the colour select, and then I choose the option "Small" under the size select, the image should be "small_red.png".
Similarly, if I choose red and large, then the image should be "red_large.png"
Thus far, I only know how to do it for 1 select, but not multiple select.
Here's my html:
<img id="imageToSwap" src="img/red.png">
<select id="colour" onChange="swapImage()">
<option value="img/red.png">Red</option>
<option value="img/green.png">Green</option>
</select>
Here's my javascript:
<script type="text/javascript">
function swapImage(){
var image = document.getElementById("imageToSwap");
var change = document.getElementById("colour");
image.src = change.value;
};
</script>
var
img = document.getElementById('imageToSwap'),
colour = document.getElementById('colour'),
size = document.getElementById('size'),
change;
change = function (evt) {
img.src = ['img/', size.value, '_', colour.value, '.png'].join('');
};
colour.addEventListener('change', change, false);
size.addEventListener('change', change, false);
with:
<img id="imageToSwap">
<select id="colour">
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<select id="size">
<option value="small">Small</option>
<option value="big">Big</option>
</select>
demo: http://jsbin.com/iwezad/2/
though, using jQuery this could be shortend a lot, and you'd get rid of some browser quirks regarding addEventListener.
jQuery version:
$('#colour, #size').on('change', function() {
$('#imageToSwap').prop('src',
['img/', $('#size').val(), '_', $('#colour').val(), '.jpg'].join('')
);
});
You can always concatenate values from selects.
<img id="imageToSwap" src="img/red.png">
<select id="colour" onChange="swapImage()">
<option value="red.png">Red</option>
<option value="green.png">Green</option>
</select>
<select id="size" onChange="swapImage()">
<option value="small">Small</option>
<option value="large">Large</option>
</select>
And in script:
<script type="text/javascript">
function swapImage(){
var image = document.getElementById("imageToSwap");
var color = document.getElementById("colour").value;
var size = document.getElementById("size").value;
image.src = "img/" + size + "_" + color;
};
</script>
<img id="imageToSwap" >
<select id="colour" onchange="swapImage()">
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<select id="size" onchange="swapImage()">
<option value="small">Small</option>`
<option value="large">Large</option>
</select>
Javascript code:
<script type="text/javascript" language="javascript">
function swapImage() {
var image = document.getElementById("imageToSwap");
var color = document.getElementById("colour").value;
var size = document.getElementById("size").value;
var imagename = size + '_' + color + '.png';
image.src = "img/" + imagename;
}
</script>
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 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 am trying to have different images come up after selecting an option from a dropdown. I know it's probably very basic, but I am very new to HTML and Javascript. Not sure where or why the code isn't producing the correct output. Thanks!
<script type = "text/javascript">
function displayImage(elem) {
var img = document.getElementById("dessert");
image.src = elem.value;
}
</script>
<form name="controls">
<select name="dessertchoice" onchange="displayImage(this);">
<option value="">None</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/chocolate.jpg">Chocolate</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/icecream.jpg">Ice Cream</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/fruit.jpg">Fruit</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/brule.jpg">Creme Brulee</option>
</select>
</br></br>
<td>
<img id="dessert" src="" style="width:300px;height:200px;"/>
</td></tr>
</form>
it's just a simple typo, happens to the best of us :)
Change this image.src = elem.value; to img.src = elem.value;
Here is the working example: http://jsbin.com/jamixipiza/1/edit?html,output
Hope that helps!
Try substituting img for image within displayImage
<script type = "text/javascript">
function displayImage(elem) {
var img = document.getElementById("dessert");
img.src = elem.value;
}
</script>
<form name="controls">
<select name="dessertchoice" onchange="displayImage(this);">
<option value="">None</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/chocolate.jpg">Chocolate</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/icecream.jpg">Ice Cream</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/fruit.jpg">Fruit</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/brule.jpg">Creme Brulee</option>
</select>
</br></br>
<td>
<img id="dessert" src="" style="width:300px;height:200px;"/>
</td></tr>
</form>
I have updated the code to this still does not seem to work I have validates the js file is pointed correctly but when I click any option the picture refuses to update.
Here's is my code:
function color() {
if (document.getElementById('carcolor').value == 'Red') {
document.getElementById('car_pic').src = 'image/Red.jpg';
}
if (document.getElementById('carcolor').value == 'Blue') {
document.getElementById('car_pic').src = 'image/BLue.jpg';
}
if (document.getElementById('carcolor').value == 'Silver') {
document.getElementById('car_pic').src = 'image/Silver.jpg';
}
if (document.getElementById('carcolor').value == 'White') {
document.getElementById('ccar_pic').src = 'image/White.jpg';
}
if (document.getElementById('carcolor').value == 'Black') {
document.getElementById('car_pic').src = 'image/Black.jpg';
}
}
checkcolor();
<div id="select1">
<h1>Choose A Color</h1>
<select name="color" size="5" id="carcolor">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Silver">Silver</option>
<option value="White">White</option>
<option value="Black">Black</option>
</select>
<img src="" alt="car picture" id="car_pic">
</div>
Multiple problems:
id can't contain whitespaces
You were using wrong ids in your JS
You were attaching ids to the wrong elements in your html
You were calling checkcolor but defined the function as color.
Better avoid inline event handlers
Avoid getting the same DOM element multiple times, better store it in a variable
You use if conditionals in a wrong way.
Instead of so many conditionals, you could use an object that gives the URL of the image given the selected value.
var sel = document.getElementById('select1'),
img = document.getElementById('car_pic'),
imgURLs = {
Red: 'image/Red.jpg',
Blue: 'image/Blue.jpg',
Silver: 'image/Silver.jpg',
White: 'image/White.jpg',
Black: 'image/Black.jpg'
};
function checkcolor() {
img.src = imgURLs[sel.value];
}
sel.onchange = checkcolor;
checkcolor();
<div>
<h1>Choose A Color</h1>
<select name="color" size="5" id="select1">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Silver">Silver</option>
<option value="White">White</option>
<option value="Black">Black</option>
</select>
<img src="" alt="car picture" id="car_pic">
</div>
If all image URLs follow the same pattern, consider
img.src = 'image/' + sel.value + '.jpg';
var sel = document.getElementById('select1'),
img = document.getElementById('car_pic');
function checkcolor() {
img.src = 'image/' + sel.value + '.jpg';
}
sel.onchange = checkcolor;
checkcolor();
<div>
<h1>Choose A Color</h1>
<select name="color" size="5" id="select1">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Silver">Silver</option>
<option value="White">White</option>
<option value="Black">Black</option>
</select>
<img src="" alt="car picture" id="car_pic">
</div>
document.getElementById relates to the ID within your tag, your pointing it towards the alternative name of the the image tag. Also you assigning statements are outside your brackets;
if (document.getElementById('select1').value == 'Red'){} <-- Here
document.getElementById('car picture').src ='image/Red.jpg';
to
if (document.getElementById('select1').value == 'Red'){
document.getElementById('car picture').src ='image/Red.jpg';
}
hope it helps
Edit: Was posted after the two comments below your question, both pretty much explain it
I would like image.src to display the id not the value of each <option>. Does dropped.id exist? Can this be done? Or is the id locked in the <select>? When the user hits submit, I need to pass the value in the form.
<script type="text/javascript">
function swapImage(){
var image = document.getElementById("imageToSwap");
var dropped = document.getElementById("changethisimage");
image.src = "http://foo.com/images/"+dropped.value;
};
</script>
<img id="imageToSwap" src="http://foo.com/images/SHOP_Car Emblem.jpg" width="150" align=right>
<select name="os0" id="changethisimage" onChange="swapImage()">
<option value="Light Blue" id="SHOP_Car Emblem_Cyan.jpg" selected>Light Blue
<option value="Dark Blue" id="SHOP_Car Emblem_DkBlue.jpg">Dark Blue
<option value="Canadian Red" id="SHOP_Car Emblem_Red.jpg">Canadian Red
<option value="Irish Green" id="SHOP_Car Emblem_IrishGreen.jpg">Irish Green
</select>
Try
image.src = "url" + dropped.selectedOptions[0].id
Browser support may be bad however. So you may want this
var selected = dropped.selectedIndex;
image.src= "url" + dropped.options[selected].id
See the Select interface for more details.
As a side-note, I see your doing
<select name="os0" id="changethisimage" onChange="swapImage()">
The onChange="code" bit is bad, really bad. It's an in-line event handler. This means you have a piece of JavaScript code in your HTML. This totally goes against separation of concerns and leads to spaghetti code hell.
You should totally replace it with
document.getElementById("changethisimage").addEventListener("change", swapImage);
Try this:
JS:
function swapImage(selectObj){
var image = document.getElementById("imageToSwap");
var options = selectObj.options;
var sIndex = selectObj.selectedIndex;
image.src = "http://foo.com/images/"+options[sIndex].id;
};
HTML: <select name="os0" id="changethisimage" onChange="swapImage(this)">
This is how I would do it:
HTML:
<select id="select_kitten">
<option value="Kitten 1" data-src="210/200/" selected>Kitten 1</option>
<option value="Kitten 2" data-src="220/210/">Kitten 2</option>
<option value="Kitten 3" data-src="200/180/">Kitten 3</option>
<option value="Kitten 4" data-src="225/220/">Kitten 4</option>
</select>
<img id="kitten_img">
JavaScript:
var img = document.getElementById( 'kitten_img' ),
select = document.getElementById( 'select_kitten' );
function onchange() {
img.style.opacity = 0.2;
img.src = 'http://placekitten.com/' + select.options[ select.selectedIndex ].dataset.src;
}
img.onload = function () {
this.style.opacity = 1;
};
select.onchange = onchange;
onchange();
Live demo: http://jsfiddle.net/XmhU9/4/
dataset isn't implemented in IE though. If you require support for IE, consider a cross-browser library.