Foros del Web » Creando para Internet » CSS »

Abrir imagen al pasar el mouse sobre un texto

Estas en el tema de Abrir imagen al pasar el mouse sobre un texto en el foro de CSS en Foros del Web. Buenas, como andan? estoy queriendo hacer algo que no estoy seguro si se puede con css. Quizás con java... La cuestión es la siguiente, es ...
  #1 (permalink)  
Antiguo 02/12/2010, 13:03
 
Fecha de Ingreso: diciembre-2008
Mensajes: 7
Antigüedad: 9 años
Puntos: 1
Abrir imagen al pasar el mouse sobre un texto

Buenas, como andan? estoy queriendo hacer algo que no estoy seguro si se puede con css. Quizás con java...

La cuestión es la siguiente, es un listado de empresas y links varios que a cada una le corresponde un logotipo o imagen. Mi idea es que al pasar con el mouse sobre el nombre, me abra dicha imagen. No es ni mouse over, ni como popup.

A ver, no se si confundo con lo que digo... pero seria al revés de un alt en una imagen.

Espero que puedan ayudarme. Gracias de antemano.

Andres.
  #2 (permalink)  
Antiguo 02/12/2010, 14:04
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Abrir imagen al pasar el mouse sobre un texto

me confundes dices que se habra la imagen cuando pases el mause sobre el nombre pero que no es el efecto hover entonces?

quieres que se abra en una nueva pagina en la misma pagina o como? jajaj un screenshot de como que buscas y el codigo actual serviria
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 02/12/2010, 15:46
 
Fecha de Ingreso: diciembre-2009
Mensajes: 108
Antigüedad: 8 años
Puntos: 0
Respuesta: Abrir imagen al pasar el mouse sobre un texto

jeje bueno sera deja un ejemplo para que te entiendan mejor men
  #4 (permalink)  
Antiguo 03/12/2010, 16:11
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: Abrir imagen al pasar el mouse sobre un texto

No lo puedes hacer con CSS, debes usar tambien javascript...y las imagenes deben cargarse al principio de la pagina en un div oculto(Si no se desea usar ajax...que en este caso no es recomendable y si las imagenes no son muy grandes).
  #5 (permalink)  
Antiguo 03/12/2010, 16:47
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Abrir imagen al pasar el mouse sobre un texto

Cita:
Iniciado por SPAWN3000 Ver Mensaje
No lo puedes hacer con CSS, debes usar tambien javascript...y las imagenes deben cargarse al principio de la pagina en un div oculto(Si no se desea usar ajax...que en este caso no es recomendable y si las imagenes no son muy grandes).
compañero no es mi intención llevarle la contraria, pero en que se basa para afirmar que no se puede hacer y que se debe usar ajax obligatoriamente...

soy yo o aun esperamos un ejemplo del efecto deseado del compañero, en dado caso si es posible realizarlo en css usando los selectores y pseudo clases adecuadas

y si no me crees checate este ejemplo expuesto por el compañero kseso? hace algunos meses (notese el efecto del boton enviar)

http://bit.ly/9XzpAI
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #6 (permalink)  
Antiguo 03/12/2010, 16:56
Avatar de function  
Fecha de Ingreso: abril-2010
Mensajes: 278
Antigüedad: 7 años, 7 meses
Puntos: 13
Respuesta: Abrir imagen al pasar el mouse sobre un texto

mira creo entebnderte:

Se puede hacer siempre y cuando sea lo que entendí:

Código CSS:
Ver original
  1. .classtxt, .classtxt a:link, .classtxt a:visited {
  2.      font-family:verdana;
  3.      font-size:12px;
  4.      etc etc etc
  5. }
  6. .classtxt a:hover, .classtxta:active {
  7.      background:url(mipath/miimagen) center 50% no-repeat;
  8. }

Además aplicaría un poc más de estilo:
Código CSS:
Ver original
  1. /* despues del primer .classtxt */
  2. .classtxt img {
  3.      vertical-align:middle;
  4. }

