Foros del Web » Creando para Internet » HTML »

efecto rollover / revolver onmouseover con palabras

Estas en el tema de efecto rollover / revolver onmouseover con palabras en el foro de HTML en Foros del Web. Hola, estoy creando un blog y necesito crear dicho efecto, muy conocido con imágenes pero no lo eh podido hallar con palabras. y también uno ...
  #1 (permalink)  
Antiguo 03/08/2010, 05:46
 
Fecha de Ingreso: febrero-2008
Mensajes: 11
Antigüedad: 9 años, 9 meses
Puntos: 0
efecto rollover / revolver onmouseover con palabras

Hola, estoy creando un blog y necesito crear dicho efecto, muy conocido con imágenes pero no lo eh podido hallar con palabras.

y también uno semejante pero que aparezca una caja de texto tipo comentario sobre la palabra al pasar el puntero
  #2 (permalink)  
Antiguo 03/08/2010, 07:09
Avatar de iwexcoder  
Fecha de Ingreso: mayo-2009
Ubicación: San Carlos de Bariloche
Mensajes: 404
Antigüedad: 8 años, 6 meses
Puntos: 16
Respuesta: efecto rollover / revolver onmouseover con palabras

Estimado...la verdad la información que das para que te podamos ayudar es muy muy pobre..."efecto muy conocido con imágenes..."....pero no describes ni como es el efecto... tampoco somos adivinos....

...de todas formas...por mi experiencia y no por ser adivino, seguro estas buscando LightBox para las imagenes...

http://www.huddletogether.com/projects/lightbox2/


...la caja de texto tipo comentario se llama Tooltip...

http://blog.unijimpe.net/jquery-tooltip/


Tanto tooltip como lightbox son frameworks de Jquery(...otro framework de JavaScript)...si buscas por Google...encontraras muchos tipos de tooltips y de lightbox..

Saludos
__________________
iWexCoder.com - Programación - Desarrollo Movil - Programación Web www.iwexcoder.com
  #3 (permalink)  
Antiguo 03/08/2010, 12:04
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: efecto rollover / revolver onmouseover con palabras

eltras

Puedes usar el pseudoatributo "hover" que habitualmente usamos en los links, pero aplicarlo a, por ejmplo, un "span"

CSS
span.resaltar{
color: #000;
}

span.resaltar:hover{
color: red;
}


HTML
<span class="resaltar">Esto esta en negro y cambia a rojo al pasar el mouse encima</span>

y no solo el color, puedes cambiar otras propiedades


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 03/08/2010, 14:50
 
Fecha de Ingreso: febrero-2008
Mensajes: 11
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: efecto rollover / revolver onmouseover con palabras

gracias por responder, encontre este codigo:
<a href="link" title="texto de la caja de texto">textovisible</a>

lo cambie al siguiente, y cumple con el tooptip:
<a title="texto de la caja de texto">textovisible</a>

pero al publicarlo se transforma a:
<a href="http://www.blogger.com/post-edit.g?blogID=3944315264782830524&amp;postID=42163 83684163913947" title="texto de la caja de texto">texto visible</a>

que puedo hacer para que no se transforme?

y aclaro la otra pregunta por si me pueden ayudar.
Tengo una palabra y al pasar el mouse sobre ella quiero que cambie a otra palabra predefinida y que al quitarlo sea nuevamente la misma.

gracias. saludos.
  #5 (permalink)  
Antiguo 03/08/2010, 15:15
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: efecto rollover / revolver onmouseover con palabras

eltras:

tienes algunos conceptos equivocados
si bien el atributo "title" hace las veces de tooltip, es muy limitado

un tootip básico (hay otros mejores, este es para aplicar a un link) hecho con CSS sería

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>ToolTip</title>
  6.  
  7. <style type="text/css">
  8.  
  9. * {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
  10. a:hover {background:#ffffff; text-decoration:none;} /*bg color necesario paraIE6*/
  11. a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
  12. a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;}
  13.  
  14. </head>
  15. <a href="#" class="tooltip">Texto Link<span><b>Esto</b>es un tooltip<br /><img src="http://www.w3schools.com/images/compatible_ie.gif" alt="" width="30" height="30" /></span></a>.
  16. </body>
  17. </html>

Si quieres cambiar
<a href="link" title="texto de la caja de texto">textovisible</a>
y que no conduza a nada, hazlo por
<a href="#" title="texto de la caja de texto">textovisible</a>
ó simplemente a un marcador
<a name="link" title="texto de la caja de texto">textovisible</a>

Además title es un atributo comun a numerosos tags html.

En cuanto a la transformación, supongo que te la hace el blogger. Tendráis que ver cual es el método para craer código desde el blogger.

Empieza por un manual de HTML y Css básicos

http://www.librosweb.es/

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 03/08/2010, 18:13
 
Fecha de Ingreso: febrero-2008
Mensajes: 11
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: efecto rollover / revolver onmouseover con palabras

gracias, practicare un poco.

saludos

Etiquetas: efecto, onmouseover, palabras, rollover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:41.