collegamento ipertestuale su div

**f.domenella** · 10-04-2007, 15:49

è possibile inserire un collegamento ipertestuale su un div; o meglio se io ho un div e vorrei che quando l'utente ci passa sopra gli compaia la manina e se clicca visita la pagina a.php?

**salasir** · 10-04-2007, 17:06

La prima cosa che mi viene in mente è che qualsiasi <div> è fatto per delimitare una zona della pagina che contiene qualcosa.

Quindi, non si può legare il link a questo qualcosa, testo o immagine?

Oppure non ho capito niente.

**f.domenella** · 10-04-2007, 17:09

forse non sono stato chiarissimo, cmq hai capito bene non sai se è possibile legare al div un link?

**salasir** · 10-04-2007, 17:12

Che io sappia no, anche perchè se la sezione in questione è vuota, in pratica non esiste ... :master:

Mi spieghi cosa stai cercando di ottenere? Con un po' di codice magari ...

**f.domenella** · 10-04-2007, 17:33

ora ti spiego, ho n div con la stessa immagine di sfondo e del testo dentro vorrei che quando passo sopra un div mi cambi immagine di sfondo e vorrei avere la possibilità di cliccare su qualsiasi punto del div e non solo sul testo per essere mandato in un'altra pagina.

non so se mi sono spiegato bene

**salasir** · 11-04-2007, 10:08

Si potrebbe fare così:

codice:

<style type="text/css">
#prova { background: url(greenshadow.png); }
#prova a { display:block; }
#prova a:hover { background: url(orangeshadow.png); }
</style>

<body>

<div id="prova">
<a href="#">
Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo
Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo
Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo 
Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo 
Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo 
Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo 
Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo </a>
</div>

Comunque devi inserire un tag <a> se vuoi saltare ad un'altra pagina.

**pierofix** · 11-04-2007, 11:06

Io farei un ragionamento un po' più articolato.

Partiamo dall'assunto che ogni marcatore ha un significato ed una funzione ben precisi. Div sta per 'division', ovvero 'macroarea'. Serve semplicemente come contenitore per sub-strutturare una certa porzione di documento che si distingue da un'altra per criteri che possono essere arbitrari. E' fondamentale ricordare che quando parliamo di HTML ci riferiamo al significato e non alla presentazione. Sulla base di ciò, un div non può fungere da collegamento ipertestuale (fino all'avvento di XHTML 2, perlomeno

).

Ci occorre pertanto prevedere un'altra strada. Mi viene in mente javascript. Bene: vediamo di progettare uno script adatto, ricordandoci - questo è importantissimo - che la pagina dovrà comunque essere accessibile (quindi il link dovrà essere funzionante) anche nel caso in cui lo script sia disabilitato.

Ora, per proseguire mi dovrò servire di un esempio concreto. Cercherò di essere il più generico possibile in modo che poi tu possa adattarlo alle tue esigenze. Poniamo dunque il caso di una situazione del genere:

codice:

<div class="informazione">
   <h3>
      Corteo nazionale
   </h3>
   


      E' del 10 aprile la notizia che il corteo...
      [img]corteo.jpg[/img]
   </p>
</div>
<div class="informazione">
   <h3>
      Le prime fragole
   </h3>
   


      La stagione estiva si avvicina e...
      [img]fragola.jpg[/img]
   </p>
</div>

Nota come il link di destinazione è già all'interno del markup, anche se relativo al solo titolo della notizia. Ora, per estendere tale link a tutta l'area del div, avremo:

codice:

window.onload = function()
{
   // Preleviamo tutti i div a cui ci interessa applicare il nostro effetto.
   // Io li ho identificati nel mark-up con la classe 'informazione'
   var divs = document.getElementsByTagName('div')
   var informazioni = new Array()
      for (var i = 0; i < divs.length; i++)
      {
         if ( divs.item(i).className == 'informazione' )
         {
            informazioni.push(divs.item(i))
         }
      }

   // Creiamo una funzione che legga il link
   // e lo attribuisca all'intero div
   function attribuisci_link(elemento)
   {
      var titolo = elemento.getElementsByTagName('h3').item(0)
      var collegamento = titolo.getElementsByTagName('a').item(0)
      var collegamento_link = collegamento.getAttribute('href')

      elemento.onclick = function()
      {
         location.href = collegamento_link
      }

      elemento.onmouseover = function()
      {
         this.className += ' over'
      }
      elemento.onmouseout = function()
      {
         this.className = this.className.replace(' over', ' ')
      }
   }

   // Attribuiamo la funzione a tutti
   // i div interessati
   for (var i = 0; i < informazioni.length; i++)
   {
      attribuisci_link(informazioni[&#105;])
   }
}

Nel CSS, poi, crea la classe 'over'. Con essa andrai a decidere come visualizzare i div quando il mouse vi passerà sopra:

codice:

.over
{
   border:3px solid #CCC;
   background-color:#F4F4F4;
   cursor:pointer;
}

Guarda se può fare al caso tuo (copia-incolla il codice in un documento vuoto).

P.S. Evviva gli script non intrusivi e che lasciano il documento accessibile.

**f.domenella** · 11-04-2007, 11:14

ho provato lo script ma non funziona

**pierofix** · 11-04-2007, 11:16

Ho apportato una piccola modifica un attimo fa (il forum ha un piccolo bug nel riconoscimento del VBCode nel codice). Prova adesso.

**f.domenella** · 11-04-2007, 11:22

bellissima cosa, ora funziona alla grande.
grazie questa penso sia una gran bella cosa

ho anche testato la compatibilità con firefox 2, ie6, ie7 e opera.

Discussione: collegamento ipertestuale su div

Strumenti discussione

Ricerca discussione

Visualizza

collegamento ipertestuale su div

Permessi di invio