¿Como coloco ventanitas con html?

Started by Gerck, March 26, 2009, 04:49:21 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Gerck

Eh visto algunas paginas en donde salen algunas especies asi como de ventanas emergentes, pero no son ventanas propias del sistema operativo del navegador o algo similar, sino que son ventanas hechas con tablas creadas con HTML y Javascript.

Una oportunidad tuve la dicha de tener el condigo fuente y mas o menos me acuerdo de que era la convinacion de una tabla con codigo javascript. esta tenia la capacidad de moverse y cerrar la ventana si asi lo deseaba el usuario.

Si alguien tiene algo parecido, se lo agradecere un chorro.

Esta ventanita de la que hablo es con fines de publicidad generalmente.
Salomón - ·:.El Sabio habla al Necio.:·
"...despreciasteis mis consejos, no aceptasteis mis advertencias.También yo me reiré de vuestra desgracia, me burlaré cuando os invada el terror. Entonces me llamarán y no responderé, me buscarán y no me encontrarán. Porque despreciaron el saber.




Gerck

Ok, no se porque siempre me pasa algo asi, siempre que pregunto por algo termino respondiendome yo mismo.

Quotevar revisa_tama = 1000;
if (!HVhpjs)
{
    var HVhpjs = 1;
    ads_hv_FactorX=20;
   
    isNS4 = (document.layers) ? true : false;
    isIE4 = (document.all && !document.getElementById) ? true : false;
    isIE5 = (document.all && document.getElementById) ? true : false;
    isNS6 = (!document.all && document.getElementById) ? true : false;
   
    function ads_hv_cerrar(){
       
       
        if(isNS4){
           
            document.yomaster.visibility="hidden";
        }
        else if (isNS6){
            document.getElementById("yomaster").style.visibility ="hidden";
        }
        else{
                   document.all.yomaster.style.visibility = "hidden";
        }
    }
    function ads_hv_setVals() {
        // Con NS el innerHeigth esta definido
        if (isIE4 || isIE5){
            if (document.body){
                innerWidth = document.body.clientWidth;
               innerHeight = document.body.clientHeight;
            } else{
                innerWidth = 1004;
               innerHeight= 578;   
            }
        }
        ads_hv_posX = 120+5;
        ads_hv_posY = 5;
        ads_hv_yanterior = 5;
        ads_hv_mover();
    }
    function ads_hv_mover(){
        var ads_hv_scrollPos = ads_hv_navDOM?self.pageYOffset:document.body.scrollTop;
        var ads_hv_posLeft = -ads_hv_posX +innerWidth + (ads_hv_navDOM?self.pageXOffset:document.body.scrollLeft);
       
        if (Math.abs(ads_hv_scrollPos-ads_hv_yanterior) > ads_hv_FactorX){
<!-- 20 es e valor de la velocidad -->
            var ads_hv_dist = 8 * parseInt( Math.abs(ads_hv_scrollPos-ads_hv_yanterior) / ads_hv_FactorX );
        } else {
            var ads_hv_dist  = 1;
        }
       
        if(ads_hv_yanterior < (ads_hv_scrollPos+ads_hv_posY)){
            ads_hv_yanterior+=ads_hv_dist;
            ads_hv_moverElemento(ads_hv_yanterior,ads_hv_posLeft);
        } else if (ads_hv_yanterior > (ads_hv_scrollPos+ads_hv_posY)){
            ads_hv_yanterior-=ads_hv_dist;
            ads_hv_moverElemento(ads_hv_yanterior,ads_hv_posLeft);
        } else if (ads_hv_yanterior == (ads_hv_scrollPos+ads_hv_posY)){
            ads_hv_moverElemento(ads_hv_yanterior,ads_hv_posLeft);
        }       
       
        setTimeout ("ads_hv_mover()",10);
    }
    function ads_hv_moverElemento(ads_hv_valTop,ads_hv_valLeft){
        if (isIE4){
            document.all["yomaster"].style.left = ads_hv_valLeft;
            document.all["yomaster"].style.top = ads_hv_valTop;
        }
        else if(isIE5){
            document.getElementById("yomaster").style.left = ads_hv_valLeft;
            document.getElementById("yomaster").style.top = ads_hv_valTop;
        }
        else if(isNS4){
            document.yomaster.left = ads_hv_valLeft;
            document.yomaster.top = ads_hv_valTop;
        }
        else if(isNS6){
            document.getElementById("yomaster").style.left = ads_hv_valLeft;
            document.getElementById("yomaster").style.top = ads_hv_valTop;
        }
    }
    function ads_hv_markMe() {
        if (screen.width >= 640 ){
           window.onresize=ads_hv_setVals;
           ads_hv_setVals();       
        }
    }
   
   
      function dar(){
        if(ads_hv_puesto==1){
            return;   
        }
        ads_hv_puesto = 1;
        ads_hv_tam_x = 37;//La X de cerrar es de 81x21
       
        if (isIE4){
            ads_hv_w = window.document.all["yomaster"].document.all["ads_hv_publi"].width;
            ads_hv_h = window.document.all["yomaster"].document.all["ads_hv_publi"].height;
           
            ads_hv_p1 = ads_hv_w-ads_hv_tam_x+1;
           
            window.document.all["yomaster"].document.all["ads_hv_area_hv"].coords="0,0,"+ads_hv_p1+","+(ads_hv_tam_x-1);
            window.document.all["yomaster"].document.all["ads_hv_area_cerrar"].coords=(ads_hv_p1+1)+",0,"+ads_hv_w+","+(ads_hv_tam_x-1);
            window.document.all["yomaster"].document.all["ads_hv_area_img"].coords="0,"+ads_hv_tam_x+","+ads_hv_w+","+ads_hv_h;   
        }
        else if(isIE5){
            ads_hv_w = window.document.getElementById("yomaster").document.getElementById("ads_hv_publi").width;
            ads_hv_h = window.document.getElementById("yomaster").document.getElementById("ads_hv_publi").height;
           
            ads_hv_p1 = ads_hv_w-ads_hv_tam_x+1;
                                 
            window.document.getElementById("yomaster").document.getElementById("ads_hv_area_hv").coords="0,0,"+ads_hv_p1+","+(ads_hv_tam_x-1);
            window.document.getElementById("yomaster").document.getElementById("ads_hv_area_cerrar").coords=(ads_hv_p1+1)+",0,"+ads_hv_w+","+(ads_hv_tam_x-1);
            window.document.getElementById("yomaster").document.getElementById("ads_hv_area_img").coords="0,"+ads_hv_tam_x+","+ads_hv_w+","+ads_hv_h;
        }
    }
   
    function tam(){   
        if (isIE4){
            ads_hv_posX = window.document.all["yomaster"].document.all["ads_hv_publi"].width+5;
        }
        else if(isIE5){
            ads_hv_posX = window.document.getElementById("yomaster").document.getElementById("ads_hv_publi").width+5;
        }
        dar();
    }
   
   
   
  function runPopup(){
 
    if (isIE4 || isIE5){
       if (document.body){
           ads_hv_altura=document.body.clientHeight;
           ads_hv_anchura=document.body.clientWidth;
       }else{
            if (frames.length==0){
                ads_hv_altura=301;
                ads_hv_anchura=451;
            }else{
               ads_hv_altura=0;
               ads_hv_anchura=0;
           }
       }
    }
   
    if (isNS4 || isNS6){
       ads_hv_altura=window.innerHeight;
       ads_hv_anchura=window.innerWidth;
    }
   
    ads_hv_fecha = new Date();
    ads_hv_bust = ads_hv_fecha.getTime();
   
    ads_hv_puesto = 0;
   
 
   
   
    if (ads_hv_altura>64 && ads_hv_anchura>291){
if (isNS6){
document.getElementById("yomaster").style.visibility ="hidden";
        
      }
        if (isNS4){
                   document.yomaster.visibility="hidden";
         
       }
       else{
            document.write('<DIV id="yomaster" name="yomaster" style="position:absolute;visibility: visible" z-index=100 onMouseOver="dar()">');
        document.write('<map name="_HvMap_"><area id="ads_hv_area_cerrar" Shape="rect" coords="0,0,0,0" href="javascript:void(0);" onMouseDown="javaScript:ads_hv_cerrar();"  alt="Cerrar Publicidad aquí..." target="_self"><area id="ads_hv_area_hv" shape="rect" coords="0,0,0,0" href="http://www.queputada.com/" alt="&gt;&gt;Más Información...&gt;&gt;" target="_blank"><area id="ads_hv_area_img" shape="rect" coords="0,0,0,0" href="http://www.queputada.com/" target="_blank"></map>');
            document.write('<img name="ads_hv_publi" src="http://www.yomaster.com/banner/queputada.gif" border=0 usemap="#_HvMap_" onLoad="tam()"><br>');

            document.write('</DIV>');
       }
       
       
        ads_hv_navDOM = isNS4 || isNS6;
        var ads_hv_vr = navigator.userAgent.replace(/mac/gi,"");
        if (navigator.userAgent != ads_hv_vr)
        {window.onload=ads_hv_markMe;} // safety for Mac IE4.5
        ads_hv_markMe();       
    }
   
  }//fin runpopup
}//fin if

