SprintDevelop.com - Diseño y desarrollo web - Diseño, desarrollo web,Aplicaciones Móviles, TabletasSprintDevelop.com - Diseño y desarrollo web
Mostrando Codigo - Css
Code

Css - Efecto roll over de imagen en campo de texto

Códigos Css

Este script consigue en un campo de texto cambie la imagen de fondo al pasar el mouse por encima.
Visitas: 27,207 - 09/10/2003 2.41.29
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
EXPLICACION
Debemos modificar las 2 urls que apuntan hacia las imagenes, ademas de color: para especificar el color de la fuente o letras. Al insertar imagenes transparentes el fondo del area de texto aparecerá en negro, como aparece en el ejemplo, por lo que no recomendamos insertar imagenes transparentes
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


/* Codigo ofrecido por Tutores.org */

  1. <head>
  2. <style>
  3. textarea.imagen1{
  4. background-color:000000;
  5. background-image:url(/images/mundo.gif);
  6. color:00ff00;
  7. }
  8. textarea.imagen2{
  9. background-color:000000;
  10. background-image:url(/images/mundo2.gif);
  11. color:ff0000;
  12. }
  13. </style>
  14.  
  15. </head>
  16.  
  17. <textarea
  18.  rows="10" cols="60"
  19.  class="imagen1"
  20.  onMouseOver="this.className='imagen2'"
  21.  onMouseOut="this.className='imagen1'"></textarea>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Efecto roll over de imagen en campo de texto " href="http://www.tutores.org/codigo/674/" target="_blank">Efecto roll over de imagen en campo de texto </a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Aun no existe ningun comentario para este Codigo.
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.