JSFiddle - React, Tailwind, and code Playground
HTML
<select id="charac">
<option value='ken'>Ken</option>
<option value='ryu'>Ryu</option>
<option value='dhal'>Dhalsim</option>
</select>
<br>
<input type="button" id="start" value="start">
<br>
<div class="graphic"></div>
CSS
img {
width: 200px;
height: 400px;
}
JavaScript
var img_map = {
ken: {
win: 'http://www.zweifuss.ca/colorswap.php?pcolorstring=KenPalette.bin&pcolornum=0&pname=ken/ken-fireball.gif',
lose: 'http://www.zweifuss.ca/colorswap.php?pcolorstring=KenPalette.bin&pcolornum=0&pname=ken/ken-twist.gif'
},
ryu: {
win: 'http://www.zweifuss.ca/colorswap.php?pcolorstring=RyuPalette.bin&pcolornum=0&pname=ryu/ryu-shoryuken.gif',
lose: 'http://www.zweifuss.ca/colorswap.php?pcolorstring=RyuPalette.bin&pcolornum=0&pname=ryu/ryu-twist.gif'
},
dhal: {
win: 'http://www.zweifuss.ca/colorswap.php?pcolorstring=OroPalette.bin&pcolornum=0&pname=oro/oro-uppercut.gif',
lose: 'http://www.zweifuss.ca/colorswap.php?pcolorstring=OroPalette.bin&pcolornum=0&pname=oro/oro-twist.gif'
}
};
var img_win = new Image();
var img_lose = new Image();
img_win.src = img_map.ken.win;
img_lose.src = img_map.ken.lose;
$('#charac').on('change', function () {
var sel = $(this).val();
if (sel in img_map) {
img_win.src = img_map[sel].win;
img_lose.src = img_map[sel].lose;
}
});
$('#start').on('click', function () {
$('.graphic').append(img_win).append(img_lose);
});