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

Tema: (Duda) Mostrar informacion con ventana emergente

  1. #1
    Esto empieza a ser un vicio... Habitante Avatar de spitfire2
    Fecha de Ingreso
    04 sep, 10
    Ubicación
    ARGENTINA...!!!
    Mensajes
    750
    Poder de Reputación
    14

    Question (Duda) Mostrar informacion con ventana emergente

    Buenas, hoy me encuentro con la necesidad de mostrar informacion en una ventana emergente, alguien sabe como se hace?
    -Esto es lo que tendria que lograr:

    Creo un cuadricula de 8 x 8 (no es ajedrez) en la que se muestra el id del cuadrado (se muestran con php y base de datos) y quiero que al posar el mouse sobre cada cuadrado, salga una pequeña ventana de 100px x 50px mostrando mas datos tambien descargados de una base de datos, como podria hacerlo?

    - Lo pregunto aqui porque me imagino que se haria con js aunque use php y base de datos, gracias colegas, espero su respuesta, saludos.

  2. #2
    Moderador CCTW Habitante Avatar de johnpeterjp
    Fecha de Ingreso
    13 abr, 06
    Ubicación
    Santiago de Chile
    Mensajes
    3,181
    Poder de Reputación
    32
    Acá te dejo el efecto para que aparezca la ventanita con información (Tooltip), las DB las programas tú.

    Ejemplo: http://www.dynamicdrive.com/dynamici...lestooltip.htm

    Varias Opciones: http://www.dynamicdrive.com/dynamicindex5/

    Espero te sirva. Saludos.
    "Conocimiento es necesidad, necesidad es conocer lo que necesitamos"


  3. #3
    Esto empieza a ser un vicio... Habitante Avatar de spitfire2
    Fecha de Ingreso
    04 sep, 10
    Ubicación
    ARGENTINA...!!!
    Mensajes
    750
    Poder de Reputación
    14
    Muchas gracias, me sirvio uno de los del segundo link, es que necesitaba que saliera una ventana con enlaces, aunque tengo un problema, la ventana me sale abajo a la derecha y no justo al lado del objeto al que se la asigno, que opinas, se podra cambiar algo para que salga justo al lado del objeto?

    este es el css que dan:

    #dhtmlfloatie{
    position: absolute;
    left: 0;
    left: -900px;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    border: 2px solid black;
    padding: 5px;
    z-index: 100;
    }

    este es el js:
    var floattext=new Array()
    floattext[0]='- <a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a><br>- <a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript Tutorials</a><br>- <a href="http://www.javascriptkit.com/dhtmltutors/index.shtml">DHTML/ CSS Tutorials</a><br>- <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a><br><div align="right"><a href="javascript:hidefloatie()">Hide Box</a></div>'
    floattext[1]='Some other floatie text'

    var floatiewidth="250px" //default width of floatie in px
    var floatieheight="60px" //default height of floatie in px. Set to "" to let floatie content dictate height.
    var floatiebgcolor="lightyellow" //default bgcolor of floatie
    var fadespeed=70 //speed of fade (5 or above). Smaller=faster.

    var baseopacity=0
    function slowhigh(which2){
    imgobj=which2
    browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
    instantset(baseopacity)
    highlighting=setInterval("gradualfade(imgobj)",fad espeed)
    }

    function instantset(degree){
    cleartimer()
    if (browserdetect=="mozilla")
    imgobj.style.MozOpacity=degree/100
    else if (browserdetect=="ie")
    imgobj.filters.alpha.opacity=degree
    }

    function cleartimer(){
    if (window.highlighting) clearInterval(highlighting)
    }

    function gradualfade(cur2){
    if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
    cur2.style.MozOpacity=Math.min(parseFloat(cur2.sty le.MozOpacity)+0.1, 0.99)
    else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
    cur2.filters.alpha.opacity+=10
    else if (window.highlighting)
    clearInterval(highlighting)
    }

    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

    function paramexists(what){
    return(typeof what!="undefined" && what!="")
    }

    function showfloatie(thetext, e, optbgColor, optWidth, optHeight){
    var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
    var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
    var floatobj=document.getElementById("dhtmlfloatie")
    floatobj.style.left="-900px"
    floatobj.style.display="block"
    floatobj.style.backgroundColor=paramexists(optbgCo lor)? optbgColor : floatiebgcolor
    floatobj.style.width=paramexists(optWidth)? optWidth+"px" : floatiewidth
    floatobj.style.height=paramexists(optHeight)? optHeight+"px" : floatieheight!=""? floatieheight : ""
    floatobj.innerHTML=thetext
    var floatWidth=floatobj.offsetWidth>0? floatobj.offsetWidth : floatobj.style.width
    var floatHeight=floatobj.offsetHeight>0? floatobj.offsetHeight : floatobj.style.width
    var winWidth=document.all&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
    var winHeight=document.all&&!window.opera? ietruebody().clientHeight : window.innerHeight
    e=window.event? window.event : e
    floatobj.style.left=dsocx+winWidth-floatWidth-5+"px"
    if (e.clientX>winWidth-floatWidth && e.clientY+20>winHeight-floatHeight)
    floatobj.style.top=dsocy+5+"px"
    else
    floatobj.style.top=dsocy+winHeight-floatHeight-5+"px"
    slowhigh(floatobj)
    }

    function hidefloatie(){
    var floatobj=document.getElementById("dhtmlfloatie")
    floatobj.style.display="none"
    }

    y este es el objeto, en este caso dos enlaces y el div que hace de ventana con los enlaces:
    <div id="dhtmlfloatie" >
    </div>
    <a href="#" onMouseover="showfloatie('Web coding and development forums. Get help on JavaScript, CGI, PHP, CSS, and more.', event)"<!--onMouseout="hidefloatie()"-->>Coding Forums</a> |
    <a href="#" onMouseover="showfloatie(floattext[0], event, '#D9FFD9', 250, 100)">JavaScript Kit</a>

    Que opinas? se podra hacer algo para que la ventana salga al lado del enlace, flotando sin mover el contenido que lo rodea? gracias.

  4. #4
    Moderador CCTW Habitante Avatar de johnpeterjp
    Fecha de Ingreso
    13 abr, 06
    Ubicación
    Santiago de Chile
    Mensajes
    3,181
    Poder de Reputación
    32
    Seguro que sí. Déjanos el enlace al script que usaste. Saludos.
    "Conocimiento es necesidad, necesidad es conocer lo que necesitamos"


  5. #5
    Esto empieza a ser un vicio... Habitante Avatar de spitfire2
    Fecha de Ingreso
    04 sep, 10
    Ubicación
    ARGENTINA...!!!
    Mensajes
    750
    Poder de Reputación
    14

  6. #6
    Moderador CCTW Habitante Avatar de johnpeterjp
    Fecha de Ingreso
    13 abr, 06
    Ubicación
    Santiago de Chile
    Mensajes
    3,181
    Poder de Reputación
    32
    Lo que sucede es que el script que elegiste ubica la ventana en una posición siempre absoluta, debes usar por ejemplo éste: http://www.dynamicdrive.com/dynamici...lapcontent.htm

    Ubica el mouse sobre el texto "Search DD" al lado izquierdo en los menus. El otro ejemplo es presionando al lado derecho donde dice: Additional Resources

    Ese tooltip aparece siempre junto al texto que quieras.

    Saludos.
    "Conocimiento es necesidad, necesidad es conocer lo que necesitamos"


  7. #7
    Esto empieza a ser un vicio... Habitante Avatar de spitfire2
    Fecha de Ingreso
    04 sep, 10
    Ubicación
    ARGENTINA...!!!
    Mensajes
    750
    Poder de Reputación
    14
    Muchas gracias, me resulto perfecto, saludos.

  8. #8
    Moderador CCTW Habitante Avatar de johnpeterjp
    Fecha de Ingreso
    13 abr, 06
    Ubicación
    Santiago de Chile
    Mensajes
    3,181
    Poder de Reputación
    32
    Por nada. Ya vés que no era muy complicado. Suerte y Saludos.
    "Conocimiento es necesidad, necesidad es conocer lo que necesitamos"


Temas Similares

  1. Ventana emergente
    Por crimi en el foro Scripts
    Respuestas: 9
    Último Mensaje: 08/12/2011, 20:47
  2. ventana emergente
    Por miguelronquillo en el foro Foro General
    Respuestas: 2
    Último Mensaje: 12/10/2011, 00:54
  3. Mensaje en una ventana emergente
    Por Anlomaca en el foro Otros Elementos
    Respuestas: 0
    Último Mensaje: 10/02/2009, 15:32

Permisos de Publicación

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