Text only | Text with Images

HackPR.NET

Webmasters => Desarrollo Web => Topic started by: Gerck on March 26, 2009, 04:49:21 AM

Title: ¿Como coloco ventanitas con html?
Post by: Gerck on March 26, 2009, 04:49:21 AM
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.
Title: Re: ¿Como coloco ventanitas con html?
Post by: Gerck on March 26, 2009, 04:51:49 AM
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
Title: Re: ¿Como coloco ventanitas con html?
Post by: Gerck on March 26, 2009, 04:54:39 AM
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
Title: Re: ¿Como coloco ventanitas con html?
Post by: Gerck on March 26, 2009, 05:03:39 AM
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
Title: Re: ¿Como coloco ventanitas con html?
Post by: Gerck on June 10, 2009, 11:48:53 AM
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>

Text only | Text with Images