Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 13
  1. #1
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154

    Description tooltip: non riesco ad eliminare l'immagine...

    Salve,
    ho trovato un javascript che fa visualizzare, quando si va sopra un link con il mouse, una sorta di popup che contiene la descrizione del link stesso.

    Qua trovate il test che ho fatto: http://www.sonsof.net/lavori/test/prova.html

    Nel file originale era inserita insieme al testo anche una immagine. Noterete la cosa utilizzando Safari o IE, e ovviamente le immagini, non essendoci, mi vegono sostituite dalla cara vecchia "x" rossa. Come faccio da javascript ad eliminare quella immagine? Non mi servono immagini nella popup, poichè mi basta il testo.
    Grassie mille,
    goat
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

  2. #2
    Utente di HTML.it L'avatar di oskaron
    Registrato dal
    Sep 2006
    Messaggi
    344
    lo togli dal javascript che hai messo

  3. #3
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154
    Si, infatti il mio problema è che di Javascript non è che ne sappia poi molto. Di seguito posto il Javascript che ho utilizzato:

    // doTooltip function
    // Assembles content for tooltip and writes
    // it to tipDiv
    /////////////////////////////////////////////////
    var t1,t2; // for setTimeouts
    var tipOn = false; // check if over tooltip link
    function doTooltip(evt,num) {
    if (!tooltip) return;
    if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
    tipOn = true;
    // set colors if included in messages array
    if (messages[num][2]) var curBgColor = messages[num][2];
    else curBgColor = tipBgColor;
    if (messages[num][3]) var curFontColor = messages[num][3];
    else curFontColor = tipFontColor;
    if (ie4||ie5||ns5) {
    var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
    tipcss.backgroundColor = curBgColor;
    tooltip.innerHTML = tip;
    }
    if (!tipFollowMouse) positionTip(evt);
    else t1=setTimeout("tipcss.visibility='visible'",100);
    }

    var mouseX, mouseY;
    function trackMouse(evt) {
    standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
    mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
    if (tipOn) positionTip(evt);
    }

    /////////////////////////////////////////////////////////////
    // positionTip function
    // If tipFollowMouse set false, so trackMouse function
    // not being used, get position of mouseover event.
    // Calculations use mouseover event position,
    // offset amounts and tooltip width to position
    // tooltip within window.
    /////////////////////////////////////////////////////////////
    function positionTip(evt) {
    if (!tipFollowMouse) {
    mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
    mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
    }
    // tooltip width and height
    var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
    var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
    // document area in view (subtract scrollbar width for ns)
    var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
    var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
    // check mouse position against tip and window dimensions
    // and position the tooltip
    if ((mouseX+offX+tpWd)>winWd)
    tipcss.left = mouseX-(tpWd+offX)+"px";
    else tipcss.left = mouseX+offX+"px";
    if ((mouseY+offY+tpHt)>winHt)
    tipcss.top = winHt-(tpHt+offY)+"px";
    else tipcss.top = mouseY+offY+"px";
    if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
    }

    function hideTip() {
    if (!tooltip) return;
    t2=setTimeout("tipcss.visibility='hidden'",100);
    tipOn = false;
    }

    document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

  4. #4
    Utente di HTML.it L'avatar di oskaron
    Registrato dal
    Sep 2006
    Messaggi
    344
    è un po un casino quello script, ho dato una rapida occhiata ma non ho visto la parte inerente l'immagine, sei sicuro ci sia solo quel file per l'utilizzo'

  5. #5
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154
    Originariamente inviato da oskaron
    è un po un casino quello script, ho dato una rapida occhiata ma non ho visto la parte inerente l'immagine, sei sicuro ci sia solo quel file per l'utilizzo'
    Si si, è solo quello che serve.
    Da li ho modificato l'aspetto della popup ma, come ti dicevo, non riesco ad evitare che mi venga richiesta anche una immagine.
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

  6. #6
    Utente di HTML.it L'avatar di oskaron
    Registrato dal
    Sep 2006
    Messaggi
    344
    li non parla di immagine da nessuna parte, puoi per favore riportare un esempio completo riportandolo tra gli appositi tag che è di piu facile lettura? grazie

  7. #7
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154
    Questo il codice html che l'esempio usa per i links:

    Codice PHP:
    <body>
    [
    url="#"]o[/url]

    [
    url="#"]o[/url]
    </
    body
    Questo il codice JavaScript che mi veniva fornito. E' identico all'esempio che ho trovato via internet e che non riesco più a reperire. Adesso lo cerco...

    Codice PHP:
    /***********************************************
    * Image w/ description tooltip- By Dynamic Web Coding ([url]www.dyn-web.com[/url])
    * Copyright 2002-2007 by Sharon Paine
    * Visit Dynamic Drive at [url]http://www.dynamicdrive.com/[/url] for full source code
    ***********************************************/

    /* IMPORTANT: Put script after tooltip div or 
         put tooltip div just before </BODY>. */

    var dom = (document.getElementById) ? true false;
    var 
    ns5 = (!document.all && dom || window.opera) ? truefalse;
    var 
    ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true false;
    var 
    ie4 = (document.all && !dom) ? true false;
    var 
    nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true false;

    var 
    origWidthorigHeight;

    // avoid error of passing event object in older browsers
    if (nodyn) { event "nope" }

    ///////////////////////  CUSTOMIZE HERE   ////////////////////
    // settings for tooltip 
    // Do you want tip to move when mouse moves over link?
    var tipFollowMousetrue;    
    // Be sure to set tipWidth wide enough for widest image
    var tipWidth160;
    var 
    offX20;    // how far from mouse to show tip
    var offY12
    var 
    tipFontFamily"Arial, Helvetica, sans-serif";
    var 
    tipFontSize"11px";
    // set default text color and background color for tooltip here
    // individual tooltips can have their own (set in messages arrays)
    // but don't have to
    var tipFontColor"#FFFFFF";
    var 
    tipBgColor"#acc917"
    var 
    tipBorderColor"#735a32";
    var 
    tipBorderWidth1;
    var 
    tipBorderStyle"ridge";
    var 
    tipPadding4;

    // tooltip content goes here (image, description, optional bgColor, optional textcolor)
    var messages = new Array();
    // multi-dimensional arrays containing: 
    // image and text for tooltip
    // optional: bgColor and color to be sent to tooltip
    messages[0] = new Array('Here is a red balloon on a white background',"Gennaio 1970
     <strong style='color:#000000;'>Nome della località[/b]
     Tanto va la gatta al lardo che ci lascia lo zampino."
    );
    messages[1] = new Array('Here is a duck on a light blue background.',"Gennaio 1980
     <strong style='color:#000000;'>Nome della località[/b]
     Larga la solglia, stretta la via, dite la vostra che ho detto la mia."
    );

    ////////////////////  END OF CUSTOMIZATION AREA  ///////////////////

    // preload images that are to appear in tooltip
    // from arrays above
    if (document.images) {
        var 
    theImgs = new Array();
        for (var 
    i=0i<messages.lengthi++) {
          
    theImgs[i] = new Image();
            
    theImgs[i].src messages[i][0];
      }
    }

    // to layout image and text, 2-row table, image centered in top cell
    // these go in var tip in doTooltip function
    // startStr goes before image, midStr goes between image and text
    var startStr '<table width="' tipWidth '"><tr><td align="center" width="100%"><img src="';
    var 
    midStr '" border="0"></td></tr><tr><td valign="top">';
    var 
    endStr '</td></tr></table>';

    ////////////////////////////////////////////////////////////
    //  initTip    - initialization for tooltip.
    //        Global variables for tooltip. 
    //        Set styles
    //        Set up mousemove capture if tipFollowMouse set true.
    ////////////////////////////////////////////////////////////
    var tooltiptipcss;
    function 
    initTip() {
        if (
    nodyn) return;
        
    tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
        
    tipcss tooltip.style;
        if (
    ie4||ie5||ns5) {    // ns4 would lose all this on rewrites
            
    tipcss.width tipWidth+"px";
            
    tipcss.fontFamily tipFontFamily;
            
    tipcss.fontSize tipFontSize;
            
    tipcss.color tipFontColor;
            
    tipcss.backgroundColor tipBgColor;
            
    tipcss.borderColor tipBorderColor;
            
    tipcss.borderWidth tipBorderWidth+"px";
            
    tipcss.padding tipPadding+"px";
            
    tipcss.borderStyle tipBorderStyle;
        }
        if (
    tooltip&&tipFollowMouse) {
            
    document.onmousemove trackMouse;
        }
    }

    window.onload initTip;

    /////////////////////////////////////////////////
    //  doTooltip function
    //            Assembles content for tooltip and writes 
    //            it to tipDiv
    /////////////////////////////////////////////////
    var t1,t2;    // for setTimeouts
    var tipOn false;    // check if over tooltip link
    function doTooltip(evt,num) {
        if (!
    tooltip) return;
        if (
    t1clearTimeout(t1);    if (t2clearTimeout(t2);
        
    tipOn true;
        
    // set colors if included in messages array
        
    if (messages[num][2])    var curBgColor messages[num][2];
        else 
    curBgColor tipBgColor;
        if (
    messages[num][3])    var curFontColor messages[num][3];
        else 
    curFontColor tipFontColor;
        if (
    ie4||ie5||ns5) {
            var 
    tip startStr messages[num][0] + midStr '<span style="font-family:' tipFontFamily '; font-size:' tipFontSize '; color:' curFontColor ';">' messages[num][1] + '</span>' endStr;
            
    tipcss.backgroundColor curBgColor;
             
    tooltip.innerHTML tip;
        }
        if (!
    tipFollowMousepositionTip(evt);
        else 
    t1=setTimeout("tipcss.visibility='visible'",100);
    }

    var 
    mouseXmouseY;
    function 
    trackMouse(evt) {
        
    standardbody=(document.compatMode=="CSS1Compat")? document.documentElement document.body //create reference to common "body" across doctypes
        
    mouseX = (ns5)? evt.pageXwindow.event.clientX standardbody.scrollLeft;
        
    mouseY = (ns5)? evt.pageYwindow.event.clientY standardbody.scrollTop;
        if (
    tipOnpositionTip(evt);
    }

    /////////////////////////////////////////////////////////////
    //  positionTip function
    //        If tipFollowMouse set false, so trackMouse function
    //        not being used, get position of mouseover event.
    //        Calculations use mouseover event position, 
    //        offset amounts and tooltip width to position
    //        tooltip within window.
    /////////////////////////////////////////////////////////////
    function positionTip(evt) {
        if (!
    tipFollowMouse) {
            
    mouseX = (ns5)? evt.pageXwindow.event.clientX standardbody.scrollLeft;
            
    mouseY = (ns5)? evt.pageYwindow.event.clientY standardbody.scrollTop;
        }
        
    // tooltip width and height
        
    var tpWd = (ie4||ie5)? tooltip.clientWidthtooltip.offsetWidth;
        var 
    tpHt = (ie4||ie5)? tooltip.clientHeighttooltip.offsetHeight;
        
    // document area in view (subtract scrollbar width for ns)
        
    var winWd = (ns5)? window.innerWidth-20+window.pageXOffsetstandardbody.clientWidth+standardbody.scrollLeft;
        var 
    winHt = (ns5)? window.innerHeight-20+window.pageYOffsetstandardbody.clientHeight+standardbody.scrollTop;
        
    // check mouse position against tip and window dimensions
        // and position the tooltip 
        
    if ((mouseX+offX+tpWd)>winWd
            
    tipcss.left mouseX-(tpWd+offX)+"px";
        else 
    tipcss.left mouseX+offX+"px";
        if ((
    mouseY+offY+tpHt)>winHt
            
    tipcss.top winHt-(tpHt+offY)+"px";
        else 
    tipcss.top mouseY+offY+"px";
        if (!
    tipFollowMouset1=setTimeout("tipcss.visibility='visible'",100);
    }

    function 
    hideTip() {
        if (!
    tooltip) return;
        
    t2=setTimeout("tipcss.visibility='hidden'",100);
        
    tipOn false;
    }

    document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>'
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

  8. #8
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

  9. #9
    Utente di HTML.it L'avatar di oskaron
    Registrato dal
    Sep 2006
    Messaggi
    344
    codice:
    if (document.images) {
        var theImgs = new Array();
        for (var i=0; i<messages.length; i++) {
          theImgs[i] = new Image();
            theImgs[i].src = messages[i][0];
      }
    }
    Eccolo qui credo sia colpa sua

  10. #10
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154
    Codice PHP:
    // tooltip content goes here (image, description, optional bgColor, optional textcolor)
    var messages = new Array();
    // multi-dimensional arrays containing:
    // image and text for tooltip
    // optional: bgColor and color to be sent to tooltip
    messages[0] = new Array('Here is a red balloon on a white background',"Gennaio 1970
     <strong style='color:#000000;'>Nome della località[/b]
     Tanto va la gatta al lardo che ci lascia lo zampino."
    );
    messages[1] = new Array('Here is a duck on a light blue background.',"Gennaio 1980
     <strong style='color:#000000;'>Nome della località[/b]
     Larga la solglia, stretta la via, dite la vostra che ho detto la mia."
    ); 
    Infatti qua mi dice che dentro il tooltip mi vengono inserite: image, description, optional bgColor, optional textcolor. La cosa è anche carina, ma per l'uso che devo farne non ho necessità che mi carichi "image".

    M'è stato consigliato di usare un if per dire al JavaScript che se c'è l'immagine me la faccia vedere, e se non c'è non mi venga caricato nulla. Però io d'immagini non ne avrò mai, quindi l'ideale sarebbe modificare il codice in maniera tale che non mi chieda mai nessuna immagine.
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.