使用 JavaScript 更改图像源

发布于 2024-12-03 13:46:42 字数 814 浏览 1 评论 0原文

所以我是 JavaScript 新手（这实际上是我第一次尝试让某些东西发挥作用）并且我遇到了一些麻烦。我以为我有足够的知识来完成这项工作，我什至在谷歌上搜索了可以帮助我解决这个问题的教程和脚本，但没有任何真正的帮助。

我似乎无法更改图像源，这是我到目前为止所拥有的代码：

    function changeImage(a) {
        document.getElementById("img").src=a.src;
    }

    <div id="main_img">
        <img id="img" src="1772031_29_b.jpg">
    </div>
    <div id="thumb_img">
        <img src='1772031_29_t.jpg'  onclick='changeImage("1772031_29_b.jpg");'>
        <img src='1772031_55_t.jpg'  onclick='changeImage("1772031_55_b.jpg");'>
        <img src='1772031_53_t.jpg'  onclick='changeImage("1772031_53_b.jpg");'>
    </div>

如果我做错了什么，有人可以解释一下吗？或者也许我错过了什么？请帮助我:-)

原文

So I'm new with JavaScript (this is actually my first attempt to make something work) and I'm having a bit of trouble. I thought I had enough knowledge to make this work, I've even googled for tutorials and scripts that could help me work this out but nothing really helped.

I can't seem to change the image source, heres the code that I have so far:

    function changeImage(a) {
        document.getElementById("img").src=a.src;
    }

    <div id="main_img">
        <img id="img" src="1772031_29_b.jpg">
    </div>
    <div id="thumb_img">
        <img src='1772031_29_t.jpg'  onclick='changeImage("1772031_29_b.jpg");'>
        <img src='1772031_55_t.jpg'  onclick='changeImage("1772031_55_b.jpg");'>
        <img src='1772031_53_t.jpg'  onclick='changeImage("1772031_53_b.jpg");'>
    </div>

Could anyone please explain if I'm doing something wrong? Or maybe I'm missing something? Help me please :-)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陌伤ぢ 2024-12-10 13:46:42

function changeImage(a) 所以不存在 a.src =>;只需使用a。

演示此处

回复收藏 0 原文

苏佲洛 2024-12-10 13:46:42

如果您始终将模式放在 _b 而不是 _t 上，您可以通过传递对图像本身的引用来使其更通用：

onclick='changeImage(this);'

然后在函数中：

function changeImage(img) {
    document.getElementById("img").src = img.src.replace("_t", "_b");
}

If you will always have the pattern on _b instead of _t you can make it more generic by passing reference to the image itself:

onclick='changeImage(this);'

Then in the function:

function changeImage(img) {
    document.getElementById("img").src = img.src.replace("_t", "_b");
}

回复收藏 0 原文

隔岸观火 2024-12-10 13:46:42

我也管这个问题。但是每次更改源（图像）时都通过图像的实例来解决它。

似乎只会调用一次 onload 。
但这样，您就可以随时更改图像。

function chageIcon(domImg,srcImage)
    {
        var img = new Image();
        img.onload = function()
        {
            // Load completed
            domImg.src = this.src;
        };
        img.src = srcImage;
    }

模式使用。

chageIcon(document.getElementById("img"),"newIcon.png");

I also tube that problem. But solve it by an instance of an image every time you change the source (image).

It seems that would be called onload only once.
But this way, you can change image whenever you want.

function chageIcon(domImg,srcImage)
    {
        var img = new Image();
        img.onload = function()
        {
            // Load completed
            domImg.src = this.src;
        };
        img.src = srcImage;
    }

Mode use.

chageIcon(document.getElementById("img"),"newIcon.png");

回复收藏 0 原文

梦中的蝴蝶 2024-12-10 13:46:42

您唯一真正的问题是您传递的是字符串，而不是具有 .src 属性的对象

一些建议：

使用自然可点击的元素触发器，例如
使用元素上的事件数据的 data- 前缀属性
在 DOM 准备就绪时使用后期绑定事件。

标记：

<div id="main_img">
  <img id="img" src="1772031_29_b.jpg">
</div>
<ul id="thumb_img">
  <li><button data-src='1772031_29_b.jpg'><img src='1772031_29_t.jpg' /></button></li>
  <li><button data-src='1772031_55_b.jpg'><img src='1772031_55_t.jpg' /></button></li>
  <li><button data-src='1772031_53_b.jpg'><img src='1772031_53_t.jpg' /></button></li>
</ul>

JavaScript：

如果您需要支持 IE 和其他旧版浏览器，请使用正确的 polyfill for Array.from

function clickedButton(btn, event) {
  document.getElementById('img').src = btn.getAttribute('data-src');
}

