Menu vertical avec photo et couleur du lien actif changeantes

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

Jeux Playstation 3 Creations graphiques Videos amusantes Jeux videos Optimisation-blogger

Code:

<script language="javascript"> if (document.images) { image0 = new Image image1 = new Image image2 = new Image image3 = new Image image4 = new Image image5 = new Image image0.src = " https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6sTCw5G8RGG3sCKPzOS6ACewfaQRx4pLgnMu0tOSfVark7kWIffwgXZEaFHvBYyV_H4ce7Y6nux3VBrWrp8VqEJiI_G43MTNGaeejOQuG3cwq0FcqQwrg8QMp8M6L1PuVEkaHyhpGgI/s1600/Site.jpg" image1.src = " https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoIkbXYNyyCmQ-lcOCzsfMTjvvUZkjodc3GrIMG2gdn2r6H0QkNGTxUiO1M0gmVKrMBliuLDXW3gxQXeP-AhYRiecaHEbbKicZ6qkxxjGSOGM7QpXTRUd8Bc5CHqXS06X7M4FhVNhtb9RP/s1600/Best+off+Ps3.jpg " image2.src = " https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpjwQdq4qgxBSs3fSZGYA7ojq-m9-jtrV_OAA0wQhlf8PQ6fPgIRp-KiiLZpmmAisY3S3LNc7DCS4RvGKiSETM9upbKBFA-QYQN6XGhDm7OxxcqxafEbK0-_vwVQtBpvQz7hlEvjO_tE2m/s1600/Olive+web1.jpg " image3.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFo6TPtFjt1zVubxYmPgWNnATGT_YMHETu6QmIwrP1RYpI0gjfPiTpDqLNnHQ8vMsdFjne6jhfNC4li8MvKPDHhvM_RV20xSCeq7loKxZlVBwd_aHCNaTac691qYOCil1iaNgClYKH6iAs/s1600/Mr+Idiot.jpg" image4.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3eLCkZfXXkZpGKp-0bacf_JE9ahWB3tKzmH5NJKCmYGNyebPp6BQ5pXhheMUO2ggDjgHbYPBAHEpyXsysmT8jpwPOGIcWSafnVNK98RFpzX7P1gc9Y7XMU3Z1et99oSGlUwBqcX-p4ex_/s1600/Les+10+meilleurs.jpg" image5.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBPc9l7xq2QtO04vazODwfXE05no_ADWw4FJkw5efH3gLspQCel_-GzIaiaCaI-JKdmsH0y7aZt6Lesl2eq1znt-EMW8cPxkMmrZ1Zmim2UwW-M6OoG6-qzK7wE4WquFto1giKKx7xS6Y/s1600/Optimisation+blogger.jpg" } </script> <style type="text/css"> a.bouton { width:227px; text-align:center; display:block; border-width: 5px; font-weight:bold; text-decoration:none; background:#B9B9B9; border-top:3px #DBDBDB solid; border-left:3px #DBDBDB solid; border-bottom:3px #868686 solid; border-right:3px #868686 solid; } 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; } </style> <!-- Ici vous pouvez mettre une autre image que image0 si vous souhaitiez commencer par une autre --> <img border="0" name="imagename" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6sTCw5G8RGG3sCKPzOS6ACewfaQRx4pLgnMu0tOSfVark7kWIffwgXZEaFHvBYyV_H4ce7Y6nux3VBrWrp8VqEJiI_G43MTNGaeejOQuG3cwq0FcqQwrg8QMp8M6L1PuVEkaHyhpGgI/s1600/Site.jpg"width="227" height="180" /> <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> <!-- Pour au cas ou vous avez des cases plus grandes ou que vous les souhaitiez d'une autre couleur --> <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: 227px; 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> <!-- Pour ouvrir dans même fenêtre: supprimer target='new' --> <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 vertical photo couleur lien changeantes