Entrar

div al pasar el mause por encima de una imagen

carloscontreras · · Solicitar retirada
por medio de siguiente script muestro un div al pasar el ratón por encima de una imagen pero el movimiento es muy brusco, quisiera poder darle un movimiento mas suave y hacia todos los sentidos



<script type="text/javascript">
/**
* Funcion que muestra el div en la posicion del mouse
*/
function showdiv(event,text)
{
//determina un margen de pixels del div al raton
margin=5;

//La variable IE determina si estamos utilizando IE
var IE = document.all?true:false;

var tempX = 0;
var tempY = 0;

//document.body.clientHeight = devuelve la altura del body
if(IE)
{ //para IE
IE6=navigator.userAgent.toLowerCase().indexOf('msie 6');
IE7=navigator.userAgent.toLowerCase().indexOf('msie 7');
//event.y|event.clientY = devuelve la posicion en relacion a la parte superior visible del navegador
//event.screenY = devuelve la posicion del cursor en relaciona la parte superior de la pantalla
//event.offsetY = devuelve la posicion del mouse en relacion a la posicion superior de la caja donde se ha pulsado

if(IE6>0 || IE7>0)
{
tempX = event.x
tempY = event.y
if(window.pageYOffset){
tempY=(tempY+window.pageYOffset);
tempX=(tempX+window.pageXOffset);
}else{
tempY=(tempY+Math.max(document.body.scrollTop,document.documentElement.scrollTop));
tempX=(tempX+Math.max(document.body.scrollLeft,document.documentElement.scrollLeft));
}
}else{
//IE8
tempX = event.x
tempY = event.y
}
}else{ //para netscape
//window.pageYOffset = devuelve el tamaño en pixels de la parte superior no visible (scroll) de la pagina
document.captureEvents(Event.MOUSEMOVE);
tempX = event.pageX;
tempY = event.pageY;
}

if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}

// Modificamos el contenido de la capa
document.getElementById('flotante').innerHTML=text;

// Posicionamos la capa flotante
document.getElementById('flotante').style.top = (tempY+margin)+"px";
document.getElementById('flotante').style.left = (tempX+margin)+"px";
document.getElementById('flotante').style.display='block';
return;
}

/**
* Funcion para esconder el div
*/
function hiddenDiv()
{
document.getElementById('flotante').style.display='none';
}
</script>


no se si en php se podría realizar también, por favor agradezco la ayuda que puedan brindarme.
Web-Freelance · · Solicitar retirada
Hola. Ya hacía tiempo que no entraba por aquí y me hacía ilusión contestar un post porque me tiraré otro tanto tiempo sin entrar (falta de tiempo) jeje.

Para dar efectos debes utilizar jquery. Y no, no es posible con php.

Saludos!
Doodleo · · Solicitar retirada
Sí, es muucho más simple con jQuery, prueba con algo así (lo escribo sobre la marcha, no tengo tiempo de probarlo jaja)
<!DOCTYPE html>
<html lang="es">
<head>
<title>Prueba</title>
<meta charset="ISO-8859-1">
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>

<div id="imagen" onmouseover='$("#capa").fadeIn("slow"); $("#capa").css("display","block");'><img src="http://www.comocreartuweb.com/consultas/images/misc/como-crear-tu-web.gif" /></div><br />
<div id="capa" style="display: none;">CONTENIDO DEL DIV...</div>

</body>
</html>
carloscontreras · · Solicitar retirada
Necesito que se muestre el div solo cuando paso el mouse por encima(seria como una breve descripción lo que voy a mostrar en los div por que las imágenes serian de los perfiles de los usuarios por tanto cada uno mostraría una descripción diferente, seria como una especie de galería de fotos a las cuales quiero agregarles un div al pasar el mouse sobre ellas con una breve descripción)