Jquery: rendere cliccabile un intero div

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="https://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.