function bindClick(btn) {
  btn.addEventListener('click', clickedButton.bind(null,btn));
}

// Setup click handler(s) when content is loaded
document.addEventListener("DOMContentLoaded", function(){
  Array.from(document.querySelectorAll('#thumb_img > button'))
    .forEach(bindClick));
});

编辑：适用于现代浏览器的 Vanilla JS。

Your only real problem is you are passing a string, not an object with a .src property

Some suggestions:

Use a naturally clickable element trigger, such as <button>
Use data- prefixed attributes for event data on the element
Use late bound events when the DOM is ready.

Markup:

<div id="main_img">
  <img id="img" src="1772031_29_b.jpg">
</div>
<ul id="thumb_img">
  <li><button data-src='1772031_29_b.jpg'><img src='1772031_29_t.jpg' /></button></li>
  <li><button data-src='1772031_55_b.jpg'><img src='1772031_55_t.jpg' /></button></li>
  <li><button data-src='1772031_53_b.jpg'><img src='1772031_53_t.jpg' /></button></li>
</ul>

JavaScript:

If you need to support IE and other legacy browsers, Use a proper polyfill for Array.from

function clickedButton(btn, event) {
  document.getElementById('img').src = btn.getAttribute('data-src');
}

function bindClick(btn) {
  btn.addEventListener('click', clickedButton.bind(null,btn));
}

// Setup click handler(s) when content is loaded
document.addEventListener("DOMContentLoaded", function(){
  Array.from(document.querySelectorAll('#thumb_img > button'))
    .forEach(bindClick));
});

Edit: Vanilla JS for modern browsers.

回复收藏 0 原文

失去的东西太少 2024-12-10 13:46:42

您已经进行了一些更改（假设您确实仍然想要更改 ID 为 IMG 的图像，如果不使用 Shadow Wizard 的解决方案）。

删除 a.src 并替换为 a：

<script type="text/javascript">
function changeImage(a) {
    document.getElementById("img").src=a;
}
</script>

更改 onclick 属性以包含新图像源的字符串而不是文字：

onclick='changeImage( "1772031_29_b.jpg" );'

You've got a few changes (this assumes you indeed still want to change the image with an ID of IMG, if not use Shadow Wizard's solution).

Remove a.src and replace with a:

<script type="text/javascript">
function changeImage(a) {
    document.getElementById("img").src=a;
}
</script>

Change your onclick attributes to include a string of the new image source instead of a literal:

onclick='changeImage( "1772031_29_b.jpg" );'

回复收藏 0 原文

鲜血染红嫁衣 2024-12-10 13:46:42

问题是您在不需要它的情况下使用了 .src 并且
您还需要区分要更改的 img。

function changeImage(a, imgid) {
    document.getElementById(imgid).src=a;
}

<div id="main_img">
    <img id="img" src="1772031_29_b.jpg">
</div>
<div id="thumb_img">
    <img id="1" src='1772031_29_t.jpg'  onclick='changeImage("1772031_29_b.jpg", "1");'>
    <img id="2" src='1772031_55_t.jpg'  onclick='changeImage("1772031_55_b.jpg", "2");'>
    <img id="3" src='1772031_53_t.jpg'  onclick='changeImage("1772031_53_b.jpg", "3");'>
</div>

The problem was that you were using .src without needing it and
you also needed to differentiate which img you wanted to change.

function changeImage(a, imgid) {
    document.getElementById(imgid).src=a;
}

<div id="main_img">
    <img id="img" src="1772031_29_b.jpg">
</div>
<div id="thumb_img">
    <img id="1" src='1772031_29_t.jpg'  onclick='changeImage("1772031_29_b.jpg", "1");'>
    <img id="2" src='1772031_55_t.jpg'  onclick='changeImage("1772031_55_b.jpg", "2");'>
    <img id="3" src='1772031_53_t.jpg'  onclick='changeImage("1772031_53_b.jpg", "3");'>
</div>

回复收藏 0 原文

夏至、离别 2024-12-10 13:46:42

以下示例程序用于每 100 毫秒更改一次图像 src 属性。您可以根据需要调用给定的函数。

<html>
<head>
</head>
<body>
<img src="bulboff.jpg" height=200 width=200 id="imm" align="right">

<script type="text/javascript">

function bulb() {

var b = document.getElementById("imm");

if(b.src.match("bulboff.jpg")) {
 b.src = "bulbon.jpg";
}
 else {

 b.src="bulboff.jpg";
}
}
 setInterval(bulb,100);
</script>
</body>
</html>

The Following Example Program used to change the image src attribute for every 100 milliseconds. you may call the given function as your wish.

<html>
<head>
</head>
<body>
<img src="bulboff.jpg" height=200 width=200 id="imm" align="right">

