Vous allez pouvoir apprendre avec ce tutorial dédié à imageready comment faire pour créer un menu façon "slider" pour votre site
Voici un aperçu et la source pour pouvoir suivre ce tutorial :-D
Ce tutorial ne traitera en aucun moment de la partie graphique du menu mais uniquement de ça mise en place avec ImageReady.
Toute fois certaines règles sont à respecter pour obtenir un résultat satisfaisant.
1° Afin de vous simplifier le travail je vous conseille fortement de créer des groupes et des sous groupes pour les rollover.
Exemple "Boutons >> contact"
2° De créer votre cadre en trois parties, le cadre, le fond (avec un effet d'ombre interne pour donner l'effet de profondeur), et le verre dans l' ordre ou vous pouvez le voir sur la capture d'écran suivante.
3° De placer le goupe "Boutons" sous le calque "Verre"
4° De découper proprement votre menu sous photoshop
et ensuite de l'envoyer sous ImageReady
Partie à effectuer sous ImageReady
Dans l'onglet "Contenu Web" séléctionnez la première tranche "menu_slider_01" et créez un nouvel état de transformation par souris en cliquant sur l'icone montré sur la capture d'écran
Puis activez le rollover de l'accueil.
Dans la fenêtre d'animation cliquez sur "Reproduit l'image sélectionnée"
Sélectionnez l'outil "Déplacement" 
dans votre barre d'outils et cliquez une fois sur le calque "verre"
et à l'aide de la touche "bas" de votre clavier, faites descendre le calque de sorte à laisser apparaître votre texte
Puis dans dans la fenêtre d'animation, clique sur l'icone "Trajectoire" avec les paramêtres suivants et cliquez sur OK
et entrez "1 fois" pour la répétition
Puis répétez la mème chose avec toutes les tranches de votre menu
Puis il ne vous reste plus qu'Ã enregistrer une copie optimser pour pouvoir l'exploiter sur votre site WEB
Edition du 8 mars 2008
Suite à de nombreuses très nombreuses demandes sur comment faire pour inclure le menu aux pages des votre site web, je vais vous expliquer en détail comment faire
Pour être plus claire et suivre cet exrcice nous allons dire que:
1°) vous avez placez le répertoire "images" créé par imageready à la racine de votre serveur
2°) vous avez nommé le fichier html créé par imageready "menu.html"
3°) et que la page dans laquelle vous souhaitez l'intégrer se nomme "index.html"
Tout d'abord il va vous falloir renommez vos pages de .html en .php
Heuuuu ça va changer quoi de faire ça ?
Ben plein de choses vous verrez, tout d'abord sachez que vous n'aurez pas à recoder vos pages car finalement le php est du html amélioré qui va vous simplifier la vie, mais bon la n'est pas le sujet, nous verrons ça sur d'autres tutoriaux
En attendant vous allez pouvoir utiliser la fonction "include" bien pratique qui va vous permettre en tapant seulement le petit bout de code suivant et ainsi pouvoir inclure votre menu dans des centaines de pages très simplement
Voila le code
- Code: Tout sélectionner
<?php include ("menu.html"); ?>
C'est bien beau ça mais je devrais quant même modifier ce code si mon site change ???
Que néni
vous n'aurez qu'un seul fichier à modifier, le fichier "menu.html" Allez un petit exemple:
Si vous avez une page se nommant index.html vous devrez d'abord la renommer en index.php
Ensuite dans cette même page et aprés les balises et et juste aprés la balise (j'ai mis trois points car il peut y avoir d'autres paramètres après body) ou à l'endroit ou vous souhaitez inclure votre menu, faites:
- Code: Tout sélectionner
<?php include ("menu.html"); ?>
Maintenant nous allons nettoyer les balises inutiles dans le fichier "menu.html"
1° Ouvrez votre "menu.html" avec un éditeur de texte
Vous devriez trouver ce code
- Code: Tout sélectionner
<html>
<head>
<title>menu_slider</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (menu_slider.psd) -->
<script type="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images ) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (menu_slider.psd) -->
<table id="Tableau_01" width="980" height="40" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#"
onmouseover="changeImages('menu_slider_01', 'images/menu_slider_01-over.gif'); return true;"
onmouseout="changeImages('menu_slider_01', 'images/menu_slider_01.gif'); return true;"
onmousedown="changeImages('menu_slider_01', 'images/menu_slider_01-over.gif'); return true;"
onmouseup="changeImages('menu_slider_01', 'images/menu_slider_01-over.gif'); return true;">
<img name="menu_slider_01" src="images/menu_slider_01.gif" width="189" height="40" border="0" alt=""></a></td>
<td>
<a href="#"
onmouseover="changeImages('menu_slider_02', 'images/menu_slider_02-over.gif'); return true;"
onmouseout="changeImages('menu_slider_02', 'images/menu_slider_02.gif'); return true;"
onmousedown="changeImages('menu_slider_02', 'images/menu_slider_02-over.gif'); return true;"
onmouseup="changeImages('menu_slider_02', 'images/menu_slider_02-over.gif'); return true;">
<img name="menu_slider_02" src="images/menu_slider_02.gif" width="156" height="40" border="0" alt=""></a></td>
<td>
<a href="#"
onmouseover="changeImages('menu_slider_03', 'images/menu_slider_03-over.gif'); return true;"
onmouseout="changeImages('menu_slider_03', 'images/menu_slider_03.gif'); return true;"
onmousedown="changeImages('menu_slider_03', 'images/menu_slider_03-over.gif'); return true;"
onmouseup="changeImages('menu_slider_03', 'images/menu_slider_03-over.gif'); return true;">
<img name="menu_slider_03" src="images/menu_slider_03.gif" width="189" height="40" border="0" alt=""></a></td>
<td>
<a href="#"
onmouseover="changeImages('menu_slider_04', 'images/menu_slider_04-over.gif'); return true;"
onmouseout="changeImages('menu_slider_04', 'images/menu_slider_04.gif'); return true;"
onmousedown="changeImages('menu_slider_04', 'images/menu_slider_04-over.gif'); return true;"
onmouseup="changeImages('menu_slider_04', 'images/menu_slider_04-over.gif'); return true;">
<img name="menu_slider_04" src="images/menu_slider_04.gif" width="232" height="40" border="0" alt=""></a></td>
<td>
<a href="#"
onmouseover="changeImages('menu_slider_05', 'images/menu_slider_05-over.gif'); return true;"
onmouseout="changeImages('menu_slider_05', 'images/menu_slider_05.gif'); return true;"
onmousedown="changeImages('menu_slider_05', 'images/menu_slider_05-over.gif'); return true;"
onmouseup="changeImages('menu_slider_05', 'images/menu_slider_05-over.gif'); return true;">
<img name="menu_slider_05" src="images/menu_slider_05.gif" width="214" height="40" border="0" alt=""></a></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Recherchez et copiez cette partie de code javascript dans votre page "index.php"entre les balises et et spprimez-le de la page "menu.html"
- Code: Tout sélectionner
<script type="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images ) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
// -->
</script>
Dans votre page menu.html supprimez toutes les balises inutiles de sorte à ce qu'il ne vous reste plus que la de code de code entre
- Code: Tout sélectionner
<table id="Tableau_01" width="980" height="40" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#"
onmouseover="changeImages('menu_slider_01', 'images/menu_slider_01-over.gif'); return true;"
onmouseout="changeImages('menu_slider_01', 'images/menu_slider_01.gif'); return true;"
onmousedown="changeImages('menu_slider_01', 'images/menu_slider_01-over.gif'); return true;"
onmouseup="changeImages('menu_slider_01', 'images/menu_slider_01-over.gif'); return true;">
<img name="menu_slider_01" src="images/menu_slider_01.gif" width="189" height="40" border="0" alt=""></a></td>
<td>
<a href="#"
onmouseover="changeImages('menu_slider_02', 'images/menu_slider_02-over.gif'); return true;"
onmouseout="changeImages('menu_slider_02', 'images/menu_slider_02.gif'); return true;"
onmousedown="changeImages('menu_slider_02', 'images/menu_slider_02-over.gif'); return true;"
onmouseup="changeImages('menu_slider_02', 'images/menu_slider_02-over.gif'); return true;">
<img name="menu_slider_02" src="images/menu_slider_02.gif" width="156" height="40" border="0" alt=""></a></td>
<td>
<a href="#"
onmouseover="changeImages('menu_slider_03', 'images/menu_slider_03-over.gif'); return true;"
onmouseout="changeImages('menu_slider_03', 'images/menu_slider_03.gif'); return true;"
onmousedown="changeImages('menu_slider_03', 'images/menu_slider_03-over.gif'); return true;"
onmouseup="changeImages('menu_slider_03', 'images/menu_slider_03-over.gif'); return true;">
<img name="menu_slider_03" src="images/menu_slider_03.gif" width="189" height="40" border="0" alt=""></a></td>
<td>
<a href="#"
onmouseover="changeImages('menu_slider_04', 'images/menu_slider_04-over.gif'); return true;"
onmouseout="changeImages('menu_slider_04', 'images/menu_slider_04.gif'); return true;"
onmousedown="changeImages('menu_slider_04', 'images/menu_slider_04-over.gif'); return true;"
onmouseup="changeImages('menu_slider_04', 'images/menu_slider_04-over.gif'); return true;">
<img name="menu_slider_04" src="images/menu_slider_04.gif" width="232" height="40" border="0" alt=""></a></td>
<td>
<a href="#"
onmouseover="changeImages('menu_slider_05', 'images/menu_slider_05-over.gif'); return true;"
onmouseout="changeImages('menu_slider_05', 'images/menu_slider_05.gif'); return true;"
onmousedown="changeImages('menu_slider_05', 'images/menu_slider_05-over.gif'); return true;"
onmouseup="changeImages('menu_slider_05', 'images/menu_slider_05-over.gif'); return true;">
<img name="menu_slider_05" src="images/menu_slider_05.gif" width="214" height="40" border="0" alt=""></a></td>
</tr>
</table>
Voila il ne vous reste plus qu'à fermer et enregistrer vos fichiers et les envoyer sur votre serveur et votre menu sera ainsi intégré à vos pages
Voila nous sommes au bout de ce tutorial, si toutefois il vous posait un problème, laissez-nous un message à la suite de ce post et un membre vous répondra rapidement.
Amicalement l'équipe de Photoshop-création.
Recommander Photoshop-creation
