我有一個影像部分,onclick 我想將其更改幾秒鐘并在幾秒鐘后將其恢復為原始影像,我執行了以下代碼:
<img src="contacticons.jpg" usemap="#image-map" id="imgName">
<a onclick="document.getElementById('imgName').src='../newImgSrc.jpg';"></a>
誰能告訴我如何將它更改幾秒鐘并將其恢復為原始影像,在此先感謝
uj5u.com熱心網友回復:
function ChangeImage()
{
var originalImage = $("#imgName").attr("src");
var changeImage = $("#imgName").data("changeimage");
$("#imgName").attr("src",changeImage);
setTimeout(function(){
$("#imgName").attr("src",originalImage);
}, 1000);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://images.unsplash.com/photo-1498598457418-36ef20772bb9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" usemap="#image-map" id="imgName" height="50"
data-changeimage="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
<a onclick="ChangeImage()">change</a>
uj5u.com熱心網友回復:
無需使用 id,只需使用 onclick 事件呼叫函式即可。
function changeImg(objImg, newSrc) {
const originalSrc = objImg.getAttribute('src');
const originalSrcBase = objImg.getAttribute('data-original-src');
if (!originalSrcBase) {
objImg.setAttribute('data-original-src', originalSrc)
}
if (originalSrc !== originalSrcBase) {
return;
}
objImg.setAttribute('src', newSrc);
setTimeout(() => {
objImg.setAttribute('src', originalSrc);
},1000);
}
<img onclick="changeImg(this, 'https://nodejs.org/static/images/logo.svg');"
src="https://nodejs.org/static/images/openjs_foundation-logo.svg" />
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/497127.html
標籤:javascript html jQuery 图片 点击
