用 Javascript 替换图像和图像标题/替代文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12003292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replace image and image title/alt text with Javascript
提问by ChrisBratherton
I currently have the following code that replaces a big image when a thumbnail is clicked:
我目前有以下代码，可在单击缩略图时替换大图像：
Javascript:
Javascript：
img1 = new Image();
img1.src = '{$smarty.const.dir_images}/l_{$this_page.image1}';
img2 = new Image();
img2.src = '{$smarty.const.dir_images}/l_{$this_page.image2}';
Thumbnail HTML:
缩略图 HTML：
<a href="javascript:document['mainimage'].src = img1.src; javascript:void(0);"><img src="{$smarty.const.dir_images}/t_{$this_page.image1}" title="" alt=""/></a>
<a href="javascript:document['mainimage'].src = img2.src; javascript:void(0);"><img src="{$smarty.const.dir_images}/t_{$this_page.image2}" title="" alt=""/></a>
Large Image HTML:
大图像 HTML：
<img id="mainimage" name="mainimage" src="{$smarty.const.dir_images}/l_{$this_page.image1}" title="{$this_page.image1text}" alt="{$this_page.image1text}" />
What I want to do is not only change the large image source when the thumbnail is clicked but the alt & title tags as well.
我想要做的不仅是在单击缩略图时更改大图像源，而且还更改 alt 和标题标签。
Thanks in advance
提前致谢
回答by khomyakoshka
Try to use this way:
尝试使用这种方式：
JavaScript
JavaScript
img1.alt="Image alt";
img1.title="Image title";
Thumbnail HTML:
缩略图 HTML：
<a href="javascript:document['mainimage'].src = img1.src;document['mainimage'].alt = img1.alt; document['mainimage'].title = img1.title; javascript:void(0);"><img src="{$smarty.const.dir_images}/t_{$this_page.image1}" title="" alt=""/></a>
回答by grunk
Use setAttribute :
使用 setAttribute ：
document.getElementById("mainimage").setAttribute("alt", "My new Alt");
回答by Om3ga
You mean this (jQuery way)
你的意思是这个（jQuery方式）
img1.attr('alt','this is alt');
img1.attr('title', 'this is title');
回答by hsgu
with out jquery you can replace element by remove it from parent then add the new element
没有jquery，您可以通过从父级中删除元素来替换元素，然后添加新元素
<script type="text/javascript">
function replaceImage(img , num){
var parentNode = img.parentNode;
parentNode.removeChild(img);
parentNode.innerHTML += '<img id="mainimage" name="mainimage" src="{$smarty.const.dir_images}/l_{$this_page.image' + num + '}" title="{$this_page.image' + num + 'text}" alt="{$this_page.image' + num + 'text}" />'
}
</script>
<img src="{$smarty.const.dir_images}/t_{$this_page.image1}" title="" alt="" onclick="replaceImage(this ,1)"/>
<img src="{$smarty.const.dir_images}/t_{$this_page.image2}" title="" alt="" onclick="replaceImage(this ,2)"/>