Espero y sea eso l que buscabas

Ahora, según el ejemplo dado, eso se hace porque esta declarada a nivel global el ancla "a" con a:hover
__________________
~# echo Hemos logrado la independencia, pero no la libertad >> SimonBolivar
  #7 (permalink)  
Antiguo 03/12/2010, 17:18
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Abrir imagen al pasar el mouse sobre un texto

Cita:
Iniciado por Ag666 Ver Mensaje
Cita:
Iniciado por Iniciado por [B
SPAWN3000[/B] ]No lo puedes hacer con CSS, debes usar tambien javascript...y las imagenes deben cargarse al principio de la pagina en un div oculto(Si no se desea usar ajax...que en este caso no es recomendable y si las imagenes no son muy grandes).
compañero no es mi intención llevarle la contraria, pero en que se basa para afirmar que no se puede hacer y que se debe usar ajax obligatoriamente...

soy yo o aun esperamos un ejemplo del efecto deseado del compañero, en dado caso si es posible realizarlo en css usando los selectores y pseudo clases adecuadas

y si no me crees checate este ejemplo expuesto por el compañero kseso? hace algunos meses (notese el efecto del boton enviar)

http://bit.ly/9XzpAI
Pues yo sí quiero llevarla, la contraria.
Sólo por ofrecer una vía a lo que suponemos que el desaparecido pretende.
Ag666, quizás sea mejor algo como lo siguiente.
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <style type="text/css">
  6. * {margin:0; padding:0; outline: none; position: relative;}
  7. html, body {
  8.   height: 100%;
  9.   background: #f5f5f5;
  10.   font-size: 1em;
  11.   font-family: serif;
  12. }
  13. p a {
  14.     display: inline-block;
  15.     text-decoration: underline;
  16.     position: relative;
  17.     font-family: monospace;
  18.     color: #f5f5f5;
  19.     background: #999;
  20. }
  21. p a:hover {background: #444; color: #f5f5f5;}
  22. p a img {display: none; }
  23. p a:hover img {
  24.     display: block;
  25.     position: absolute;
  26.     -moz-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
  27.     -webkit-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
  28.     -o-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
  29.     box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
  30. }
  31. </head>
  32. <p>Lorem ipsum dolor <a href="#" class="tooltip" title="tooltip">sit amet consectetuer<img src="http://img225.imageshack.us/img225/8876/neversayneveragainirvin.jpg" alt="imagen" /></a> id mauris eleifend volutpat justo. Semper convallis fames dolor augue In sed dapibus eget nisl auctor. Eros ante adipiscing pulvinar dolor turpis mauris mauris adipiscing pellentesque eros. Sit elit justo nunc habitasse nisl vel pulvinar metus sed sociis. Faucibus Vestibulum Donec non ridiculus laoreet malesuada justo dolor Fusce parturient. Tellus tristique tempus faucibus metus Suspendisse Nullam dictumst sodales.</p>
  33. </body>
  34. </html>
  #8 (permalink)  
Antiguo 03/12/2010, 17:34
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: Abrir imagen al pasar el mouse sobre un texto

Cita:
Iniciado por Ag666 Ver Mensaje
compañero no es mi intención llevarle la contraria, pero en que se basa para afirmar que no se puede hacer y que se debe usar ajax obligatoriamente...

soy yo o aun esperamos un ejemplo del efecto deseado del compañero, en dado caso si es posible realizarlo en css usando los selectores y pseudo clases adecuadas

y si no me crees checate este ejemplo expuesto por el compañero kseso? hace algunos meses (notese el efecto del boton enviar)

http://bit.ly/9XzpAI

...

Última edición por SPAWN3000; 03/12/2010 a las 17:40
  #9 (permalink)  
Antiguo 09/12/2010, 07:46
 
Fecha de Ingreso: diciembre-2008
Mensajes: 7
Antigüedad: 9 años
Puntos: 1
Respuesta: Abrir imagen al pasar el mouse sobre un texto

Mil disculpas por desaparecer una semana, me surgieron impostergables y básicamente me encontré sin tiempo. AGRADEZCO MUCHO LAS RESPUESTAS DE TODOS!

Pense que era claro y sencillo lo que explique solo que no tengo un modelo de referencia. Solo se me ocurrió y preguntaba si alguien lo había hecho.

Function, mi idea original era algo asi pero me vi limitado porque cada cliente tiene una imagen distinta, entonces debería crear una variable o algo así? no tengo ondo conocimiento en css pero hasta lo que se... no!

Quizás me exprese mal, pero la idea es como la opción title en imágenes... que se abre el cuadro y muestra el texto que uno quiere... bueno, algo así pero con una imagen. Lo he visto en algún lado hecho con javascript, quizás sea mas sencillo por ese lado?

De todos modos sigo buscando algún ejemplo para orientar mi pedido. Nuevamente gracias por sus respuestas, intentare estar online mas tiempo.
  #10 (permalink)  
Antiguo 09/12/2010, 08:52
 
Fecha de Ingreso: diciembre-2010
Mensajes: 56
Antigüedad: 7 años
Puntos: 1
Respuesta: Abrir imagen al pasar el mouse sobre un texto

Tienes DreamWeaver??

Hay un menú llamado comportamientos, Behaviors.

Hace lo que quieres de una manera súper sencilla, te da el código en java sin que tu te mates la cabeza.

Debes tener un div id en el texto y otro en la imagen....

Agregas un nuevo comportamiento, le das las opciones de como quieres que se de "fade/appear" o el que mejor te convenga, le das algunas opciones en valor numérico y en ese mismo panel le cambias "onClick", por "onMouseOver"
  #11 (permalink)  
Antiguo 09/12/2010, 09:04
 
Fecha de Ingreso: diciembre-2010
Mensajes: 56
Antigüedad: 7 años
Puntos: 1
Respuesta: Abrir imagen al pasar el mouse sobre un texto

puede que le des una propiedad al comienzo de la imagen como hidden
que cuando le pases el mause al texto, aparezca
y cuando le quites el texto, desaparezca de nuevo, tal vez el código te quede algo así:


El CSS que uno puede crear:

Código HTML:
	#InfoGramaDeBoton1 {
		visibility: hidden
	}