<script type="text/javascript">

function bulb() {

var b = document.getElementById("imm");

if(b.src.match("bulboff.jpg")) {
 b.src = "bulbon.jpg";
}
 else {

 b.src="bulboff.jpg";
}
}
 setInterval(bulb,100);
</script>
</body>
</html>

回复收藏 0 原文

蒗幽 2024-12-10 13:46:42

不要写这个，而是

<script type="text/javascript">
function changeImage(a) {
    document.getElementById("img").src=a.src;
}
</script>

尝试：

<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>

Instead of writing this,

<script type="text/javascript">
function changeImage(a) {
    document.getElementById("img").src=a.src;
}
</script>

try:

<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>

回复收藏 0 原文

老街孤人 2024-12-10 13:46:42

我知道这个问题很旧，但是对于新问题，您可以执行以下操作：

HTML

<img id="demo" src="myImage.png">

<button onclick="myFunction()">Click Me!</button>

JAVASCRIPT

function myFunction() {
document.getElementById('demo').src = "myImage.png";
}

I know this question is old, but for the one's what are new, here is what you can do:

HTML

<img id="demo" src="myImage.png">

<button onclick="myFunction()">Click Me!</button>

JAVASCRIPT

function myFunction() {
document.getElementById('demo').src = "myImage.png";
}

回复收藏 0 原文

强者自强 2024-12-10 13:46:42

 <script type="text/javascript">
        function changeImage(a) {
    var picName=a.substring(1,a.length-1);
            document.getElementById("image").src=picName;
        }
 </script>

 <div id="main_img">
     <img id="image" src="app.jpg">
 </div>

 <div id="thumb_img">
     <img src='app.jpg'  onclick="changeImage('+5steps.jpg+');">
     <img src='5steps.jpg'  onclick="changeImage('+award.png+');">
     <img src='award.png'  onclick="changeImage('+app.jpg+');">
 </div>

使用上面的代码，将此html文件和图片（注意命名，因为我已经用我的图片名称给出了上面的代码）在同一个文件夹中
你会得到...

 <script type="text/javascript">
        function changeImage(a) {
    var picName=a.substring(1,a.length-1);
            document.getElementById("image").src=picName;
        }
 </script>

 <div id="main_img">
     <img id="image" src="app.jpg">
 </div>

 <div id="thumb_img">
     <img src='app.jpg'  onclick="changeImage('+5steps.jpg+');">
     <img src='5steps.jpg'  onclick="changeImage('+award.png+');">
     <img src='award.png'  onclick="changeImage('+app.jpg+');">
 </div>

Use the above code by placing this html file and pics(take care in namings, beacause I have given the above code with my pic names) in same folder
you will get...

回复收藏 0 原文

小糖芽 2024-12-10 13:46:42

试试这个！

function changeimage() {
    var image = document.getElementById('imagem');
    if (image.src.match("img")) {
        for(i = 1; i <= 3; i++) {
            image.src = "img/image2"+i+".png";
        }
    } else {
        image.src = "img/image1.png";
    }
}

Try this!

function changeimage() {
    var image = document.getElementById('imagem');
    if (image.src.match("img")) {
        for(i = 1; i <= 3; i++) {
            image.src = "img/image2"+i+".png";
        }
    } else {
        image.src = "img/image1.png";
    }
}

回复收藏 0 原文

伊面 2024-12-10 13:46:42

首先我们显示这个 image1：

<input id="img_prod" type="image" src="img/image1.png" height="400" width="400"
                            onclick ="location.href=this.src">

onclick 全屏显示图像

，我们有其他 image2

<input type="image" src="img/image2.png" height="75" width="75"
                 onclick="document.getElementById('img_prod').src = this.src;">

onclick 我们用 image2 替换 image1

first we have this image1 displayed:

<input id="img_prod" type="image" src="img/image1.png" height="400" width="400"
                            onclick ="location.href=this.src">

onclick to display the image full screen

and we have other image2

<input type="image" src="img/image2.png" height="75" width="75"
                 onclick="document.getElementById('img_prod').src = this.src;">

onclick we replace image1 by image2

回复收藏 0 原文

~没有更多了~

关于作者

梦途

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

使用 JavaScript 更改图像源

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（12）

关于作者

相关话题

热门标签

推荐作者

missyouangeled

三生一梦

压抑⊿情绪

天涯离梦残月幽梦

指尖微凉心微凉

☆獨立☆

友情链接

使用 JavaScript 更改图像源

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（12）

关于作者

相关话题

热门标签

推荐作者

missyouangeled

三生一梦

压抑⊿情绪

天涯离梦残月幽梦

指尖微凉心微凉

☆獨立☆

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。