Menu
I am working one task i.e change image according to select the combobox item name. My task look like:
In this picture I have made one combobox in that having item name like photo1, photo2 and photo3.
So my question is that, after select the combobox selected item according to the selected item image will be change automatically and replace the heart image. So for this task I have used the html page and one external JavaSCript.
In html page whole UI is described while in external JavaScript other functionality are described.
Above show the html page code i.e.
function addAnchor(group) {
group.add(anchor);
}
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: "container",
width: 691,
height: 440
});
var yodaGroup = new Kinetic.Group({
x: 0,
y: 0,
draggable: false
});
var layer = new Kinetic.Layer();
function addProduct( imgObj ){
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var image = new Kinetic.Image({
x: stage.getWidth() / 2 - 53,
y: stage.getHeight() / 2 - 59,
image: imageObj,
width: 106,
height: 118,
draggable: true
});
// add the shape to the layer
layer.add(image);
// add the layer to the stage
stage.add(layer);
image.on("mouseover", function(){
var imagelayer = this.getLayer();
document.body.style.cursor = "move";
this.setStrokeWidth(1);
this.setStroke("#000000");
layer.draw();
writeMessage(messageLayer, "Drag Image Into Position Double Click To Remove");
});
var messageLayer = new Kinetic.Layer();
stage.add(messageLayer);
// yoda
var yodaImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.yoda,
width: 691,
height: 450,
name: "image"
});
yodaGroup.add(yodaImg);
stage.draw();
}
window.onload = function() {
var sources = {
//From here the static images has coming. I want to do dynamic // image as per the combobox is selected item name is changed.
yoda: "images/heart.jpg"
};
loadImages(sources, initStage);
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" src="js/version1.js"></script>
</head>
<body>
<div id="container" style="float:left; margin-right:40px;margin-top:10px;"> </div>
<select name="Choice">
<option value="Pic1.jpg">Photo 1</option>
<option value="Pic2.jpg">Photo 2</option>
<option value="Pic3.jpg">Photo 3</option>
</select>
</body>
</html>So here is my code and just I want to do the call the dynamic image as per the combobox selected item name is changed in windows load which I have comment from where the image is calling by JavaScript
939
asked Jun 28 '26 22:06
If you want to change the image path according to the selected option of the select box,
HTML :
<select name="kitchen_color" id="kitchen_color" onchange="setImage(this);">
<option value="https://www.google.ru/images/srpr/logo4w.png">Google</option>
<option value="http://yandex.st/www/1.645/yaru/i/logo.png">Yandex</option>
<option value="http://limg.imgsmail.ru/s/images/logo/logo.v2.png">Mail</option>
</select><br />
<img src="" name="image-swap" />
JavaScript :
function setImage(select){
var image = document.getElementsByName("image-swap")[0];
image.src = select.options[select.selectedIndex].value;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
