C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Dimensions des avatars
Aujourd'hui à 09:12 par Mortuus

» Signature codée
Aujourd'hui à 01:31 par Helena-Bella

» Signature codée
Aujourd'hui à 01:27 par Helena-Bella

» Signature codée avec onglets
Aujourd'hui à 01:18 par Helena-Bella

» [Plugin] Effet rollover sur une image
Hier à 12:53 par THE ROAD

» Pack forum complet RPU (N°1)
Hier à 11:08 par Helena-Bella

» Pack forum complet "Androïd Sylver" RPU (N°2)
Hier à 11:06 par Helena-Bella

» Sylver Rang (RPU)
Hier à 11:02 par Helena-Bella


Partagez | 
 

Créer une Image Réactive

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://www.ryotopub.com
avatar
{ Membre hyper-actif }
{ Membre hyper-actif }

Masculin Messages : 5163



Image Réactive


Informations générales

Description :
Nous allons apprendre comment créer une Image Réactive. Vous ne savez pas ce que c'est ?
Une Image Réactive, c'est une image (logique) où l'on va pouvoir cliquer sur des zones qui vont nous amener vers des liens externes.
Vous comprendrez mieux en suivant le tutoriel Wink

Démo :
CSSActif

Compatibilité :
Compatible avec tous les navigateurs

Crédits :
Proposé et validé par Hαrιcoow le 29/06/2010

Le tutoriel

Alors, certains vont vous dire d'utiliser des logiciels extra-compliqués et uniquement fait pour ça comme dans le tutoriel du FDF, or c'est une grosse bêtise parce que simplement avec Photofiltre Gratuit on peut le faire ! Shocked

1ère Étape : Prenez votre Image.


2ème Étape : Sous photofiltre (téléchargeable ici), délimitez à l'aide de l'outil sélection la zone que vous souhaitez rendre cliquable.



Gardez toujours votre zone sélectionnée et vous voyez 4 nombres en bas, comme ceci : 52:21 => 141:45. Retenez-les! On va s'en servir pour le code HTML.

3ème Étape : Prenez votre page HTML, commencez par copier-coller ce code et le remplir. Vous devez héberger votre image et connaître son URL (son adresse) pour le faire :

Code:
<img name="accueil0" src="URL DE VOTRE IMAGE" usemap="#accueil" alt="" />

Ensuite, collez ceci :

Code:
<map name="accueil">

Puis ceci à la suite pour mettre les liens :

Code:
<area shape="rect" coords="A,B,C,D" href="LIEN" alt="NOM DU LIEN" />

NOM DU LIEN : Donnez-lui un nom. Il permet de se repérer car en général vous en aurez plusieurs.
LIEN : Lien vers lequel on sera redirigé en cliquant sur la zone de l'image que vous avez sélectionnée.
A,B,C,D : Correspond aux chiffres que vous avez retenu dans l'ordre!

Et n'oubliez pas de mettre ceci à la fin pour fermer :

Code:
</map>

Ce qui donnera par exemple pour mon image :

Code:
<img name="accueil0" src="http://i61.servimg.com/u/f61/11/01/00/53/cssact12.png" usemap="#accueil" alt="" />
<map name="accueil">
   <area shape="rect" coords="52,21,141,45" href="http://www.css-actif.com/forum.htm" alt="CSSActif" />
</map>

Et voilà !

Bonne Chance! Very Happy
Cordialement, Haricoow.
MessageSujet: Créer une Image Réactive   Mar 29 Juin 2010, 10:16
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5575



FAQ



Q
comment on fait pour mettre plusieurs 'map' sur l'image ? Comme pour une PA par exemple.

R
Pour un renvoi vers plusieurs liens, il suffit de répéter ce code
Code:
<area shape="rect" coords="A,B,C,D" href="LIEN" alt="NOM DU LIEN">

à la suite du premier, et sur le même principe

Exemple du code employé pour ma carte en page d'accueil :
Code:
<img name="accueil0" src="http://img10.hostingpics.net/pics/186615Map.jpg" usemap="#accueil">
<map name="accueil">
<area shape="rect" coords="180,127,281,176" href="LIEN" alt="Stonefolm">
<area shape="rect" coords="68,77,207,318" href="LIEN" alt="Stonefolm">
<area shape="rect" coords="218,182,333,240" href="LIEN" alt="Terres neutres">
<area shape="rect" coords="210,141,254,403" href="LIEN" alt="Terres neutres">
<area shape="rect" coords="258,302,432,462" href="LIEN" alt="Pallengad">
<area shape="rect" coords="288,261,434,297" href="LIEN" alt="Pallengad">
</map>


Q
Peut-on insérer une infobulle avec ce tuto ?

R
Oui, je te renvoie ici.


Q
Comment on fait pour voir les nombres requis sur photoshop ?

R
Il suffit d'aller dans "Fenêtres > Informations". Une boite à outil s'ouvre, dans laquelle on à trois onglets, choisissez l'onglet information et positionnez votre curseur sur l'image, les coordonnées s'afficheront =) Au cas ou les coordonnées s'afficherait en centimètre cliquez sur le logo en haut à droite de la boîte à outil : "Option de Panneau > Unités > Pixels".


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Créer une Image Réactive   Ven 09 Déc 2011, 20:50
Revenir en haut Aller en bas
 

Créer une Image Réactive

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

 Sujets similaires

-
» Image réactive
» Image réactive dans un message ?
» Infobulle sur image réactive
» Problème code - Texte sur une image réactive
» Code et image réactive

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Mise en oeuvre-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit