Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 5 de 5

Tema: div al pasar el mause por encima de una imagen

  1. #1
    Recien Llegado! Habitante
    Fecha de Ingreso
    03 feb, 13
    Mensajes
    19
    Poder de Reputación
    11

    div al pasar el mause por encima de una imagen

    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('msi e 6');
    IE7=navigator.userAgent.toLowerCase().indexOf('msi e 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,docu ment.documentElement.scrollTop));
    tempX=(tempX+Math.max(document.body.scrollLeft,doc ument.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.

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de Web-Freelance
    Fecha de Ingreso
    15 sep, 11
    Ubicación
    España
    Mensajes
    603
    Poder de Reputación
    16
    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!
    Agradece si te ayudan, que desagradecidos ya sobran.

  3. #3
    Recien Llegado! Habitante
    Fecha de Ingreso
    03 feb, 13
    Mensajes
    19
    Poder de Reputación
    11
    Gracias mi hermano, voy a revisarlo bien.

  4. #4
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    21
    Sí, es muucho más simple con jQuery, prueba con algo así (lo escribo sobre la marcha, no tengo tiempo de probarlo jaja)
    Código HTML:
    <!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>

  5. #5
    Recien Llegado! Habitante
    Fecha de Ingreso
    03 feb, 13
    Mensajes
    19
    Poder de Reputación
    11
    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)

Temas Similares

  1. Respuestas: 3
    Último Mensaje: 28/07/2011, 06:56
  2. agrandar una imagen al pasar el ratón encima
    Por ALEJANDO en el foro Foro General
    Respuestas: 1
    Último Mensaje: 27/09/2008, 18:06
  3. Agrandar una imagen al pasar el cursor por encima... ayudaaa
    Por isabel2830 en el foro Foro General
    Respuestas: 4
    Último Mensaje: 19/07/2008, 02:19

Etiquetas para este Tema

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •