Abrir imagen al pasar el mouse sobre un texto

Andr3s2005 · #1 (**permalink**) 02/12/2010, 13:03

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.

ArturoGallegos · #2 (**permalink**) 02/12/2010, 14:04

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

underworf · #3 (**permalink**) 02/12/2010, 15:46

jeje bueno sera deja un ejemplo para que te entiendan mejor men

SPAWN3000 · #4 (**permalink**) 03/12/2010, 16:11

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

ArturoGallegos · #5 (**permalink**) 03/12/2010, 16:47

Cita:

Iniciado por SPAWN3000

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

function · #6 (**permalink**) 03/12/2010, 16:56

mira creo entebnderte:

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

Código CSS:

Ver original.classtxt, .classtxt a:link, .classtxt a:visited {
     font-family:verdana;
     font-size:12px;
     etc etc etc
}
.classtxt a:hover, .classtxta:active {
     background:url(mipath/miimagen) center 50&#37; no-repeat;
}

Además aplicaría un poc más de estilo:

Código CSS:

Ver original/* despues del primer .classtxt */
.classtxt img {
     vertical-align:middle;
}

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

kseso? · #7 (**permalink**) 03/12/2010, 17:18

Cita:

Iniciado por Ag666

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0; outline: none; position: relative;}
html, body {
  height: 100%;
  background: #f5f5f5;
  font-size: 1em;
  font-family: serif;
}
p a {
    display: inline-block;
    text-decoration: underline;
    position: relative;
    font-family: monospace;
    color: #f5f5f5;
    background: #999;
}
p a:hover {background: #444; color: #f5f5f5;}
p a img {display: none; }
p a:hover img {
    display: block;
    position: absolute;
    -moz-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
    -webkit-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
    -o-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
    box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
}
</style>
</head>
<body>
<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>
</body>
</html>

SPAWN3000 · #8 (**permalink**) 03/12/2010, 17:34

Cita:

Iniciado por Ag666

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

...

Andr3s2005 · #9 (**permalink**) 09/12/2010, 07:46

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.

mi_da_s · #10 (**permalink**) 09/12/2010, 08:52

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"

mi_da_s · #11 (**permalink**) 09/12/2010, 09:04

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>

mi_da_s · #12 (**permalink**) 09/12/2010, 09:07

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

es eso lo que quieres?

Andr3s2005 · #13 (**permalink**) 09/12/2010, 09:19

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!

mi_da_s · #14 (**permalink**) 09/12/2010, 09:46

Cita:

Iniciado por Andr3s2005

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

mi_da_s · #15 (**permalink**) 09/12/2010, 09:48

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:)

kseso? · #16 (**permalink**) 09/12/2010, 10:48

¿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

Andr3s2005 · #17 (**permalink**) 09/12/2010, 13:25

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.

underworf · #18 (**permalink**) 12/12/2010, 01:15

gracias pude resolver el problema y lo hice perfecto les agradezco a todos

Djimenezweb · #19 (**permalink**) 29/08/2012, 10:28

Cita:

Iniciado por kseso?

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<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>kseso? Jugando con css</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0; outline: None; position: Relative;}
html, body {
  height: 100%;
  background: #f5f5f5;
  font-size: 1em;
  font-family: Serif;
}
p a {
    display: Inline-block;
    text-decoration: Underline;
    position: Relative;
    font-family: Monospace;
    color: #f5f5f5;
    background: #999;
}
p a:hover {background: #444; color: #f5f5f5;}
p a img {display: None; }
p a:hover img {
    display: Block;
    position: Absolute;
    -moz-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #cdcdcd;
    -webkit-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #cdcdcd;
    -o-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #cdcdcd;
    box-shadow: 3px 3px 8px #888888, -3px -3px 3px #cdcdcd;
}
</style>
</head>
<body>
<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>
</body>
</html>

graciasssss

JavierHF · #20 (**permalink**) 08/10/2012, 11:11

Cita:

Iniciado por kseso?

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0; outline: none; position: relative;}
html, body {
  height: 100%;
  background: #f5f5f5;
  font-size: 1em;
  font-family: serif;
}
p a {
    display: inline-block;
    text-decoration: underline;
    position: relative;
    font-family: monospace;
    color: #f5f5f5;
    background: #999;
}
p a:hover {background: #444; color: #f5f5f5;}
p a img {display: none; }
p a:hover img {
    display: block;
    position: absolute;
    -moz-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
    -webkit-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
    -o-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
    box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
}
</style>
</head>
<body>
<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>
</body>
</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