Menu horizontal avec photo et couleur du lien actif changeantes

Ce post doit être ouvert seul pour fonctionner correctement!!!
Exemple:

Code:

<STYLE> 
.link A { COLOR: #455a87; TEXT-DECORATION: underline} /* Rule 1 of embedded stylesheet */ 
.link A.bouton { BORDER-RIGHT: #868686 3px solid;
BORDER-TOP: #dbdbdb 3px solid;
DISPLAY: inline; /*block; */
FLOAT: left;
FONT-WEIGHT: bold;
BACKGROUND: #b9b9b9;
BORDER-LEFT: #dbdbdb 3px solid;
WIDTH: 175px;
BORDER-BOTTOM: #868686 3px solid;
TEXT-ALIGN: center;
TEXT-DECORATION: none} 
.link a.bouton:hover 
{
background-color: #FF6600;
border-top:4px #FFCC00 solid;
border-left:4px #FFCC00 solid;
border-bottom:2px #CC0000 solid;
border-right:2px #CC0000 solid;
}
.link
{
clear:both;
float:none;
display:block;
}

</STYLE>

<img border="0" name="imagename" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6sTCw5G8RGG3sCKPzOS6ACewfaQRx4pLgnMu0tOSfVark7kWIffwgXZEaFHvBYyV_H4ce7Y6nux3VBrWrp8VqEJiI_G43MTNGaeejOQuG3cwq0FcqQwrg8QMp8M6L1PuVEkaHyhpGgI/s1600/Site.jpg"width="356" height="286" />
<div class="link">

<a href="http://best-off-ps3.blogspot.com" class="bouton" onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image1.src" target="new">Jeux Playstation 3</a>
<a href="http://art-olivier.blogspot.com/" class="bouton" onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image2.src" target="new">Creations graphiques</a>
</div>
<div class="link">
<a href="http://mister-idiot.blogspot.com/"class="bouton"  onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image3.src" target="new">Videos amusantes</a> 
<a href="http://les-10-meilleurs.blogspot.com/"class="bouton"  onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image4.src" target="new">Jeux videos</a>
</div>

<STYLE> 
.link A { COLOR: #455a87; TEXT-DECORATION: underline} /* Rule 1 of embedded stylesheet */ 
.link A.bouton1 { BORDER-RIGHT: #868686 3px solid;
BORDER-TOP: #dbdbdb 3px solid;
DISPLAY: inline; /*block; */
FLOAT: left;
FONT-WEIGHT: bold;
BACKGROUND: #b9b9b9;
BORDER-LEFT: #dbdbdb 3px solid;
WIDTH: 356px;
BORDER-BOTTOM: #868686 3px solid;
TEXT-ALIGN: center;
TEXT-DECORATION: none} 
.link a.bouton1:hover 
{
background-color: #FF6600;
border-top:4px #FFCC00 solid;
border-left:4px #FFCC00 solid;
border-bottom:2px #CC0000 solid;
border-right:2px #CC0000 solid;
}
.link
{
clear:both;
float:none;
display:block;
} 
</STYLE>

<div class="link">
<a href="http://optimisation-blogger.blogspot.com/"class="bouton1" onmouseout="document.imagename.src=image0.src" onmouseover="document.imagename.src=image5.src">Optimisation-blogger</b></a>
</div>

Menu horizontal photo couleur lien change

2 commentaires:

Nicolas a dit…: Bonjour, merci beaucoup pour votre blog avec les nombreux tuto que vous proposez.
Je suis tout particulièrement intéressé par vos menu.

J'ai mis en place celui sur cette page sur mon blog que je suis en train de créer sur la cuisine.
Est il possible de modifier la taille de ce menu en largeur et en hauteur afin qu'il s'intègre au mieux sur le haut de mon blog ? Je souhaiterai qu'il occupe toute la largeur du haut pour faire une bande comme un menu avec en bonus l'image changeable.

Merci par avance pour votre réponse
Cordialement un nouveau blogger !; 2 juillet 2014 à 08:20
moi a dit…: merci bien pour les astuce; 19 mai 2016 à 09:54

Menu horizontal avec photo et couleur du lien actif changeantes

2 commentaires:

Enregistrer un commentaire