Vous êtes ici Forums
  |  Connexion
 Forums
HomeHomeForums DNNForums DNNAnnoncesAnnoncesTUTO - Faire un menu avec survol dTUTO - Faire un menu avec survol d'image
Précédente
 
Suivante
Nouveau message
19/01/2007 13:48
 

  Bloc Notes   Graphiques


Suite a la demande dans le forum de SkMat voici un Tuto.
Donc l'idée est de faire un menu comme celui de dotnetnuke.com (en haut), c'est a dire avec des textes et images survolées.

Pour y parvenir, j'utilise un module text/html dans le quel, en mode texte brut je met : 

 <table> <tbody> <tr> <td> <p align=center><a href="/?tabid=59"><img onmouseover="menu1.src='/Portals/0/testmenu/bouton1_survol.gif';" onmouseout="menu1.src='/Portals/0/testmenu/bouton1.gif';" src="/Portals/0/testmenu/bouton1.gif" border=0 name=menu1> </a></p></td> <td> <p align=center><a href="/?tabid=60"><img onmouseover="menu2.src='/Portals/0/testmenu/bouton2_survol.gif';" onmouseout="menu2.src='/Portals/0/testmenu/bouton2.gif';" src="/Portals/0/testmenu/bouton2.gif" border=0 name=menu2> </a></p></td></tr> <tr> <td onmouseover="menu1.src='/Portals/0/testmenu/bouton1_survol.gif';" onmouseout="menu1.src='/Portals/0/testmenu/bouton1.gif';">&nbsp; <a href="/?tabid=59">Bloc Notes </a><br></td> <td onmouseover="menu2.src ='/Portals/0/testmenu/bouton2_survol.gif';" onmouseout="menu2.src='/Portals/0/testmenu/bouton2.gif';">&nbsp; <a href="/?tabid=60">Graphiques</a><br></td></tr></tbody></table>

Ok ca a l'air un peu barbare comme ca mais c'est tout simple. Il faut juste ajuster le nombre de cellules, les liens, et les sources des images.

Quelques explications

1/ Je me sert d'un tableau pour y parvenir (dans mon exemple 2x2). Les deux premieres cellules de la premiere ligne serviront a placer les images, celles de la deuxième ligne mes texte.
(pour rappel un tableau est composé de lignes délimitées par <tr> </tr> dans lesquelles ont trouve des cellules délimitées par <td> </td>

2/ Donc dans la premiere ligne (celle des images) je trouve 2 cellules et pour chacune d'entre elle la syntaxe :

 <td> 'Début de la cellule
 <p align=center> L'alignement de ma cellule
 <a href="/?tabid=59"> Ici le lien vers une de mes pages
 <img onmouseover="menu1.src='/Portals/0/testmenu/bouton1_survol.gif';"  J'indique ou se trouve mon image (mode survol)
         onmouseout="menu1.src='/Portals/0/testmenu/bouton1.gif';" J'indique ou se trouve mon image (mode fin du survol)
         src="/Portals/0/testmenu/bouton1.gif" J'indique ou se trouve mon image (mode normal)
         border=0          J'indique que je ne veux pas de bordures autour de mon image
         name=menu1>  Là je donne un nom à ma cellule (celui que j'utilise dans les lignes plus haut 'menu1.src=')
 </a>
</p>
</td>
'Fin de la cellule

3/ pour la deuxième ligne (celle des texte), la syntaxe n'est pas tout a fait identique car il n'est pas possible de faire un survol d'un texte, aussi je vais me servir du survol sur la cellule (j'aurais pu faire pareil pour la premiere ligne...). La syntaxe est donc :

<td onmouseover="menu1.src='/Portals/0/testmenu/bouton1_survol.gif';" quand je survol cette cellule je change l'image de la cellule nomée menu1
onmouseout="menu1.src='/Portals/0/testmenu/bouton1.gif';"> idem quand je quitte le survol, je remet la bonne image de la cellule nomée menu1
&nbsp; <a href="/?tabid=59"> Ici mon lien
Bloc Notes  Ici mon texte
 </a><br>
</td>
Fin de la cellule

Voila il ne reste plus qu'a ajuster quelques parametres de l'affichage de mon module pour que ce soit parfait.
Je décoche "Afficher le container, autoriser l'impression et autoriser la syndication" (le container restera cependant visible a ceux qui ont les droits de modifier le module)

Anthony

 
Nouveau message
24/01/2007 15:41
 

Sans rire, quand tu fais des tutos toi, ça rigole pas !!! Et hop, un super tuto de plus, CHAPEAU !!!

 

 
Précédente
 
Suivante
HomeHomeForums DNNForums DNNAnnoncesAnnoncesTUTO - Faire un menu avec survol dTUTO - Faire un menu avec survol d'image