Question

我正在完成一项任务，即根据选择组合框项目名称更改图像。我的任务看起来像：

在这张照片中，我制作了一个组合框，其中的项目名称如photo1，photo2和photo3。

所以我的问题是，根据所选项目选择组合框所选项目后，图像将自动更改并替换心脏图像。因此，对于此任务，我使用了html页面和一个外部JavaSCript。

在html页面中描述了整个UI，而在外部JavaScript中描述了其他功能。

上面显示了html页面代码，即

＆＃13;

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);	
        };

＆＃13;

<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>

＆＃13;

所以这是我的代码，只是我想调用动态图像，因为组合框选择的项目名称在Windows加载中被更改，我从JavaScript调用图像的位置发表评论

Answer 1

如果要根据选择框的选定选项更改图像路径，

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;
}

使用javascript根据选定的组合框动态更改图像

1 个答案: