le mieux est d'avoir les images dans le html pour qu'elles se chargent plus vite.
Tiens pour t'aider un petit menu php/js/css
C'est cadeau, ça pourra te servir
<?php
$menu='<ul id="menu">';
// tableaux contenant les liens d'accès et le texte à afficher + alt et title
$tab_menu_lien = array( "../pres", "../design", "../graphisme", "../webx", "../experiences", "../contact" );
$tab_menu_texte = array( "MenuBtn01.jpg", "MenuBtn02.jpg", "MenuBtn03.jpg", "MenuBtn04.jpg", "MenuBtn05.jpg", "MenuBtn06.jpg" );
$tab_menu_descr = array( "Prsésentation", "Design", "Graphisme", "Web", "Expériences & Références", "Contact" );
$tranche=5;
// informations sur la page
$rep=substr(dirname($_SERVER["PHP_SELF"]),$tranche);
// boucle qui parcours les deux tableaux
foreach($tab_menu_lien as $cle=>$lien)
{
$menu .= " <li ";
// si le nom du fichier correspond à celui pointé par l'indice, alors on l'active
if( $rep == substr($lien,3) ){
//on ajoute une classe au lien en cours pour éviter un conflit avec le js
//changer source de l'image en cours
$menu .= ' class="active"><a href="' . $lien . '"><img alt="'.$tab_menu_descr[$cle].'" title="'.$tab_menu_descr[$cle].'" src="../web/img/menu/btn/'.str_replace(".jpg", "Over.jpg",$tab_menu_texte[$cle]).'"/></a></li>';
}
//sinon pour les autres
else
$menu .='><a href="' . $lien . '"><img alt="'.$tab_menu_descr[$cle].'" title="'.$tab_menu_descr[$cle].'" src="../web/img/menu/btn/'.$tab_menu_texte[$cle].'"/></a></li>';
}
$menu .='</ul>';
echo $menu;
?>
le css
la position de ton menu
#header ul {
list-style: none outside none;
float: right;
padding: 48px 94px 0 0;
}
les puces qui vont contenir tes images
#header ul li {
display: inline;
margin: 0;
padding: 0;
float: left;
list-style-type:none;
}
un peu de js pour les rollover
un bon truc pour tes rollecer tu donne le même nom que tes images avant survol et tu rajoutes un mot identique + extension à chaque fin
$(document).ready(function() {
$('#menu li[class!="active"] img')
.mouseover(function() {
var src =".."+ $(this).attr("src").match(/[^\.]+/) + "Over.jpg";
$(this).attr("src", src);
})
.mouseout(function() {
var src = $(this).attr("src").replace("Over.jpg", ".jpg");
$(this).attr("src", src);
});
});