//para ejecutarlo
runPopup();
//window.onresize = new Function("window.location.reload()");
setInterval("tam();", 100)
//setTimeout ("alert('hola');",revisa_tama);

Ese es el codigo, algo parecido, no se mueve, pero pues al menos cierra esa publicidad.

Que Dios les bendiga.

Espero encontrar uno que se mueva xD  ;D
Salomón - ·:.El Sabio habla al Necio.:·
"...despreciasteis mis consejos, no aceptasteis mis advertencias.También yo me reiré de vuestra desgracia, me burlaré cuando os invada el terror. Entonces me llamarán y no responderé, me buscarán y no me encontrarán. Porque despreciaron el saber.




Gerck

Por cierto, la fuente de este script fue este mismo:

http://www.yomaster.com/archivos/publi5b.js

;D soy un ratero de codigo fuente. Jojojojo (ladron para los que no me entiendan) xD
Salomón - ·:.El Sabio habla al Necio.:·
"...despreciasteis mis consejos, no aceptasteis mis advertencias.También yo me reiré de vuestra desgracia, me burlaré cuando os invada el terror. Entonces me llamarán y no responderé, me buscarán y no me encontrarán. Porque despreciaron el saber.




Gerck

Codigo que hace que una imagen se mueva. Puede ser convinado (supongo) con el script anterior, asi podria mover la ventana y cerrarla como si fuera una ventana pop-up xD

