Forum d'aide aux administrateurs de forums
AccueilPortailCalendrierFAQRechercherMembresGroupesS'enregistrerConnexion

 

<TUTO> Une image réactive

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Auteur Message
Xavarnaque
Initié


Masculin
Age : 48
Emploi/loisirs : Juriste d'entreprise
Nombre de messages : 68
Date d'inscription : 26/01/2009
Réputation : 0
Points : 0

MessageSujet: <TUTO> Une image réactive
Lun 26 Jan - 23:42

Je vous propose un tuto sur l'image réactive.

Voici un exemple :






Pour ce faire :
Avoir une image avec des bouton comme l'exemple (Pas de limite)

Ensuite voici le code :
Code:
<CENTER><IMG SRC="url de l'image" USEMAP="#map">
<MAP NAME="map">
<AREA SHAPE=RECT COORDS="I, J, K, L" HREF="url 1">
<AREA SHAPE=RECT COORDS="I, J, K, L" HREF="url 2">
<AREA SHAPE=RECT COORDS="I, J, K, L" HREF="url 3">
<AREA SHAPE=RECT COORDS="I, J, K, L" HREF="url 4">
<AREA SHAPE=RECT COORDS="I, J, K, L" HREF="url 5">
</CENTER>

Vous remplacer :
- url de l'impage par le lien de votre image.
- I et J par les chiffre de coordonnées en haut a gauche de chaque bouton
- K et L par les chiffres de coordonnées en bas à droite de chaque bouton.
- url=1 par le lien vous vous voulez arriver en cliquant sur le lien
- Vous modifier toutes les url= par les liens voulus

Vous pouvez supprimer les lignes en trop ou il suffit de copier coller la ligne
Code:
<AREA SHAPE=RECT COORDS="I, J, K, L" HREF="url 5">

Autant de fois qu'il le faut

Pour avoir les coordonnées des boutons :
Ouvrez votre logiciel de graphisme.
Pointez le curseur en haut a gauche du bouton
Vous verrez en bas de votre écran X:Y= suivi des deux chiffre
Vous remplacez le I par le premier chiffre
Vous remplacez le J par le second chiffre
Idem pour les lettre K et L en pointant votre curseur en bas a droite

Vous pouvez tester les boutons ils fonctionnent

Si questions, n'hésitez pas a me les poser dans la section problème d'affichage

Amicalement

P.S. : ProgVal je me sui permis d'utiliser une partie de ta bannière pour ce test
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://arnaques.forumactif.com
Shad
Administrateur
avatar

Masculin
Age : 27
Localisation : Poitiers
Emploi/loisirs : Étudiant ; Air-Soft, Natation, Aïkido, escalade.
Nombre de messages : 272
Date d'inscription : 01/01/2009
Réputation : 1
Points : 73

MessageSujet: Re: <TUTO> Une image réactive
Mar 27 Jan - 0:51

T'inquiette pas, de toute manière c'est la banière de base de ce thème ;)
_________________
Shad

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://openlwd.org/
Xavarnaque
Initié


Masculin
Age : 48
Emploi/loisirs : Juriste d'entreprise
Nombre de messages : 68
Date d'inscription : 26/01/2009
Réputation : 0
Points : 0

MessageSujet: Re: <TUTO> Une image réactive
Mar 27 Jan - 1:00

Ok je ne m'inquiète pas alors
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://arnaques.forumactif.com
Shad
Administrateur
avatar

Masculin
Age : 27
Localisation : Poitiers
Emploi/loisirs : Étudiant ; Air-Soft, Natation, Aïkido, escalade.
Nombre de messages : 272
Date d'inscription : 01/01/2009
Réputation : 1
Points : 73

MessageSujet: Re: <TUTO> Une image réactive
Mar 27 Jan - 1:28

lol :afro:
_________________
Shad

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://openlwd.org/
Shad
Administrateur
avatar

Masculin
Age : 27
Localisation : Poitiers
Emploi/loisirs : Étudiant ; Air-Soft, Natation, Aïkido, escalade.
Nombre de messages : 272
Date d'inscription : 01/01/2009
Réputation : 1
Points : 73

MessageSujet: Re: <TUTO> Une image réactive
Mar 27 Jan - 1:29

Aussi, avant que j'oublie... on apelle pas plutôt sa une image Map ?
_________________
Shad

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://openlwd.org/
Xavarnaque
Initié


Masculin
Age : 48
Emploi/loisirs : Juriste d'entreprise
Nombre de messages : 68
Date d'inscription : 26/01/2009
Réputation : 0
Points : 0

MessageSujet: Re: <TUTO> Une image réactive
Mar 27 Jan - 1:31

Une omage mappée ou réactive ce sont les deux noms utilisé
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://arnaques.forumactif.com
Shad
Administrateur
avatar

Masculin
Age : 27
Localisation : Poitiers
Emploi/loisirs : Étudiant ; Air-Soft, Natation, Aïkido, escalade.
Nombre de messages : 272
Date d'inscription : 01/01/2009
Réputation : 1
Points : 73

MessageSujet: Re: <TUTO> Une image réactive
Mar 27 Jan - 1:47

ok ;)
_________________
Shad

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://openlwd.org/
ProgVal
Fondateur
avatar

Masculin
Age : 23
Nombre de messages : 482
Date d'inscription : 01/01/2009
Réputation : 9
Points : 134

MessageSujet: Re: <TUTO> Une image réactive
Mer 28 Jan - 11:06

Merci à toi pour ce code. Je vais le rendre conforme XHTML, et je le publierai.
_________________

Fondateur du Forum des Admins: Forum d'aide pour les administrateurs de forums

Salut Invité !
Tu as posté 0 messages.
Le forum compte 1683 messages et 191 sujets.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
ProgVal
Fondateur
avatar

Masculin
Age : 23
Nombre de messages : 482
Date d'inscription : 01/01/2009
Réputation : 9
Points : 134

MessageSujet: Re: <TUTO> Une image réactive
Mer 28 Jan - 11:31

Voici le code, valide XHTML 1.0 Strict:

Code:
<div style="text-align: center;">
<img src="http://URL DE L'IMAGE" usemap="#map" alt="map" />
<map name="map" id="map">
<area shape="rect" coords="I, J, K, L" href="http://URL DU LIEN" alt="lien" />
<area shape="rect" coords="I, J, K, L" href="http://URL DU LIEN" alt="lien" />
<area shape="rect" coords="I, J, K, L" href="http://URL DU LIEN" alt="lien" />
<area shape="rect" coords="I, J, K, L" href="http://URL DU LIEN" alt="lien"/>
<area shape="rect" coords="I, J, K, L" href="http://URL DU LIEN" alt="lien" />
</map>
</div>
Il suffit de remplacer ce qui est en majuscule par ce que l'on veut.
_________________

Fondateur du Forum des Admins: Forum d'aide pour les administrateurs de forums

Salut Invité !
Tu as posté 0 messages.
Le forum compte 1683 messages et 191 sujets.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
Shad
Administrateur
avatar

Masculin
Age : 27
Localisation : Poitiers
Emploi/loisirs : Étudiant ; Air-Soft, Natation, Aïkido, escalade.
Nombre de messages : 272
Date d'inscription : 01/01/2009
Réputation : 1
Points : 73

MessageSujet: Re: <TUTO> Une image réactive
Mer 28 Jan - 20:12

Déjà fait :p

Tu as un train de retard ProgVal :p

Même si Xavarnaque n'avais pas encore fait les motifs ;)
_________________
Shad

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://openlwd.org/
ProgVal
Fondateur
avatar

Masculin
Age : 23
Nombre de messages : 482
Date d'inscription : 01/01/2009
Réputation : 9
Points : 134

MessageSujet: Re: <TUTO> Une image réactive
Mer 28 Jan - 20:15

Et alors, comment j'étais censé savoir?
_________________

Fondateur du Forum des Admins: Forum d'aide pour les administrateurs de forums

Salut Invité !
Tu as posté 0 messages.
Le forum compte 1683 messages et 191 sujets.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
Shad
Administrateur
avatar

Masculin
Age : 27
Localisation : Poitiers
Emploi/loisirs : Étudiant ; Air-Soft, Natation, Aïkido, escalade.
Nombre de messages : 272
Date d'inscription : 01/01/2009
Réputation : 1
Points : 73

MessageSujet: Re: <TUTO> Une image réactive
Mer 28 Jan - 20:24

Je sais pas :p
_________________
Shad

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://openlwd.org/
ProgVal
Fondateur
avatar

Masculin
Age : 23
Nombre de messages : 482
Date d'inscription : 01/01/2009
Réputation : 9
Points : 134

MessageSujet: Re: <TUTO> Une image réactive
Mer 28 Jan - 20:25

:scratch:
_________________

Fondateur du Forum des Admins: Forum d'aide pour les administrateurs de forums

Salut Invité !
Tu as posté 0 messages.
Le forum compte 1683 messages et 191 sujets.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
Xavarnaque
Initié


Masculin
Age : 48
Emploi/loisirs : Juriste d'entreprise
Nombre de messages : 68
Date d'inscription : 26/01/2009
Réputation : 0
Points : 0

MessageSujet: Re: <TUTO> Une image réactive
Jeu 29 Jan - 0:13

Le soucis c'est qu'en xhtml l'image ne fonctionne pas alors qu'en html oui

