Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML

    Cargado por

    Miguel Ang
    7 vistas5 páginas

    Título original

    html.docx

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    7 vistas5 páginas

    HTML

    Cargado por

    Miguel Ang

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 5

    <html> <head>

    <style type="text/css"> /* Estilo que muestra la capa flotante */ #flotante { position: absolute; display:none; font-family:Arial; font-size:0.8em; width:280px; border:1px solid #808080; background-color:#f1f1f1; padding:5px; } </style>

    <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.scrollT op));

    tempX=(tempX+Math.max(document.body.scrollLeft,document.documentElement.scrollL eft)); } }else{ //IE8 tempX = event.x tempY = event.y } }else{ //para netscape //window.pageYOffset = devuelve el tamao 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> </head> <body>

    <div> <script type="text/javascript"><!-google_ad_client = "pub-5586981122800176"; //728x90, creado 2/01/08 google_ad_slot = "6081869238"; google_ad_width = 728; google_ad_height = 90; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div>

    <!-- En este div se mostrar la capa emergente --> <div id="flotante"></div>

    <p> <h1>Mostrar una capa al pasar el rat&oacute;n por encima de un texto o imagen</h1>

    <div onmouseover="showdiv(event,'Este codigo se ha probado con:<ul><li>IE6, 7, 8 y 9</li><li>Firefox</li><li>Chrome</li><li>Safari</li><li>Opera</li></ul>');" onMouseOut="hiddenDiv()" style='display:table;'>Informaci&oacute;n</div> <div onmouseover="showdiv(event,'Texto descritivo para la primera linea de texto');" onMouseOut="hiddenDiv()" style='display:table;margin-top:30px;'>Por el raton encima para ver la capa</div> <div onmouseover="showdiv(event,'Este texto aparece en el segundo<br />texto de la pantalla');" onMouseOut="hiddenDiv()" style='display:table;margin-top:30px;'>Por el raton encima para ver la capa</div> </p>

    <br /><p style='clear:both;text-align:center'><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p>

    </body> </html>

    También podría gustarte