Cime di Web

Web, informatica, seo, siti, curiosità. Pillole di informatica e non solo…

Web e affini

Come aggiungere LINK HREF a un DIV in HTML con JAVASCRIPT

Spesso ci capita di voler rendere un intero blocco html linkabile. Sappiamo bene, però, che l’elemento <a>, che in html ci aiuta a inserire un link, è un elemento inline e non un elemento di blocco.

In pratica, se avessimo qualcosa tipo

<div id=”nome-id-div”> <a href=”www.google.it> Clicca qui </a> </div> esempio ->

solo la parola “Clicca qui” sarebbe linkata. Mentre se facessimo qualcosa tipo

<a href=”www.google.it><div id=”nome-id-div”> Clicca qui  </div> </a> esempio->

Clicca qui
noterete che è linkato nulla.
Questo a dimostrazione che il tag html <a> non è utilizzabile sugli elementi di blocco.

Come creare un div con href

Ci viene in aiuto il codice in javascript, per esempio

<script>

<script type=”text/javascript”>
document.getElementById(“nome-id-div”).setAttribute(‘onclick’, ‘location.href = “www.google.it”‘);

</script>

In pratica grazie allo script andremo ad agire sul documento html alla ricerca dell’elemento con id in parentesi e attribuiremo l’onlick.

come aggiungere link href a div
come aggiungere link href a div

Dove inserire il codice javascript per rendere un div linkabile

Il mio consiglio è come sempre inserirlo nel footer in quanto non è un codice utile nello head. Va benissimo caricarlo alla fine del documento.

 

Antonio Sisto

Consulente informatico di Bari, creo siti web per piccole e medie imprese e privati. Gestisco la loro comunicazione classica e digitale (passando dal cartaceo ai social e web). Sono un webmaster con la passione per il marketing tecnologico e digitale, e una spiccata dose di abilità nella comunicazione politica. Realizzo anche ecommerce, grafiche, video e foto e sopratutto curo le campagne pubblicitarie digitali. Se cerchi la creazione di siti web a Bari, un webmaster specializzato nello sviluppo di siti web, ecommerce, social, campagne pubblicitarie, seo & sem, rebranding, allora contattami..

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *