al pasar el raton por un texto que aparezca una imagen al lado

eddrishh · #1 (**permalink**) 28/01/2012, 14:08

Hola a todos...

Me estoy volviendo loco intentando encontrar un codigo lo más sencillo posible para poder hacer que:
cuando paso el mouse por encima de una palabra determinada de un texto (no es un link, es solo una palabra determinada) aparezca una imagen al lado pequeñita y al quitar el mouse del texto la imagen desaparezca...

Parece muy fácil? pues no he encontrado nada que me funcione...

Se muy poco de html y de css, agradezco las respuestas como para poder agregarlo en mi web de Reiki sin volverme muy loco...

Lo dejo en vuestras expertas manos llevo dos días y me va a explotar la cabeza...
Que mala es la ignorancia...!

Muchas gracias de antemano.

Edd.

leonagelic · #2 (**permalink**) 28/01/2012, 15:21

Vere si esto es lo que necesitas:

http://www.forosdelweb.com/f13/menu-...imagen-332801/

johan_andree · #3 (**permalink**) 28/01/2012, 16:52

muy facil pero tbn necesitas aplicar un poco de javascrpit y tbn css

te mando un codigo en los rtres espero los comprendas

primero el html

<!DOCTYPE html>
<html lang='es'>
<head>
<title>Toyota vs Nissan</title>
<meta charset='utf-8'>
<link href='estilos/base.css' rel='stylesheet'>
<script src='js/jquery.tools.min.js'></script>
<script src ='js/dialogos.js'></script>
</head>
<body>
<div>
<p>
<img id='motor' src='imagenes/toyota.jpg' alt='toyota motors' title='motores'>
<img id='auto' src='imagenes/nissan.jpg' alt='nissan' title='autos'>
</p>
</div>
</body>
</html>

ahora el css

body, div, p, img {margin:0; padding:0;}

div {
width:600px;
margin:200px auto;
}

.tooltip{
background-image:url('../imagenes/cuadro.jpg');
background-repeat:no-repeat;
height:100px;
width:200px;
margin-top:-100px;
margin-left:-180px;
padding:26px;
padding-left:40px;
font-size:25px;
color:#FFFFFF;
font-family:sans-serif;
}

y por ultimo el java

$(function(){
$('#motor[title]').tooltip({
position:'center right'
});
});

$(function(){
$('#auto[title]').tooltip({
position:'center right'
});
});

bueno tiene

s que hacerlos en archivos aparte ok espero te sirva de guia

eddrishh · #4 (**permalink**) 06/02/2012, 14:50

Hola a los dos y gracias por vuestras respuestas.
Perdonar la tardanza pero he tenido algunos problemas en el trabajo que me han obligado a dejar todo a medias...

Lo que estoy necesitando es otra cosa, me cuesta un poco explicarme,

Me gustaría que al pasar el ratón por encima de un texto, mas concretamente de una palabra dentro de un texto, ( no por encima de un link ni tampoco por encima de una imagen) aparezca una imagen pequeña un poco más arriba y a la derecha del propio texto, como por encima.

johan_andree muchas gracias por el código!
Una cosa, como no controlo mucho de CSS ni de javascript, sería posible poner el CSS y el javascript dentro del código del HTML?
Me volvería menos loco para poder hacerlo funcionar...! soy un poco novato, por no decir muy novato

Muchas gracias! a ver si lo consigo con vuestra ayuda

Edd.