I am creating a rabbit genetics calculator in sorts that allows the user to put a genetic string with select options. Depending on the genes selected, it will show an image of what the color should look like. The main three genes need to change the base color image, and marking images depending on the genes selected.
<div class="rabbit">
<img id="basecoat" src="img/base/chestnut.png" border="0">
<img id="tort" src="img/tort/tort.png" border="0">
</div>
<select id="agouti">
<option value="chestnut" selected>chestnut</option>
<option value="self">self</option>
</select>
<select id="extension">
<option value="black" selected>black</option>
<option value="red">red</option>
</select>
<select id="color">
<option value="full" selected>full</option>
<option value="chin">chinchilla</option>
</select>
Here are the combos and their desired effect:
"chestnut" + "black" + "full" = img/base/chestnut.png
"chestnut" + "black" + "chin" = img/base/chinchilla.png
"chestnut" + "red" + "full" = img/base/orange.png
"chestnut" + "red" + "chin" = img/base/frosty.png
"self" + "black" + "full" = img/base/black.png
"self" + "black" + "chin" = img/base/black.png
"self" + "red" + "full" = img/base/black.png + img/tort/tort.png
"self" + "red" + "chin" = img/base/black.png + img/tort/sallander.png
You'll need to prepare a noimage.png file to use it as a placeholder in case of error or when the second image is not supposed to show up.
Try this code.
var $tag = $("#agouti").val () + "_" + $("#extension").val () + "_" + $("#color").val ();
var combos = {"chestnut_black_full":['img/base/chestnut.png', 'noimage.png'],
"chestnut_black_chin":['img/base/chinchilla.png', 'noimage.png'],
"chestnut_red_full":['img/base/orange.png', 'noimage.png'],
"chestnut_red_chin":['img/base/frosty.png', 'noimage.png'],
"self_black_full":['img/base/black.png', 'noimage.png'],
"self_black_chin":['img/base/black.png', 'noimage.png'],
"self_red_full":['img/base/black.png', 'img/tort/tort.png'],
"self_red_chin":['img/base/black.png', 'img/tort/sallander.png']};
$(document).on ("change", "select", function () {
if (combos[$tag]) {
$("#basecoat").attr ("src", combos[$tag][0]);
$("#tort").attr ("src", combos[$tag][1]);
}
else {
$("$basecoat, $tort").attr ("src", "noimage.png");
}
});