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.

 

<script type="text/javascript">// <![CDATA[

// 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>

 

 

 

 

Voir également les articles :

...



26/12/2010
3 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso