Menu horizontal avec images cliquables
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Le code se présente comme ceci :
<table border="0" width="99%" cellspacing="0" cellpadding="0">
<td width="0%" align="center" valign="middle">
<a
href="http://demomiam.canalblog.com/archives/2000/01/01/6791649.html"
title="L'Apéro"><img width="90" height="76" border="0"
src="https://storage.canalblog.com/62/36/308322/19923139.jpg"
alt="L'Apéro" /></a><br></td>
<td width="0%" align="center" valign="middle">
<a
href="http://demomiam.canalblog.com/archives/2000/01/01/6785694.html"
title="Cuisine Japonaise"><img width="90" height="76" border="0"
alt="Cuisine Japonaise"
src="https://storage.canalblog.com/30/86/308322/19923104.jpg"
/></a><br></td>
<td width="0%" align="center" valign="middle">
<a
href="http://demomiam.canalblog.com/archives/2000/01/01/6785732.html"
title="Cuisine Chinoise"><img width="90" height="76" border="0"
alt="Cuisine Chinoise"
src="https://storage.canalblog.com/77/86/308322/19955721.jpg"
/></a><br></td>
<td width="0%" align="center" valign="middle">
<a
href="http://demomiam.canalblog.com/archives/2000/01/01/6836904.html"
title="Cuisine Coréenne"><img width="90" height="76" border="0"
src="https://storage.canalblog.com/00/17/308322/19923122.jpg"
alt="Cuisine Coréenne" /></a><br></td>
<td width="0%" align="center" valign="middle">
<a
href="http://demomiam.canalblog.com/archives/2000/01/01/6785744.html"
title="Cuisine du monde"><img width="90" height="76" border="0"
src="https://storage.canalblog.com/16/04/308322/19923128.jpg"
alt="Cuisine du monde" /></a><br></td>
<td width="0%" align="center" valign="middle">
<a
href="http://demomiam.canalblog.com/archives/2000/01/01/6785760.html"
title="Cuisine bien de chez nous"><img width="90" height="76"
border="0" alt="Cuisine bien de chez nous"
src="https://storage.canalblog.com/04/48/308322/19923145.jpg"
/></a><br></td>
<td width="0%" align="center" valign="middle">
<a href="http://demomiam.canalblog.com/archives/2000/01/01/6785778.html" title="Cuisine martienne">
<img
width="90" height="76" border="0"
src="https://storage.canalblog.com/85/88/308322/19923153.jpg"
alt="Cuisine martienne" /></a><br></td>
<td width="0%" align="center" valign="middle">
<a
href="http://demomiam.canalblog.com/archives/2000/01/01/6785797.html"
title="Les desserts"><img width="90" height="76" border="0"
src="https://storage.canalblog.com/91/47/308322/19923180.jpg" alt="Les
desserts" /></a><br></td>
<td width="0%" align="center" valign="middle">
<a
href="http://demomiam.canalblog.com/archives/2000/01/01/7120985.html"
title="Les chocolats"><img width="90" height="76" border="0"
alt="Les chocolats"
src="https://storage.canalblog.com/42/33/308322/19923199.jpg"
/></a><br></td>
<td width="0%" align="center" valign="middle">
<a
href="http://demomiam.canalblog.com/archives/2000/01/01/7116109.html"
title="Hors-Sujet"><img alt="Hors-Sujet"
src="https://storage.canalblog.com/76/53/308322/19923768.jpg" width="90"
height="76" border="0" /></a><br></td>
</tr>
</table>
Chaque bloc de code est séparé par un espace et correspond à une image cliquable :
Exemple avec le premier bloc de l'Apéro :
<td width="0%" align="center" valign="middle">
<a href="http://demomiam.canalblog.com/archives/2000/01/01/6791649.html" title="L'Apéro"><img width="90" height="76" border="0" src="https://storage.canalblog.com/62/36/308322/19923139.jpg" alt="L'Apéro" /></a><br></td>
En gris c'est l'adresse de direction, la page où l'on atterri si on clique sur l'image.
En blanc c'est l'adresse entière de votre image.
Vous n'êtes obligé de mettre le title="L'Apéro" ni le alt="L'Apéro" ça permet juste d'afficher le nom du menu lorsqu'on passe la souris dessus.
Une fois que vous avez entré toutes vos données dans le menu il ne vous reste plus qu'à l'insérer au bon endroit dans votre page d'accueil et dans les autres pages du blog (pages des archives et page d'un message).
Sur la ligne <body> repérez <div id="topbar"></div> faites un retour à la ligne à la fin de ce code et collez votre menu.
Faites de nouveau un retour à la ligne pour laisser un espace entre les codes <div id="leftbar"><div class="navlinks">
Ce qui permet d'y voir plus clair...(les espaces entre les balises n'ont pas d'incidence sur le blog).
En fait votre menu doit être collé entre <div id="topbar"></div> et <div id="leftbar"><div class="navlinks">
Voila ce que ça donne dans votre page :
/http%3A%2F%2Fstorage.canalblog.com%2F67%2F71%2F794548%2F63260134_o.png)
/http%3A%2F%2Fstorage.canalblog.com%2F27%2F73%2F794548%2F59691728.png)
/http%3A%2F%2Fstorage.canalblog.com%2F53%2F03%2F255038%2F14640172.gif)
/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)