descrizione immagine al passaggio del mouse

**ilquaglia** · 16-11-2003, 16:27

ho un immagine, come potrei far comparire una piccola finestrella con la descrizione della tale al solo passaggio su questa?
tenete conto che questa immagine deve avere anche la possibilità di essere linkata ad una pagina con l'ingradimento...
grazie, ciao!

**meganoide** · 16-11-2003, 16:42

tag alt?

**Spaolithos** · 16-11-2003, 16:44

Nel tag img aggiungi l'attributo alt

Preso dal codice di questa pagina, da cui ti sto rispondendo:
[img]logo1.gif[/img]

Se associ un link all'immagine, ricordati di mettere border="0"
altrimenti si visualizzarà un brutto bordino blu tutto intorno ad essa...

**Federix** · 16-11-2003, 21:40

Mi dispiace contraddirvi ma l'attributo non è ALT ma TITLE, in quanto ALT, serve per scrivere il nome dell'immagine qualora questa non venisse caricata, mentre TITLE fà apparire la finestrella gialla di descrizione. Purtroppo l'attributo ALT in IE funziona in tutte e due i casi, mentre con Opera, NS, e Mozilla, se metti solamente ALT, la finestrella gialla non la vedi.

codice:

[img]image.jpg[/img]

**ilquaglia** · 21-11-2003, 22:01

ok, forse non mi sono spiegato!
mi servirebbe una descrizione immediata dell'immagine, senza dover aspettare quei pochi secondi che ti da il tag ALT (che conoscevo!)
non esiste nulla?
grazie cmq, proverò quel TITLE.

**Francis87** · 21-11-2003, 22:03

Originariamente inviato da ilquaglia
ok, forse non mi sono spiegato!
mi servirebbe una descrizione immediata dell'immagine, senza dover aspettare quei pochi secondi che ti da il tag ALT (che conoscevo!)
non esiste nulla?
grazie cmq, proverò quel TITLE.

title fa la stessa cosa, e ha lo stesso tempo di reazione.
ti servirebbe caso mai qualke script in JS! ma è sicuramente più leggera la soluzione in html senza script (devi attendere quel secondo e mezzo circa!)

*pragma · 22-11-2003, 11:27

ecco paro paro un codice copiato ed un po' riadattato (per prova)

puoi mettere un'immagine di sfondo nel box di descrizione dell'immagine

codice:

<HTML>
<HEAD>

  <STYLE>


  .ttip {border:14px solid black;font-size:12px;layer-background-color: #dcdcdc;}
#tooltip{background-image:url('nomeGig_di_Sfondo_BoxDescriz.gif');background-repeat:no-repeat;background-position: 50% 50%;}
  </STYLE>

<script>

//Script created by Jim Young (www.virgilio.it)
//Submitted to Website Abstraction (http://wsabstract.com)
//Visit http://wsabstract.com for this script

//Set the tool tip message you want for each link here.
     var tip=new Array
           tip[0]='Un po\' di testo1
 ed un altro po\'!'
           tip[1]='Un po\' di testo2
 ed un altro po\'!!'
           tip[2]= 'Un vero WebMaster sa come
Bisogna Fare'
           tip[3]='Questo, ..... 
è il sito della mia città'
           
     function showtip(current,e,num)
        {
         if (document.layers) // Netscape 4.0+
            {
             theString="<DIV CLASS='ttip'>"+tip[num]+"</DIV>"
             document.tooltip.document.write(theString)
             document.tooltip.document.close()
             document.tooltip.left=e.pageX+14
             document.tooltip.top=e.pageY+2
             document.tooltip.visibility="show"
            }
         else
           {
            if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+
              {
               elm=document.getElementById("tooltip")
               elml=current
               elm.innerHTML=tip[num]
               elm.style.height=elml.style.height
               elm.style.top=parseInt(elml.offsetTop+elml.offsetHeight)
               elm.style.left=parseInt(elml.offsetLeft+elml.offsetWidth+10)
               elm.style.visibility = "visible"
              }
           }
        }
function hidetip(){
if (document.layers) // Netscape 4.0+
   {
    document.tooltip.visibility="hidden"
   }
else
  {
   if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+
     {
      elm.style.visibility="hidden"
     }
  } 
}
</script>

</HEAD>


<BODY>

<div id="tooltip" style="position:absolute;visibility:hidden;border:1px solid lack;font-size:12px;layer-background-color:#0099ff;background-color:#0099ff; padding:21px"></div>

[img]nomeImmag.jpg[/img]


Forum di HTML


Il sito di chl


Un bel sito di Trani
</BODY>
</html>

Discussione: descrizione immagine al passaggio del mouse

Strumenti discussione

Ricerca discussione

Visualizza

descrizione immagine al passaggio del mouse

Permessi di invio