Hola soy nuevo, y tengo esta duda....

gyvas · #1 (**permalink**) 17/12/2005, 21:17

Quiero hacer algo como lo que hace el texto alternativo osea como un alt pero que sea una imagen que provenga al pasar sobre otra imagen de menor tamaño es decir yo tengo este pekenia imagen:

quiero la manera de que con un mouseover o sea al pasar por esa imagen salga una flotante como esta:

Asi para que cuando alguien pase por el nombre del artista quede algo asi:

Me recomendaron un script el cual baje y modifique y logre que la palabra del artista al pasar el mouse saliera la imagen, pero la imagen queda activa intente poner imagen trasparantes y opciones mouseout pero no se mucho de esto, y no se si ese script puede aplicarsele a una imagen, como la primera que puse arriba. El topic de como es el script esta en este post en otro foro que posteo:

Código:

http://www.mocoforo.com/foro/index.php?s=&showtopic=73825&view=findpost&p=332860

Si uso la opcion de imagen dinamica me queda mal por que usa el tamaño de la primer imagen que es muy chico

Espero me ayuden muchas gracias y si el post no va aca sepan disculpar pero este foro tiene mucho contenido y todovia no entiendo mucho del tema

Cap.Buscapina · #2 (**permalink**) 18/12/2005, 17:36

hola, tepaso algo muy simple, que te pude servir.

Código HTML:

<html>
<head>
<script>
function ver(c,v){
document.getElementById(c).style.visibility=v;
}
</script>
</head>
<body>
<div id="capa1" style="position:absolute; left:39px; top:20px; width:286px; height:35px; z-index:1; background-color: #99CCFF; layer-background-color: #99CCFF; border: 1px none #000000; visibility: hidden;"></div>
<div id="capa2" style="position:absolute; left:39px; top:35px; width:286px; height:35px; z-index:1; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; visibility: hidden;"></div>
<div id="capa3" style="position:absolute; left:39px; top:50px; width:286px; height:35px; z-index:1; background-color: #99CCCC; layer-background-color: #99CCCC; border: 1px none #000000; visibility: hidden;"></div>
<span onmouseover="ver('capa1','visible')" onmouseout="ver('capa1','hidden')">link1</span><br>
<span onmouseover="ver('capa2','visible')" onmouseout="ver('capa2','hidden')">link2</span><br>
<span onmouseover="ver('capa3','visible')" onmouseout="ver('capa3','hidden')">link3</span><br>
</body>
</html>

no se el grado de complegidad que querés, pero te puede servir para empezar, luego podés jugar con la posicion de otros elementos y hasta con la del raton( por algun lado ví uno bastante bueno que tomaba la posicion del raton, pero no me acurdo donde estaba)

espero te sirva, saludos.

gyvas · #3 (**permalink**) 18/12/2005, 17:42

muchas gracias ya lo baje ni bien pueda le echo mano je

gyvas · #4 (**permalink**) 19/12/2005, 11:17

Necesito alguna manera facil de hacerlo por favor

gyvas · #5 (**permalink**) 18/01/2006, 09:22

no puedo me estoy volviendo loko solo quiero que salga una imagen al pasar por el layer q quiero de mi index o sea del autor sniff.

carlosfocus · #6 (**permalink**) 18/01/2006, 09:24

:S el code de Camp.Buscapina esta bien, no veo la complejidad.

gyvas · #7 (**permalink**) 18/01/2006, 09:29

si seguro q esta bien pero la complejidad es que yo recien empiezo y ver un java todo escrito asi es como estar parado ante un jeroglifico egipceo, y querer modificarlo es como no tener la piedra rosetta, pero vere q hago

carlosfocus · #8 (**permalink**) 18/01/2006, 09:32

amigo es que no tiene nada de JEROGLIFICO solamente son DIV que se cargan............... has la prueba y veras

Cap.Buscapina · #9 (**permalink**) 18/01/2006, 17:53

Cita:

Iniciado por gyvas

si seguro q esta bien pero la complejidad es que yo recien empiezo y ver un java todo escrito asi es como estar parado ante un jeroglifico egipceo, y querer modificarlo es como no tener la piedra rosetta, pero vere q hago

creo que hay pocas cosas mas simples, pero entiendo tu desesperación (todos comenzamos alguna ves).

Expliquemos:

Cita:

<div id="capa1" style="position:absolute; left:39px; top:20px; width:286px; height:35px; z-index:1; background-color: #99CCFF; layer-background-color: #99CCFF; border: 1px none #000000; visibility: hidden;">

xxxxxx

</div>

esto es lo que se conoce como "una capa". Para que sirve??. Es un elemento que permite contener por ejemplo codigo html. para modificar la apariencia y ubicacion probá modificar los parámetros que estan dentro de STYLE o bien informate acerca de CSS (para aplicarle estilos a tus capas). Las xxx reemplazalas por el codigo html que quieras poner (una tabla, imagenes, links,....), en tu ejemplo sería el texto "fernando molinari nació..."

Cita:

este sería el link para que cuando el ratón pase por ensima aparesca y/o desaparesca la capa (podés utilizar las etiquetas A, SPAN, DIV,TD..... y muchas mas), en tu ejemplo sería deberías cambiar link1 por Fernando Molinari

La funcion

Cita:

cada ves que el mouse pase por encima y/o salga del span (en tu caso sería Fernando Molinari) llamará a la función ver() pasándole como parámetro c, el nombre de la capa y v, si tiene que mostrarla(visible) u ocultarla(hidden).

Bueno, mejor no se me ocurre la explicación, es bastante mas simple de lo que parece. El concejo mas importante es que pruebes distintas variantes e investigues un poco que no es tan dificil, si yo que soy un pobre chacarero aprendí solo , vos tambien podrás.

saludos.

gyvas · #10 (**permalink**) 18/01/2006, 18:15

Muchas gracias monumental explicaciones, guarde la pagina para leerlo con atencion despues y empezar a aplicarlo. GRACIAS TOTALES