Come mostrare più testi con link cliccabili sopra un foto.

Come mostrare 2, 3, 4, ecc link cliccabili sopra una foto con HTML e CSS per mostrare una immagine collegata a più pagine web.

In questo articolo vedremo come utilizzando il linguaggio HTML e CSS si possa mostrare uno o più testi cliccabili sopra una immagine. Questa soluzione può essere utile quando si vogliano aggiungere più collegamenti sopra a una stessa foto.

Poniamo che una stessa immagine sia rappresentativa di 2, 3 o 4 articoli che abbiamo scritto sullo stesso tema. Potrebbe essere utile mostrare ai lettori i titoli dei vari post sopra alla stessa immagine ciascuno con il link appropriato. Questa personalizzazione è da considerarsi una evoluzione dell'articolo che ho scritto per visualizzare un testo sopra una foto con il CSS.

Quello che occorre è avere una foto da caricare online oppure che sia stata già caricata e di cui si conosca l'URL diretto. Se non lo si fosse ancora fatto si può caricare la foto in oggetto su Google Foto per poi scegliere uno di questi 4 metodi per ricavarne l'hotlink.

Per questa operazione si utilizzano i tag position:absolute; e position:relative; in modo da posizionare correttamente il testo sopra a una immagine. Per questioni euristiche mostrerò un codice immediatamente utilizzabile che poi potrà essere modificato e personalizzato a piacere.

Se noi incolliamo in una pagina web in Modalità HTML questo codice

<style>
.immagine {
   position: relative;   
   width: 100%;
}
.immagine h4 {
   position: absolute;
   color: #00f;
   font: bold 16px Georgia;        
   top: 60px;
   left:40px;  
   width: 100%;
}
.immagine h3 {
position:absolute;
font:bold 18px Georgia;
color:#F0F;
top:30px;
left:40px;
width:100%,
}
.immagine h4 a {
text-decoration:none;
}
.immagine h4 a:hover {color: orange;}
</style>
<div class="immagine">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8thG2Z_1iDFUl6jZLaA5LeHs_L-t0pV_JzDGf8Ty1ldK2a6ieFVKMCt7vKaWDzr6CBcU7MgNNhb60dCuk7ApKnZ38mDdN3arUNj5_sWkhHErwEOXMPzjYeaDLDnyexwSnP58vzAdQ7xg/" alt="testo alternativo" />
      <h3>GUIDE PER BLOGGER</h3>
      <h4><a href="http://www.ideepercomputeredinternet.com/2014/03/blogger-tutorial-list.html" target="_blank">13° Raccolta di Tutorial per Blogger</a><br/>
      <a href="http://www.ideepercomputeredinternet.com/2015/03/blogger-tutorial.html" target="_blank">14° Raccolta di Tutorial per Blogger</a><br/>
      <a href="http://www.ideepercomputeredinternet.com/2015/04/blogger-tutorial.html" target="_blank">15° Raccolta di tutorial per Blogger</a><br/>
      <a href="http://www.ideepercomputeredinternet.com/2015/09/blogger-guide-tutorial-raccolta.html" target="_blank">16° Raccolta di tutorial per Blogger</a><br/>
      <a href="http://www.ideepercomputeredinternet.com/2016/03/elenco-di-1700-post-di-guide-e-tutorial.html" target="_blank">17° Raccolta di tutorial per Blogger</a><br/>
      <a href="http://www.ideepercomputeredinternet.com/2016/08/blogger-tutorial-guide-elenco.html" target="_blank">18° Raccolta di tutorial per Blogger</a></h4>
</div>

otterremo questo risultato

GUIDE PER BLOGGER

13° Raccolta di Tutorial per Blogger

14° Raccolta di Tutorial per Blogger

15° Raccolta di tutorial per Blogger

16° Raccolta di tutorial per Blogger

17° Raccolta di tutorial per Blogger

18° Raccolta di tutorial per Blogger

Ricordo che:

1. Si possono personalizzare i codici dei colori, lo stile del bordo e la famiglia dei font.
2. I tag top e left servono per settare la distanza dei testi dalla parte alta e dalla sinistra
3. L'URL colorato di rosso è l'hotlink della immagine di sfondo
4. Gli URL colorati di viola rappresentano i collegamenti delle varie righe di testo
5. Il testo evidenziato di giallo è il titolo ed è senza link cliccabile
6. I testi colorati di blu sono gli anchor text visibili sopra alla foto
7. Il tag <br/> è quello che determina il salto di riga
8. Il tag target="_blank" è opzionale e serve per aprire il link in un'altra scheda del browser
9. I tag <h3> e <h4> servono per diversi colori e dimensioni di link e titolo
10. text-decoration:none; serve per non visualizzare la sottolineatura nei link
11. Il codice può essere incollato in un post o in un widget HTML/Javascript.