Link Boxes. Css + Dom

Webdesign.

Post interessante. Link Boxes di “Ask the css Guy” (ovvero: chiedi all’uomo dei css. Il blog si chiama così. Il post è in inglese.)

(Grazie a un bookmark su del.icio.us di Marco Rosella🙂

Ecco una specie di riassunto del post (idee e implementazioni dell’autore, a cui vanno tutti i meriti del caso).

Questione: ho un box, con dentro un titolo e un breve testo, e voglio che sia tutto cliccabile.
Soluzione pratica via css: rendo l’intero div un link, ovvero un <a>. Problema: dentro un <a> non posso infilare roba tipo <h3> e <p>. Soluzione: qualcosa del tipo <a> <span class=”h3″>titolo</span> e idem per il paragrafo. Poi nel foglio di stile setto i miei span come display: block. OK.

E’ un po’ un “workaround” – un aggirare l’ostacolo. Soluzione pulita ma semanticamente parlando non è il massimo.

Alternativa: usare il DOM.

Il mio box (i miei box) diventano, giustamente, dei div, a cui assegno una classe <div class=”linkbox”><h3>titolo</h3><p>testo</p></div>. Nel mio div del box aggiungo però anche un paragrafo in cui vado a metterre il mio link (volevo box link, ovvero cliccabili, no?). Un paragrafo a cui assegno una classe. Quindi avremo:

<div class=”linkbox”><h3>titolo</h3><p>testo</p><p class=”continua”><a href=”#”>leggi oltre</a></div>.

Cosa vogliamo fare a questo punto via DOM?

  • cercare al caricamento della pagina i div con classe “linkbox”
  • dentro questi div cercare il paragrafo con classe “continua”, il quale contiene un link
  • prendere l’attributo di quel link (l’indirizzo) e legarlo all’evento onclick del div
  • approfittarne per nascondere il paragrafo “continua”
  • per evidenziare il fatto che il div (ovvero il box) è cliccabile, aggiungere una classe “hovering” ai div della classe “linkbox” – tramite cui aggiungere un effetto di rollover, via css.

The CSS Guy prende a questo punto in prestito alcune funzioni js della libreria ES, aggiunge qualcosina di suo e arriva al suo esempio concreto.

Il sorgente della pagina contiene tutto il codice usato, funzioni js e stili css.

Ho provato a fare qualcosa di simile. Ho preso uno dei 40 layout di Layout Gala, gli ho dato un’aggiustatina. E ho fatto la mia prova pratica. (A me piace😉

Un link al mio esempio.

In ogni caso, quella proposta è solo una delle tecniche possibili per raggiungere lo stesso risultato. Si vedano i commenti al post originale di Ask the CSS Guy per alcune alternative. Segnalo in particolare questa. Solo css. Clean.

4 risposte a Link Boxes. Css + Dom

  1. Gabriele scrive:

    Io ho trovato questi due tutorial che mi sembrano molto interessanti e forse precedenti:

    http://www.sickbrain.org/?document_id=108&topic_id=8&page=0

    http://www.sickbrain.org/?document_id=89&topic_id=8&page=0

    Sempre fra l’utilissimo sickbrain.org.

  2. carl0z scrive:

    Ciao Gabriele,
    grazie per la segnalazione🙂 Effettivamente entrambi gli esempi di Egidio su Sickbrain sono precedenti, cronologicamente, a quello del CssGuy. Sono soluzioni alternative, tutte direi (molto) interessanti.
    Mi piace molto in particolare l’esempio con immagine e link dentro un intero box cliccabile (e con effetto sul bordo, piuttosto che di altro tipo – es cambio di background). Che è una soluzione + semplice di quella proposta dal CssGuy. Lui però specifica che la sua è una risposta diciamo così semanticamente + corretta / coerente alla necessità di rendere cliccabile un box con dentro qualcosa tipo liste, titoli, sottomenu (e difatti dice: possiamo anche volendo scrivere del codice semanticamente meno corretto, ma che poi abbia un supporto via css, senza dom).

    ciao – carloz

  3. marco scrive:

    Grazie per la citazione Carl0z! (un errore che fanno in molti: il mio cognome è Rosella con una sola ‘s’😉 ) Ciao!

  4. carl0z scrive:

    @marco: ops, scusa😐 correggo subito (anche questo: https://carl0z.wordpress.com/2007/05/01/web-design-premi-e-sondaggi/ :-))

    ciao
    carloz

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: