training rosa
🔥25% DESCUENTO🔥 HOSTING WORDPRESS Grupo SEO TELEGRAM [Click Aquí]
Resultados 1 al 2 de 2
Tema:

Una manito con JS

  1. #1
    Avatar de TaLu
    TaLu está desconectado Registrado
    Rango: Soy accionista de Google!!

    User Info Menu

    Question Una manito con JS

    Buenas, a ver si algún colega amigo me puede dar una mano con un código JS bastante simple pero como no me manejo mucho con el lenguaje se me complico.

    Es un js que carga una especie de alt (tooltip) al pasar por encima de un <a> pero yo en realidad preferiría que fuera al hacer click en el <a> y no en el evento onmouseover, intente cambiar por onclick pero no funciona bien, también debería quedar fijo y no seguir al mouse. Pego el código:

    Código:
    <script language="JavaScript" type="text/JavaScript">
    
    //Edit the informaiton between the quotes below with the path to your image.
    var imagePath = "images/tooltiparrow.gif";
    
    function addwarning(){
    var thealinks = document.getElementsByTagName("a");
    if (!thealinks) { return; }
    
    for(var x=0;x!=thealinks.length;x++){
    
    if(thealinks[x].className == "addToolTip"){
    thealinks[x].setAttribute("tooltiptext",thealinks[x].title);
    thealinks[x].removeAttribute("title");
    thealinks[x].onmouseover=function gomouseover(){ddrivetip(this.getAttribute("tooltiptext"))};
    thealinks[x].onmouseout=function gomouseout(){hideddrivetip();};
    }
    }
    }
    
    var offsetfromcursorX=-7; //Customize x offset of tooltip
    var offsetfromcursorY=23; //Customize y offset of tooltip
    
    var offsetdivfrompointerX=13; //Customize x offset of tooltip DIV relative to pointer image
    var offsetdivfrompointerY=13; //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).
    
    document.write('<div id="theToolTip"></div>'); //write out tooltip DIV
    document.write('<img id="ToolTipPointer" src="'+imagePath+'">'); //write out pointer image
    
    var ie=document.all;
    var ns6=document.getElementById && !document.all;
    var enabletip=false;
    if (ie||ns6) {
    	var tipobj=document.all? document.all["theToolTip"] : document.getElementById? document.getElementById("theToolTip") : "";
    }
    
    var pointerobj=document.all? document.all["ToolTipPointer"] : document.getElementById? document.getElementById("ToolTipPointer") : "";
    
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
    }
    
    function ddrivetip(thetext, thewidth, thecolor){
    if (ns6||ie){
    if (typeof thewidth!=="undefined") {tipobj.style.width=thewidth+"px";}
    if (typeof thecolor!=="undefined" && thecolor!=="") {tipobj.style.backgroundColor=thecolor;}
    tipobj.innerHTML=thetext;
    enabletip=true;
    return false;
    }
    }
    
    function positiontip(e){
    if (enabletip){
    var nondefaultpos=false;
    var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
    var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
    //Find out how close the mouse is to the corner of the window
    var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20;
    var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20;
    
    var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX;
    var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY;
    
    var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000;
    
    //if the horizontal distance isn't enough to accomodate the width of the context menu
    if (rightedge<tipobj.offsetWidth){
    //move the horizontal position of the menu to the left by it's width
    tipobj.style.left=curX-tipobj.offsetWidth+"px";
    nondefaultpos=true;
    }
    else if (curX<leftedge)
    {tipobj.style.left="5px";}
    else{
    //position the horizontal position of the menu where the mouse is positioned
    tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px";
    pointerobj.style.left=curX+offsetfromcursorX+"px";
    }
    
    //same concept with the vertical position
    if (bottomedge<tipobj.offsetHeight){
    tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px";
    nondefaultpos=true;
    }
    else{
    tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px";
    pointerobj.style.top=curY+offsetfromcursorY+"px";
    }
    tipobj.style.visibility="visible";
    if (!nondefaultpos) {pointerobj.style.visibility="visible";}
    else{
    pointerobj.style.visibility="hidden";}
    }
    }
    
    function hideddrivetip(){
    if (ns6||ie){
    enabletip=false;
    tipobj.style.visibility="hidden";
    pointerobj.style.visibility="hidden";
    tipobj.style.left="-1000px";
    tipobj.style.backgroundColor='';
    tipobj.style.width='';
    }
    }
    
    document.onmousemove=positiontip;
    addwarning();
    </script>
    Acá esta el post del autor: http://codylindley.com/Javascript/21...ool-tip-script y el ejemplo con todo el código: http://codylindley.com/blogstuff/js/tooltip/tooltip.htm por si alguien lo quiere usar.

    Saludos y muchas gracias por la mano

  2. #2
    animal está desconectado Registrado
    Rango: Google es mi amigo

    User Info Menu

    Predeterminado

    Necesitas usar si o si ese script?
    ACA tenes uno en el que podes controlar en que evento queres el tip.

Temas Similares

  1. Una manito me pueden dar?
    Por Balthier en el foro Webmasters Porno
    Respuestas: 4
    Último Mensaje: 14/11/2007, 22:49

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •  
Has visto el post " Una manito con JS" que está en esta URL y ha sido creado por el usuario TaLu. Esperamos que te haya sido de utilidad el artículo " Una manito con JS" que inició el usuario TaLu de Soywebmaster.com.

Otros Foros de Interés

Curso SEO - Foro SEO - Foro Programacion - Foro Diseño Web - Intercambio de Enlaces - Negocios por Internet - Como Ganar Dinero - Foro Hosting - Foro Apuestas Deportivas

ÚLTIMOS ARTÍCULOS DEL BLOG SEO DE DAVID AYALA

Safecont: Una herramienta SEO diferente
MEGA GUÍA SEO AutoPilot (Link Building Automático)
Webinar: SEO para Ecommerce (Con Marc Cruells)
Webinar: SEO Técnico y Otras “Delicatessen” (Con Alvaro Rondón)
Usamos cookies que analizan hábitos de comportamiento y navegación que aceptas al navegar aquí. Política de privacidad | Cookies | Aviso legal