Quote<!-- w w w . h t m l p o i n t . c o m -->

<HTML>
<HEAD>

<!-- Código descargado gratuitamente de HTMLpoint, el sitio italiano del web publishing
                                   http://www.htmlpoint.com -->

<TITLE>Ejemplos Javascript: ejemplo práctico </TITLE>


   <SCRIPT LANGUAGE="JavaScript">

      var curElement;
      function doMouseMove() {
        var newleft=0, newTop = 0
        if ((event.button==1) && (curElement!=null)) {
         
          newleft=event.clientX-document.all.OuterDiv.offsetLeft-(curElement.offsetWidth/2)
          if (newleft<0) newleft=0
          curElement.style.pixelLeft= newleft
          newtop=event.clientY -document.all.OuterDiv.offsetTop-(curElement.offsetHeight/2)
          if (newtop<0) newtop=0
          curElement.style.pixelTop= newtop
          event.returnValue = false
          event.cancelBubble = true
        }
      }
 
      function doDragStart() {
        // Don't do default drag operation.
        if ("IMG"==event.srcElement.tagName)
          event.returnValue=false;
      }
 
      function doMouseDown() {
        if ((event.button==1) && (event.srcElement.tagName=="IMG"))
          curElement = event.srcElement
      }
 
      document.ondragstart = doDragStart;
      document.onmousedown = doMouseDown;
      document.onmousemove = doMouseMove;
      document.onmouseup = new Function("curElement=null")
   

</SCRIPT>
    <SCRIPT FOR="MovingPictures" EVENT="onmousedown" LANGUAGE="JavaScript">

     
      event.cancelBubble=true
   

</SCRIPT>

</HEAD>

<BODY bgcolor="white">

<DIV id=OuterDiv style="position:relative;width:100%;height:250">
    <img ID="Pic1" STYLE="position:relative;TOP:80pt;LEFT:0pt;WIDTH:150;HEIGHT:50;Z-INDEX:22;" src="html_point_3kb.gif">
   
  </DIV>



</body>
</html>

<!-- w w w . h t m l p o i n t . c o m -->


fuente: htmlpoint.com
Salomón - ·:.El Sabio habla al Necio.:·
"...despreciasteis mis consejos, no aceptasteis mis advertencias.También yo me reiré de vuestra desgracia, me burlaré cuando os invada el terror. Entonces me llamarán y no responderé, me buscarán y no me encontrarán. Porque despreciaron el saber.




Gerck

Nadie puso solución a este post, chales, yo mismo me pregunto y me contesto.

Esto servira para futuros preguntones que posiblemente tengan esta duda.

Quote<!-- Funcion del menu flotante -->
<script type="text/javascript">
var persistclose=0 // Se coloca en 0 o 1. 1 significa que una vez que la barra es cerrada, entonces permanece cerrada en el resto de la sesión
var startX = 20 // Tamaño horizontal de la barra en pixeles
var startY = 5 // Tamaño vertical de la barra en pixeles
var verticalpos="fromtop" // "fromtop" o "frombottom" para definir si va arriba o abajo.

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

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -100000000) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}


function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<!-- Funcion del menu flotante Termina -->

<!-- Funcion del menu flotante estilos -->
<style type="text/css">

#topbar{
position:absolute;
border: 1px solid black;
padding: 5px;
background-color: white;
width: 620px;
visibility: hidden;
z-index: 400;
}

</style>
<!-- Funcion del menu flotante estilos termina -->

Contenido de la ventanita emergente, o menu flotante, depende de lo que le quieras dar uso.

Quote<div id='topbar'>
<table><tr><td><a href='' onClick='closebar(); return false'><img border='0' src='close.gif'/></a></td><th align="center" width="580">Anuncios Web</th></tr></table><hr>
<h1>CONTENIDO</h1>
</div>

Salomón - ·:.El Sabio habla al Necio.:·
"...despreciasteis mis consejos, no aceptasteis mis advertencias.También yo me reiré de vuestra desgracia, me burlaré cuando os invada el terror. Entonces me llamarán y no responderé, me buscarán y no me encontrarán. Porque despreciaron el saber.