I'm looking to find out how I can change images using color div changers.
For example, if I have a dropdown menu with different car brands (like Ford, GMC, Nissan), and I select a vehicle which is then categorized by model. If I choose a model, a default image will display from that model.
Now, I want to be able to change the color of the model vehicle using div color boxes. For instance, if I select blue, I want an image to display with the make, model, and color without showing all the color divs with the models.
If you need more clarification on what I'm trying to achieve, feel free to ask questions!
function fctCheck(brand) {
var elems = document.getElementsByName("subselector");
for (var i = 0; i < elems.length; i++) {
elems.item(i).style.display = "none";
}
document.getElementById(brand).style.display = "block";
}
function setCar() {
var img = document.getElementById("image");
img.src = this.value;
return false;
}
document.getElementById("ford").onchange = setCar;
function setCar() {
var img = document.getElementById("image");
img.src = this.value;
return false;
}
document.getElementById("gmc").onchange = setCar;
function setCar() {
var img = document.getElementById("image");
img.src = this.value;
return false;
}
document.getElementById("nissan").onchange = setCar;
function setCar() {
var img = document.getElementById("image");
img.src = this.value;
return false;
}
document.getElementById("dodge").onchange = setCar;.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}
.white {
background: #FFFFFF;
}
.yellow {
background: #FAFF38;
}
orange {
background: #FFA200;
}
.red {
background: #FF0000;
}
dorange {
background: #FF5500;
}
lgreen {
background: #80FF00;
}
green {
background: #45C731;
}
turk {
background: #17DDBC;
}
lblue {
background: #00A2FF;
}.blue {
background: #1713F6;
}.purple {
background: #AB09D3;
}.black {
background: #000000;
}
<div id="colour">
<div class="foo white" data-color="#FFFFFF">
</div>
<div class="foo black" data-color="#000000">
</div>
<div class="foo yellow" data-color="#FAFF38">
</div>
<div class="foo orange" data-color="#FFA200">
</div>
<div class="foo red" data-color="#FF0000">
</div>
<div class="foo dorange" data-color="#FF5500">
</div>
<div class="foo lgreen" data-color="#80FF00">
</div>
<div class="foo green" data-color="#45C731">
</div>
<div class="foo turk" data-color="#17DDBC">
</div>
<div class="foo lblue" data-color="#00A2ff">
</div>
<div class="foo blue" data-color="#1713F6">
</div>
<div class="foo purple" data-color="#AB09D3">
</div>
</div>
<select id="brand" onchange="fctCheck(this.value);">
<option value="">Choose a brand</option>
<option value="ford">Ford</option>
<option value="gmc">GMC</option>
<option value="nissan">Nissan</option>
<option value="dodge">Dodge</option>
</select>
<img id="image" src="Null_Image.png" />
<select id="ford" name="subselector" style="display:none">
<option value="http://mebe.co/mustang">Mustang</option>
<option value="http://mebe.co/f150">F150</option>
</select>
<select id="gmc" name="subselector" style="display:none">
<option value="http://mebe.co/yukon">Yukon</option>
<option value="http://mebe.co/1500">1500</option>
</select>
<select id="nissan" name="subselector" style="display:none">
<option value="http://mebe.co/sentra">Sentra</option>
<option value="http://mebe.co/gtr">GTR35</option>
</select>
<select id="dodge" name="subselector" style="display:none">
<option value="http://mebe.co/dart">Dart</option>
<option value="http://mebe.co/challenger">Challenger</option>
</select>