efecto rollover / revolver onmouseover con palabras

eltras · #1 (**permalink**) 03/08/2010, 04:46

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

iwexcoder · #2 (**permalink**) 03/08/2010, 06:09

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

emprear · #3 (**permalink**) 03/08/2010, 11:04

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

eltras · #4 (**permalink**) 03/08/2010, 13:50

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&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.

emprear · #5 (**permalink**) 03/08/2010, 14:15

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ToolTip</title>
 
<style type="text/css">
 
* {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
a:hover {background:#ffffff; text-decoration:none;} /*bg color necesario paraIE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;}
</style>
 
</head>
<body>
<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>.
</body>
</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

eltras · #6 (**permalink**) 03/08/2010, 17:13

gracias, practicare un poco.

saludos