Image différente pour chaque module de la barre

Mettre une image différente comme fond pour chaque lien de la barre menu.

Insertion des images mais également adaptation de la taille du lien selon les dimensions de chaque image. Puis positionnement du texte du lien à l'aide des marges internes.
Attention l'application de marges internes impliquent une diminution de la dimension du lien, hauteur ou largeur, selon les marges verticales ou horizontales.
Si la hauteur d'un lien est height:100px, pour mettre le texte du lien en bas, il faut mettre une marge intérieure haute padding-top:80px. Si vous ne changer pas la valeur de la hauteur, la hauteur que les navigateurs interprètroront sera 100+80= 180px, donc il faut diminuer la hauteur height:20px.
Il en est de même dans la largeur width si vous vouler décaler le texte vers la droite, il faut mettre une marge intérieure droite padding-right.

Il faut également de modifier dans le CSS, la hauteur height dans la règle #barre en fonction de la hauteur de l'image, c'est à dire celle du lien avec la plus grande hauteur.

Ainsi que la largeur width dans la règle #barre, ceci en fonction des nouvelles dimensions des liens + les bordures + les espaces entre les liens. Si vous avez utilisé mon astuce, voir mon article, c'est la largeur width dans la règle #barre ul.

// sélection du bloc HTML concerné, partie barre
var menu_barre = document.getElementById("barre");

// Affectation des variables des liens existants
var lien0 = menu_barre.getElementsByTagName("a")[0];
var lien1 = menu_barre.getElementsByTagName("a")[1];
var lien2 = menu_barre.getElementsByTagName("a")[2];
var lien3 = menu_barre.getElementsByTagName("a")[3];

// Création du texte des bulles
lien0.title = "Retour à la page d'Accueil";
lien1.title = "Sommaire de tous les articles";
lien2.title = "Album photos et diaporama";
lien3.title = "Forum uniquement pour étude de son design";

// liens images et le style spécifique de chaque lien
// Premier lien

lien0.style.background="transparent";
lien0.style.backgroundImage="url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_286159_201110070109649.gif)";
lien0.style.backgroundRepeat="no-repeat";
lien0.style.width="80px";
lien0.style.paddingLeft="80px";
lien0.style.height="60px";
lien0.style.paddingTop="60px";
lien0.style.display="block";
lien0.style.color="#990066";
lien0.style.border="none";

// Deuxième lien

lien1.firstChild.data="Mes articles";
lien1.style.background="transparent";
lien1.style.backgroundImage="url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_286160_201110070126516.gif)";
lien1.style.backgroundRepeat="no-repeat";
lien1.style.width="150px";
lien1.style.paddingLeft="60px";
lien1.style.height="100px";
lien1.style.paddingTop="20px";
lien1.style.display="block";
lien1.style.color="#990066";
lien1.style.border="none";

// Troisième lien

lien2.style.background="transparent";
lien2.style.backgroundImage="url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_286161_201110070153387.gif)";
lien2.style.backgroundRepeat="no-repeat";
lien2.style.width="100px";
lien2.style.paddingLeft="70px";
lien2.style.height="90px";
lien2.style.paddingTop="30px";
lien2.style.display="block";
lien2.style.color="#990066";
lien2.style.border="none";

// quatrième lien

lien3.style.background="transparent";
lien3.style.backgroundImage="url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_286157_20111007004592.gif)";
lien3.style.backgroundRepeat="no-repeat";
lien3.style.width="80px";
lien3.style.paddingLeft="80px";
lien3.style.height="50px";
lien3.style.paddingTop="110px";
lien3.style.display="block";
lien3.style.color="#990066";
lien3.style.border="none";
// ]]></script>