Vous pouvez poster dans la section entraide pour vos forums sans être inscrit !


 
-23%
Le deal à ne pas rater :
EVGA SuperNOVA 650 G6 – Alimentation PC 100% modulaire 650W, 80+ ...
77.91 € 100.91 €
Voir le deal

Partagez
 

 Une image réactive ou mappée

SkySkySkySky Modérateur
Une image réactive ou mappée EmptyMar 18 Juin - 4:19   

Bonjour,

D'abord qu'est ce qu'une image réactive ?
Une image réactive est une image divisée en plusieurs zones pointant vers différents documents. Prenons en exemple la carte d'une région affichant les départements qui la compose. Vous pouvez diviser cette carte en plusieurs zone (une par département). Ces zones vous enverrons par un lien vers une autre page du site (détail du département). 
[Source : http://www.chez.com/xav59/reactive.html]

Donc en premier lieu vous créer votre image avec les différents boutons, ou vous le faites faire par un graphiste.

Une fois l'image créée, vous devez l'héberger.

Vous ouvrez le bloc notes de votre ordinateur et vous coller le code suivant :
Code:
<CENTER><IMG SRC="Lien de votre image" USEMAP="#map">
<MAP NAME="map">
<AREA SHAPE=RECT COORDS="J, K, L, M" href="Lien1">
<AREA SHAPE=RECT COORDS="J, K, L, M" href="Lien 2">
<AREA SHAPE=RECT COORDS="J, K, L, M" href="Lien 3">
<AREA SHAPE=RECT COORDS="J, K, L, M" href="Lien 4">
<AREA SHAPE=RECT COORDS="J, K, L, M" href="Lien 5">
</CENTER>

Les coordonnées de vos différents boutons (J, K, L, M)
Sont les suivantes :
- Haut gauche de votre bouton : J, K
- Bas droit de votre bouton : L, M

Il suffit de placer votre curseur sur le dessin dans un logiciel de graphisme et vous verrez les coordonnées en bas de votre écran.

Vous remplacer les lien 1,2,3, ... Par les liens de direction ou vous souhaitez arriver en cliquant dessus.

Donc rien de tel qu'un exemple ....
C'est une aide que j'ai réalisé sur le FDF (Sous mon ancien pseudo que j'ai supprimé) :














Vous pouvez tester les boutons ils fonctionnent ...

Voilà j'espère avoir été assez clair

Bonne journée

Sky
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Le forum d'entraide de Mr. Docteur :: Libre service & commandes :: Codage :: Libre service :: Éléments pour vos forums-