tengo una sección de imagen donde al hacer clic quiero cambiarla durante unos segundos y volver a la imagen original después de unos segundos, hice el siguiente código:
<img src="contacticons.jpg" usemap="#image-map" id="imgName"> <a onclick="document.getElementById('imgName').src='../newImgSrc.jpg';"></a>¿alguien puede decirme cómo cambiarlo durante unos segundos y devolverlo a la imagen original? Gracias de antemano.
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>No es necesario usar id, solo llame a una función usando el evento 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" />