Seguro que ha visto este efecto en muchas ocasiones y la verdad es que es muy sencillo y además hay varias formas de hacerlo, a más habitual o a menos a más casualidad en cuanto al código, que hay es tambien que usas fondo de algun elemento, por ejemplo un div, y le pones a otra imagen de fondo cuando se le pasa el raton.
Cree un div con el id, por ejemplo, image-cambiante y el siguiente CSS está listo.
Probando cambiar todas las imágenes de una página web
Así que si una página tiene una vulnerabilidad XSS podemos pegar este código entre las etiquetas y listo. Pero no haremos eso porque qué pereza buscar una web con XSS
Si queremos divertirnos o sorprender a cineva, abriendo la consola y pegamos el código. Por ejemplo, encontraste el tuyo en Facebook, pero funciona en cualquier página.
Atributo src, la ruta de la imagen
Indica la ruta del archivo. Y el archivo de imágenes está en una sola carpeta, que en la página web está escrita como en el ejemplo, pero aunque esté en otra carpeta, la ruta podría ser así:
en la dirección completa:
Reemplazar una imagen con replaceWith()
Este ejemplo consta de una imagen y un botón. Al pulsar el botón, la imagen será reemplazada por otra. Usaré 2 imágenes llamadas red.jpeg y blue.jpeg que fueron extraídas de la página de Pexels de los usuarios Achillas y Pixabay.
Ahora usa el código jQuery para cambiar las imágenes, donde se usa el método replaceWith() para presionar el botón «boton-cambio».
¿Cómo se definen las dimensiones máximas de las imágenes?
Por alt lado, también puedes definir el tamaño máximo de las imágenes. Puede hacerlo usando la propiedad CSS: max-width y max-height. Un ejemplo sería el siguiente:
Esto permite miniaturas menores a 500px sin escalar. Es decir, definirá como máximo 500 píxeles. Y a la altura se definirá automáticamente en función de la relación de aspecto de la imagen.