Lee el Java, que es un archivo que se lee con este código desde afuera, que contiene mucha programación y que Dream asocia solo:
Código HTML:
<script type="text/javascript">
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
	{
		Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
	}
</script> 
(si no tienes el Dw, me avisas y te paso el archivo js)

El Código que dream inserta es algo así:
Código HTML:
 <div id="botonIrA6">
		<a href="index.php">
	    	<img src="recursoGraficoPropio/enabledBt6.png"
    	    onmouseover="MM_effectAppearFade('InfoGramaDeBoton6', 1000, 0, 100, false)"
        	onmouseout="MM_effectAppearFade('InfoGramaDeBoton6', 1000, 100, 0, false)"/>
         </a> 
  #12 (permalink)  
Antiguo 09/12/2010, 09:07
 
Fecha de Ingreso: diciembre-2010
Mensajes: 56
Antigüedad: 7 años
Puntos: 1
Respuesta: Abrir imagen al pasar el mouse sobre un texto

http://www.youtube.com/watch?v=dKo7oHntZXA

es eso lo que quieres?
  #13 (permalink)  
Antiguo 09/12/2010, 09:19
 
Fecha de Ingreso: diciembre-2008
Mensajes: 7
Antigüedad: 9 años
Puntos: 1
Respuesta: Abrir imagen al pasar el mouse sobre un texto

no exactamente como lo muestra el video, no veo que el mouse pase por encima de ningun texto para que aparezca la imagen... pero ahora estudio bien el codigo que me pasaste y veo que hace! mil gracias por tu respuesta y dedicación!
  #14 (permalink)  
Antiguo 09/12/2010, 09:46
 
