个人中心
gpt4 book ai didi

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

转载 作者：可可西里 更新时间：2023-11-01 13:46:30 27 4
gpt4 key购买 nike

我正在完成一项任务，即根据选择的组合框元素名称更改图像。我的任务如下:

在这张图片中，我制作了一个组合框，其中的元素名称为 photo1、photo2 和 photo3。

所以我的问题是，在根据所选元素图像选择组合框所选元素后，将自动更改并替换心形图像。因此，对于这项任务，我使用了 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,
    			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>

所以这是我的代码，我只是想根据组合框调用动态图像，选择的元素名称在 Windows 加载中更改，我从图像通过 JavaScript 调用的地方发表评论

最佳答案

如果要根据选择框的选择选项改变图片路径，

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 - 使用 javascript 根据选定的组合框动态更改图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41801872/

27 4 0
文章推荐： php - 我可以使用任何 Django 风格的 PHP 框架吗？
文章推荐： c++ - 向后搜索时 libvlc_media_player_set_position 失败
文章推荐： php - 如何防止 HTTP 欺骗？
文章推荐： java - Spring 安全 java.lang.IllegalArgumentException : Non-hex character in input
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com