Han visto que hay imágenes que al poner el puntero del mouse sobre ellas cambian, como botones o logos, esto se realiza con un código básico para las imágenes en HTML, con el cual también podemos por ende mostrar dos imágenes diferentes. El código base es el siguiente:
----------------------------
<img src="URL Imagen que se visualiza" onmouseover="this.src='URL Imagen que cambia con Mouse';" onmouseout="this.src='URL Imagen que se visualiza';" />
----------------------------
Videotutorial del año 2012
También se puede hacer con imágenes comunes, y además podemos redireccionarlas; le voy a agregar de una vez el código para que se abra en otra pestaña o ventana, también podemos definir su tamaño con las etiquetas width="200" y height="200" opcional en caso de que las imágenes tengan diferentes medidas o sean muy grandes, ya que pueden dejar solo el width y los navegadores asumen automáticamente el height. El codigo quedaría así:
----------------------------
<a href="URL que redirecciona" target="_blank"><img src="URL Imagen que se visualiza" onmouseover="this.src='URL Imagen que cambia con Mouse';" onmouseout="this.src='URL Imagen que se visualiza';" width="200" height="200" /></a>
----------------------------
Como se pueden dar cuenta es un efecto muy básico que nos permitirá ahorrar espacio en la presentación de una entrada e innovar al mismo tiempo. Los íconos que están en la parte superior de Charkleons.con usan este efecto básico (Home, Menú, Radio Online, Redes sociales).
Espero que esta información les sea muy útil.
Gracias.
Cómo se hacen los íconos que cambian de color con el puntero del mouse, cómo se hacen las imágenes que cambian por otra cuando se tocan, cómo se hace para que haya dos imágenes en una, cómo se hacen los botones que cambian de color con el puntero del mouse,
No hay comentarios:
Publicar un comentario
Gracias por comentar.