3
コンボボックスのアイテム名を選択して1つのタスク、つまりイメージを変更しています。私のタスクは次のようになります。javascriptを使用して、選択したコンボボックスに従って動的にイメージを変更します。
この絵で
私は写真1、写真2と写真3のようなその持つ項目名で1つのコンボボックスを作ってきました。
私の質問は、選択した後、選択したアイテムイメージに従ってコンボボックスを選択すると自動的に変更され、ハートイメージが置き換えられます。このため、このページではhtmlページと外部JavaScriptを使用しました。
HTMLページではUI全体が説明されていますが、外部JavaScriptでは他の機能が記述されています。
上記はhtmlページのコードを表示します。つまり、
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,
\t \t \t draggable: true
});
// add the shape to the layer
layer.add(image);
// add the layer to the stage
stage.add(layer);
\t
\t image.on("mouseover", function(){
var imagelayer = this.getLayer();
document.body.style.cursor = "move";
this.setStrokeWidth(1);
this.setStroke("#000000");
\t layer.draw();
\t writeMessage(messageLayer, "Drag Image Into Position Double Click To Remove");
});
var messageLayer = new Kinetic.Layer();
\t \t 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); \t
};<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>だからここに私のコードがあると私はコンボボックス選択した項目名が変更されるごとに、コールに動的なイメージをしたいですJavaScriptが画像を呼び出している場所からのコメントがあるウィンドウの読み込み
あなたの投稿をコードでデフォルトのハートイメージ？ –