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
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 have a multiple selection box that I would like to use the value's from to display images based on selecting these values, eg. if one value is selected then one image would be displayed, if two are selected two would be displayed etc. I would also like a limit on it of three images displayed at once, no matter how many selections.
<select multiple name="item" class="details" action="post" id="mySelect">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
</select>
Any help would be greatly appreciated, thank you!
What I've tried so far:
<script type="text/javascript">
<!--
function showimage() {
var htmlStr="";
var option = document.getElementById("selectedValue");
for (i=0;i<option.options.length;i++) {
if (option.options[i].selected) {
htmlStr+='<img src="/products/";
htmlStr+=option.options[i].value;
htmlStr+='" /><br />';
}
}
document.getElementById('mySelect').innerHTML = htmlStr;
}
//-->
</script>
The images are located in /products/..
Don't forget to put correct image paths.
function imageFunc(imageid){
var Imageplace=document.getElementById("myImage");
Imageplace.src=imageid;
}
<select multiple name="item" class="details" id="mySelect" onchange="imageFunc(this.value)";>
<option value="1.jpg">One</option>
<option value="2.jpg">Two</option>
<option value="3.jpg">Three</option>
<option value="4.jpg">Four</option>
</select>
<img id="myImage" src="1.jpg"/>
Change your html to this:
<select multiple name="item" class="details" action="post" id="mySelect" onchange="showimage(this.value)">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
And your JavaScript to this:
function showimage(option) {
var htmlStr="";
if(option > 3) {
option = 3;
}
for(i=0;i<option;i++) {
htmlStr+='<img src="/products/' + i + '.jpg" /><br />';
}
document.getElementById('images').innerHTML = htmlStr;
}
All your images should be in the products folder with names: 1.jpg, 2.jpg, ...
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;
}
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>