doukong1897 2019-04-29 10:08
浏览 72
已采纳

选择图像源

Hello is search to change one preview image by select I wrote this but there is a problem ... When I change the selection the image remains the same.

<script type="text/javascript">
function numeroImage() {
  var pays = document.getElementById('idSelect').value;
  document.getElementById('image').value=pays;
  document.getElementById('imagePreview').src="flags/Flag_"+pays+".png";
}
</script>

</head>

<body>

<select id="idSelect" onchange="numeroImage()">
    <option value="france">France</option>
    <option value="belgique">Belgique</option>
    <option value="suisse">Suisse</option>
    <option value="allemagne">Allemagne</option>
</select>

<br/>
<br/>

<div id="preview">
    <img height="75" weidth="100" src="flags/Flag_france.png" id="imagePreview">
</div>


</body>

  • 写回答

2条回答 默认 最新

  • dsfdsfdsfdsf1223 2019-04-29 10:19
    关注

    Try this Jquery code:

    <html>
    <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <select id="idSelect">
            <option value="france">France</option>
            <option value="belgique">Belgique</option>
            <option value="suisse">Suisse</option>
            <option value="allemagne">Allemagne</option>
        </select>
        <br/>
        <br/>
        <div id="preview">
            <img height="75" weidth="100" src="flags/Flag_france.png" id="imagePreview">
        </div>
        <script type="text/javascript">
            $(document).ready(function($){
                $(document).on("change","#idSelect",function(){
                    var image = $(this).val();
                    var image_path ="flags/Flag_"+image+".png";
                    $("#imagePreview").attr("src",image_path);
                });
            });
        </script>
    </body>
</html>

    Try this javascript code :

    <html>
    <head>
        <script type="text/javascript">
            function numeroImage() {
              var pays = document.getElementById('idSelect').value;
              document.getElementById('imagePreview').src="flags/Flag_"+pays+".png";;
            }
        </script>
    </head>
    <body>
        <select id="idSelect" onchange="numeroImage()">
            <option value="france">France</option>
            <option value="belgique">Belgique</option>
            <option value="suisse">Suisse</option>
            <option value="allemagne">Allemagne</option>
        </select>
        <br/>
        <br/>
        <div id="preview">
            <img height="75" weidth="100" src="flags/Flag_france.png" id="imagePreview">
        </div>
    </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • 选择图像源 html javascript php
    2019-04-29 10:08
    回答 2 已采纳 Try this Jquery code: <html> <head> <script src="https://ajax.google
  • django-ckeditor富文本 6.5.1版本,前端浏览器 图像没有 上传选项 django python 前端
    2022-11-10 11:58
    回答 2 已采纳 首先说明，ckeditor是有上传功能的，只是隐藏了，需要通过配置让它显示 找到ckeditor/plugins/image/dialogs/image.js文件，搜索 id:"Upload" 把后面
  • 前端如何在网页上显示图像 javascript
    2022-04-24 15:30
    回答 1 已采纳 精灵图，又称雪碧图
  • 图像识别软件 gImageReader源代码.zip
    2021-08-23 16:47
    gImageReader 是一个简单的 Gtk/Qt 前端图像识别软件源码，基于QT C++ 特点： - 从磁盘、扫描设备、剪贴板和屏幕截图导入 PDF 文档和图像 - 一次性处理多个图像和文档 - 手动或自动识别区域定义 - 识别纯文本或 ...
  • 图像超分的GAN网络 图像处理
    2023-04-14 16:45
    回答 1 已采纳 增强型深度残差网络用于单图像超分辨率 (EDSR)进步式增长的GAN网络以提高质量、稳定性和变化性 (ProGAN)带条件的GAN网络用于高分辨率图像合成和语义操作 (BigGAN)高保真度生成式图片
  • 图像处理python opencv python 图像处理
    2022-06-29 14:08
    回答 4 已采纳 比想象中的复杂啊，先凑合出来第一题了，结果是这样的：
  • MATLAB图像处理 matlab 图像处理 学习方法
    2023-04-11 16:28
    回答 1 已采纳 该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：MATLAB中可以通过以下步骤识别彩图中的色条，并根据色条颜色定义阈值，提取图片中相对应的颜色区域，并提取该区域中的轮廓： 读入彩色
  • 小波变换边缘检测源程序
    2022-04-01 13:27
    小波变换边缘检测源程序。具体结果见：https://blog.csdn.net/m0_68894275/article/details/123895282
  • MATLAB进行图像处理 matlab 图像处理 学习方法
    2023-04-11 10:52
    回答 2 已采纳 以下内容部分参考ChatGPT模型： 首先，需要将彩图和颜色条图像读入MATLAB中。可以使用imread函数读入图像。 然后，需要确定想要提取的颜色在颜色条的数值范围。可以使用imcrop函数裁剪
  • python opencv进行图像处理 opencv python 图像处理
    2022-07-17 21:00
    回答 2 已采纳 搜侵蚀和膨胀，这是opencv的基本功，网上资料数不胜数。
  • CMOS图像采集模块
    2020-11-12 23:44
    视频源信号来自于一个高度集成的CMOS数字图像传感器模块MB86S02，它是富士通的产品。它不但集成了CMOS图像传感器 阵列、自动增益信号放大器、模数转换器，还包括了色彩信号处理和微型镜头，包含了图像采集的所有前端...
  • C#蝴蝶效应动画的实现及源代码
    2021-03-16 02:07
    内容索引:C#源码,图形图像,蝴蝶效应　C#蝴蝶效应动画的实现及源代码，一个在屏幕出现启动翅膀会飞的蝴蝶，动画效果，效果图如上，可以设置飞行速度、是否跟随鼠标、是否显示在屏幕最前端，打开程序后在系统托盘处...
  • 前端面试八股文（超详细）
    2022-03-06 17:42
    小泽今天早睡的博客 而浏览器缓存则主要由前端开发在前端js上进行设置。 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，...
  • 基于Zynq的智能相机前端系统的研究
    2022-04-30 14:10
    重点研究了基于Zynq平台智能相机的前端图像采集系统,探讨了CCD片内数据流传输 模型、图像采集系统电路、CCD驱动逻辑IP核、图像采集模式、CCD性能参数评估等 关键技术及其实现方法，主要工作包括: 在深入分析Zynq平台...
  • 没有解决我的问题, 去提问

悬赏问题

  • ¥15 公交车和无人机协同运输
  • ¥15 stm32代码移植没反应
  • ¥15 matlab基于pde算法图像修复，为什么只能对示例图像有效
  • ¥100 连续两帧图像高速减法
  • ¥15 组策略中的计算机配置策略无法下发
  • ¥15 如何绘制动力学系统的相图
  • ¥15 对接wps接口实现获取元数据
  • ¥20 给自己本科IT专业毕业的妹m找个实习工作
  • ¥15 用友U8：向一个无法连接的网络尝试了一个套接字操作，如何解决？
  • ¥30 我的代码按理说完成了模型的搭建、训练、验证测试等工作(标签-网络|关键词-变化检测)