Fecha de Ingreso: diciembre-2010
Mensajes: 56
Antigüedad: 7 años
Puntos: 1
Respuesta: Abrir imagen al pasar el mouse sobre un texto

Cita:
Iniciado por Andr3s2005 Ver Mensaje
no exactamente como lo muestra el video, no veo que el mouse pase por encima de ningun texto para que aparezca la imagen... pero ahora estudio bien el codigo que me pasaste y veo que hace! mil gracias por tu respuesta y dedicación!
http://www.youtube.com/watch?v=ud8KtYUYnzs

te envié un tutorial que hace algo parecido, no lo que necesitas, que despistado soy.

fijate en esto

en el titulo rollover:

Si le das click sobre alguna de las 3 imágenes pequeñas...

Cambia el texto
Espero te sirva
http://www.uic.edu/depts/adn/seminars/dwintro/behaviors.html
  #15 (permalink)  
Antiguo 09/12/2010, 09:48
 
Fecha de Ingreso: diciembre-2010
Mensajes: 56
Antigüedad: 7 años
Puntos: 1
Respuesta: Abrir imagen al pasar el mouse sobre un texto

el primer video que te envié tiene la propiedad onLoad ( cuando se carga )

pero tb se puede aplicar a muchas, como onMouseUp, onMouseDown, que son eventos del ratón... etcétera

Espero te sirva:)
  #16 (permalink)  
Antiguo 09/12/2010, 10:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Abrir imagen al pasar el mouse sobre un texto

¿No es lo que busca el ejemplo de #7?

Cita:
porque cada cliente tiene una imagen distinta, entonces debería crear una variable o algo así?
Con css, muy resumido, puede actuar sobre la forma de mostrar una imagen, pero no cambiar la imagen en sí en función de alguna variable, como pueda ser el usuario.
Para ello necesita de algún lenguaje de programación. Html y css lo son de marcado o etiquetado.
De tal manera que ese lenguaje sea el que cambie el src de la imagen.
Y con css dar estilos a esa imagen.

Ya me dirá, si lo cree conveniente, si lo mostrado en #7 es lo que necesita o si por el contrario no comprendí su intención.

mi_da_s:
Creo que no debería utilizar la propiedad "visibility":
Cita:
#infogramadeboton1 {
visibility: hidden;
}
sino display
  #17 (permalink)  
Antiguo 09/12/2010, 13:25
 
Fecha de Ingreso: diciembre-2008
Mensajes: 7
Antigüedad: 9 años
Puntos: 1
Respuesta: Abrir imagen al pasar el mouse sobre un texto

Gracias! es exactamente como lo planteas kseso... no había probado aun lo que mandaste. Sin dudas estoy sorprendido por la colaboración! me han dejado alucinado!!!
ahora intentare darle una vuelta de tuerca y transformarlo a lo que imagino. GRACIAS A TODOS DE VERDAD.
  #18 (permalink)  
Antiguo 12/12/2010, 01:15
 
Fecha de Ingreso: diciembre-2009
Mensajes: 108
Antigüedad: 8 años
Puntos: 0
Respuesta: Abrir imagen al pasar el mouse sobre un texto

gracias pude resolver el problema y lo hice perfecto les agradezco a todos
  #19 (permalink)  
Antiguo 29/08/2012, 11:28
 
Fecha de Ingreso: agosto-2012
Mensajes: 1
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Abrir imagen al pasar el mouse sobre un texto