Edit : Non ca fonctionne dans les deux cas désolé
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://arnaques.forumactif.com
Shad
Administrateur
avatar

Masculin
Age : 27
Localisation : Poitiers
Emploi/loisirs : Étudiant ; Air-Soft, Natation, Aïkido, escalade.
Nombre de messages : 272
Date d'inscription : 01/01/2009
Réputation : 1
Points : 73

MessageSujet: Re: <TUTO> Une image réactive
Jeu 29 Jan - 13:25

;)
_________________
Shad

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://openlwd.org/
ProgVal
Fondateur
avatar

Masculin
Age : 23
Nombre de messages : 482
Date d'inscription : 01/01/2009
Réputation : 9
Points : 134

MessageSujet: Re: <TUTO> Une image réactive
Jeu 29 Jan - 14:44

Tout ce qui marche en XHTML marche en HTML, car le XHTML n'est rien d'autre qu'un HTML plus strict, et donc plus compatible.
_________________

Fondateur du Forum des Admins: Forum d'aide pour les administrateurs de forums

Salut Invité !
Tu as posté 0 messages.
Le forum compte 1683 messages et 191 sujets.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
Xavarnaque
Initié


Masculin
Age : 48
Emploi/loisirs : Juriste d'entreprise
Nombre de messages : 68
Date d'inscription : 26/01/2009
Réputation : 0
Points : 0

MessageSujet: Re: <TUTO> Une image réactive
Jeu 29 Jan - 15:21

Oui j'avais essayer mais j'ai fait une erreur lol
Donc maintenant que c'est corrigé c'est ok
Désolé
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://arnaques.forumactif.com
ProgVal
Fondateur
avatar

Masculin
Age : 23
Nombre de messages : 482
Date d'inscription : 01/01/2009
Réputation : 9
Points : 134

MessageSujet: Re: <TUTO> Une image réactive
Sam 18 Avr - 13:08

Le tuto se trouve désormais ici
_________________

Fondateur du Forum des Admins: Forum d'aide pour les administrateurs de forums

Salut Invité !
Tu as posté 0 messages.
Le forum compte 1683 messages et 191 sujets.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
Shad
Administrateur
avatar

Masculin
Age : 27
Localisation : Poitiers
Emploi/loisirs : Étudiant ; Air-Soft, Natation, Aïkido, escalade.
Nombre de messages : 272
Date d'inscription : 01/01/2009
Réputation : 1
Points : 73

MessageSujet: Re: <TUTO> Une image réactive
Sam 18 Avr - 22:04

Le xhtml n'est pas seulement égal a l'html + le strict !

Le xhtml est définie par XML tan-dis que l'html est définie par SGML !
Se qui permet d'afficher une page web aussi bien sur des ordinateur puissant que sur de petits engin comme des smartphone ou autre !
_________________
Shad

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://openlwd.org/
ProgVal
Fondateur
avatar

Masculin
Age : 23
Nombre de messages : 482
Date d'inscription : 01/01/2009
Réputation : 9
Points : 134

MessageSujet: Re: <TUTO> Une image réactive
Dim 19 Avr - 11:22

l'HTML est le successeur du SGML, et le XHTML est le successeur du HTML.
Le XHTML est effectivement plus strict, car pour le HTML, les développeurs de sites et de navigateurs "inventaient" des balises, ce que le W3C interdit avec le XHTML.
_________________

Fondateur du Forum des Admins: Forum d'aide pour les administrateurs de forums

Salut Invité !
Tu as posté 0 messages.
Le forum compte 1683 messages et 191 sujets.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
Shad
Administrateur
avatar

Masculin
Age : 27
Localisation : Poitiers
Emploi/loisirs : Étudiant ; Air-Soft, Natation, Aïkido, escalade.
Nombre de messages : 272
Date d'inscription : 01/01/2009
Réputation : 1
Points : 73

MessageSujet: Re: <TUTO> Une image réactive
Dim 19 Avr - 13:32

Wikipedia a écrit:
XHTML est un langage de balisage servant à écrire des pages pour le World Wide Web. Conçu à l'origine comme le successeur d'HTML, XHTML se fonde sur la syntaxe définie par XML, plus récente, mais plus exigeante que celle définie par SGML sur laquelle repose HTML : il s'agit en effet de présenter un contenu affichable non seulement par les ordinateurs classiques, mais également sans trop de dégradation par des PDA bien moins puissants.

_________________
Shad

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://openlwd.org/
Contenu sponsorisé



MessageSujet: Re: <TUTO> Une image réactive

Revenir en haut Aller en bas

<TUTO> Une image réactive

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum: Vous ne pouvez pas répondre aux sujets dans ce forum
Les admins de forums :: Listes de problèmes/solutions :: Proposer une astuce ou un mot au dictionnaire -
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forumactif.com