disign.it | Jquery: rendere cliccabile un intero div | a digital sign for a best design!
A digital sign for a best design
Javascript 4.517 visualizzazioni

Jquery: rendere cliccabile un intero div

25/10/2011

Con utilizzo corretto delle immagini attraverso i CSS dovremmo impostare tutte le immagini non inerenti il contenuto della nostra pagina come sfondi dei div. Questa tecnica ha come controindicazione la non cliccabilità delle immagini stesse, elemento che costringe spesso a trovare rocambolesche soluzioni con i CSS.
Anche in questo caso la libreria Jquery ci offre una soluzione semplice e leggera!
Per iniziare nell'head del nostro documento carichiamo la libreria jquery.min.js, poi definiamo la regola CSS per impostare dimensionie caratteristiche del DIV da rendere cliccabile (senza dimenticare di impostare il cursore al classico aspetto di pointer), ed infine -dopo il caricamento del DIV in cui inseriamo il link di riferimento vuoto- la chiamata Jquery che rende cliccabile l'intera area.

Riassumendo gli step:
1) chiamata Jquery remoto:
[script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"][/script]

2) impostazione css (con immagine di sfondo, qui non inserita per brevità)
.mioDiv {
    width: 500px;
    height: 500px;
    background-color: #999;
    cursor: pointer;
}

3) inserimento nell'html del div con link
[div class="mioDiv"]
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     [a href="all_click.txt"][/a]
[/div]

4) chiamata Jquery
                [script type="text/javascript"]
                $(".mioDiv").click(function(){
                 window.location=$(this).find("a").attr("href");
                 return false;
                });
                [/script]
               
Esempio e codice qui.

← Indesign CSS4 EPUB Tipografia web: come sillabare i testi giustificati →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.