Cita:
Iniciado por kseso? Ver Mensaje
pues yo sí quiero llevarla, la contraria.
Sólo por ofrecer una vía a lo que suponemos que el desaparecido pretende.
Ag666, quizás sea mejor algo como lo siguiente.
Código html:
Ver original
  1. <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>kseso? Jugando con css</title>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  5. <style type="text/css">
  6. * {margin:0; padding:0; outline: None; position: Relative;}
  7. html, body {
  8.   height: 100%;
  9.   background: #f5f5f5;
  10.   font-size: 1em;
  11.   font-family: Serif;
  12. }
  13. p a {
  14.     display: Inline-block;
  15.     text-decoration: Underline;
  16.     position: Relative;
  17.     font-family: Monospace;
  18.     color: #f5f5f5;
  19.     background: #999;
  20. }
  21. p a:hover {background: #444; color: #f5f5f5;}
  22. p a img {display: None; }
  23. p a:hover img {
  24.     display: Block;
  25.     position: Absolute;
  26.     -moz-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #cdcdcd;
  27.     -webkit-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #cdcdcd;
  28.     -o-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #cdcdcd;
  29.     box-shadow: 3px 3px 8px #888888, -3px -3px 3px #cdcdcd;
  30. }
  31. </head>
  32. <p>lorem ipsum dolor <a href="#" class="tooltip" title="tooltip">sit amet consectetuer<img src="http://img225.imageshack.us/img225/8876/neversayneveragainirvin.jpg" alt="imagen" /></a> id mauris eleifend volutpat justo. Semper convallis fames dolor augue in sed dapibus eget nisl auctor. Eros ante adipiscing pulvinar dolor turpis mauris mauris adipiscing pellentesque eros. Sit elit justo nunc habitasse nisl vel pulvinar metus sed sociis. Faucibus vestibulum donec non ridiculus laoreet malesuada justo dolor fusce parturient. Tellus tristique tempus faucibus metus suspendisse nullam dictumst sodales.</p>
  33. </body>
  34. </html>
graciasssss
  #20 (permalink)  
Antiguo 08/10/2012, 12:11
 
Fecha de Ingreso: octubre-2012
Mensajes: 3
Antigüedad: 5 años, 2 meses
Puntos: 0
Respuesta: Abrir imagen al pasar el mouse sobre un texto

Cita:
Iniciado por kseso? Ver Mensaje
Pues yo sí quiero llevarla, la contraria.
Sólo por ofrecer una vía a lo que suponemos que el desaparecido pretende.
Ag666, quizás sea mejor algo como lo siguiente.
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <style type="text/css">
  6. * {margin:0; padding:0; outline: none; position: relative;}
  7. html, body {
  8.   height: 100%;
  9.   background: #f5f5f5;
  10.   font-size: 1em;
  11.   font-family: serif;
  12. }
  13. p a {
  14.     display: inline-block;
  15.     text-decoration: underline;
  16.     position: relative;
  17.     font-family: monospace;
  18.     color: #f5f5f5;
  19.     background: #999;
  20. }
  21. p a:hover {background: #444; color: #f5f5f5;}
  22. p a img {display: none; }
  23. p a:hover img {
  24.     display: block;
  25.     position: absolute;
  26.     -moz-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
  27.     -webkit-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
  28.     -o-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
  29.     box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
  30. }
  31. </head>
  32. <p>Lorem ipsum dolor <a href="#" class="tooltip" title="tooltip">sit amet consectetuer<img src="http://img225.imageshack.us/img225/8876/neversayneveragainirvin.jpg" alt="imagen" /></a> id mauris eleifend volutpat justo. Semper convallis fames dolor augue In sed dapibus eget nisl auctor. Eros ante adipiscing pulvinar dolor turpis mauris mauris adipiscing pellentesque eros. Sit elit justo nunc habitasse nisl vel pulvinar metus sed sociis. Faucibus Vestibulum Donec non ridiculus laoreet malesuada justo dolor Fusce parturient. Tellus tristique tempus faucibus metus Suspendisse Nullam dictumst sodales.</p>
  33. </body>
  34. </html>
Muy bueno , me gustaria saber como hacer esto

al pasar el raton aparesca un texto mas imagen como este link

http://www.dotafire.com/dota-2/forum/news/dota-v6-75-1266

tambien al pasar el raton por una imagen

http://www.dotafire.com/dota-2/heroes

gracias

Última edición por JavierHF; 08/10/2012 a las 12:17

Etiquetas: mouse, pasar
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 10:34.