使用javascript根据所选组合框动态显示图像

我正在执行一项任务，即根据选择组合框项目名称更改图像。我的任务是这样的：使用javascript根据所选组合框动态显示图像

在这张照片我一直在有项目名称，比如照片1，照片2和照片3制成一个组合框。

所以我的问题是，选择组合框后选择的项目根据选定的项目图像将自动改变，并取代心脏图像。所以对于这个任务我已经使用了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调用图像的位置

来源

2017-01-23 s.k.Soni

凡在你的代码发布默认心脏图像？ –

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

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

来源

2017-01-23 08:39:00 TharinduLucky

太好了。但TharinduLucky当我做同样的代码。它显示警报中的路径，但不显示图像div中的图像。函数setImage（select）{image012} var image = document.getElementById（“container”）; image.src = select.options [select.selectedIndex] .value; alert（image.src）; } –

谢谢TharinduLucky。这是工作。但之后，它又来了一个错误，那就是图像即将到来，但它并没有取代相同的图像，它创造了新的div并在其中显示。 –

为了让你的生活更轻松，我把它放在这个片段中。http://js.do/code/selectbox-image我没有看到它创建任何div – TharinduLucky

使用javascript根据所选组合框动态显示图像

回答

相关问题