Estoy tratando de cambiar la imagen HTML src el uso de Javascript. Tengo dos imágenes Plus.gif y Menos.gif.He insertado HTML img etiqueta y han escrito una función de Javascript para cambiar la imagen src cuando se hace clic.

Problema es que quiero cambiar de nuevo cuando el usuario hace clic en la imagen.
Por ejemplo, cuando se carga la página el Plus.gif muestra y cuando el usuario hace clic en la imagen cambia a Minus.gif.

Quiero así, cuando la imagen es Minus.gif y usuario, mediante un clic, este debe ser cambiado a Plus.gif.

Aquí es mi función Javascript:

<script language="javascript" type="text/javascript">
  function chngimg() {
    var img = document.getElementById('imgplus').src; //= 'Images/Minus.gif';

    if (img) {
      document.getElementById('imgplus').src = 'Images/Minus.gif';
    } else if (!img) {
      document.getElementById('imgplus').src = 'Images/Plus.gif';
      alert(img);
    }

  }
</script>

De la etiqueta de imagen:

<img id="imgplus" alt="" src="Images/Plus.gif" onmouseover="this.style.cursor='pointer'" onclick="chngimg()"   />

OriginalEl autor user1583775 | 2012-09-01

3 Comentarios

  1. 9

    Ver los cambios que he realizado para hacer que funcione

    <script language="javascript" type="text/javascript">
        function chngimg() {
            var img = document.getElementById('imgplus').src;
            if (img.indexOf('Plus.gif')!=-1) {
                document.getElementById('imgplus').src  = 'Images/Minus.gif';
            }
             else {
               document.getElementById('imgplus').src = 'Images/Plus.gif';
           }
    
        }
    </script>
    
    <img id="imgplus" alt="" src="Images/Plus.gif" onmouseover="this.style.cursor='pointer'" onclick="chngimg()"   />

    Espero que se resuelva tu pregunta.

    Sí, Esta ES la cosa.kooool

    OriginalEl autor Sandeep

  2. 2

    Una forma sería la de añadir un alternar variable en la función:

    var toggle = false;
    function chngimg() {
        if (toggle === true) {
            document.getElementById('imgplus').src  = 'Images/Minus.gif';
        } else {
           document.getElementById('imgplus').src = 'Images/Plus.gif';
           alert(img); 
        }
        toggle = !toggle; 
    }

    Nota que es una mejor práctica usar un sprite para este tipo de cosas. Si estás usando dos imágenes, la experiencia de usuario va a ser torpe, porque la primera vez que haga clic en la imagen, habrá un ligero retraso, mientras que la segunda imagen se carga.

    Lo ideal sería tener las dos imágenes como una hoja de sprite, y usar JQuery. Entonces usted podría hacerlo así.

    HTML

    <img id="imgplus" src="Images/Sprite.gif" onclick="chngimg()" />

    CSS

    #imgplus .clicked { background-position: 0 -30px; }

    Javascript

    function chngimg() {
        $("#imgplus").toggleClass("clicked");
    }
    Idealmente, usted debe evitar el uso de la variable global toggle así que la solución es reutilizable.
    Así que Ahora Que Función tengo que usar chngimg() o cngimg() ??
    el mismo con el que está utilizando, que fue solo un error de tipeo.

    OriginalEl autor McGarnagle

  3. 1

    He utilizado con éxito esta solución general en puro JS para el problema de la alternancia de img url:

    function toggleImg() {
      let initialImg = document.getElementById("img-toggle").src;
      let srcTest = initialImg.includes('initial/img/url');
      let newImg = {
        'true':'second/img/url', 
        'false':'initial/img/url'}[srcTest];
    
      return newImg;
    }

    A continuación, llamar a toggleImg() dentro de cualquier controlador de eventos utiliza….

    someButton.addEventListener("click", function() {
      document.getElementById("img-toggle").src = toggleImg();
    }

    OriginalEl autor Wtait

Dejar respuesta

Please enter your comment!
Please enter your name here