Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > XHTML / CSS > Images mappées et liens hypergraphiques > Lecture des commentaires

Images mappées et liens hypergraphiques

Vous devez être inscrit pour pouvoir poster des messages

Page : 1  2  Suivante
Pseudo Commentaire
Page : 1  2  Suivante
Hors ligne Tsunami # Posté le 10/12/2005 à 13:44:50 - Ce membre a mis la note : 17
Avatar
Groupe : Membres
Bravo pour ce bon tuto ;)

Cependant, quelques fautes assez graves :
Code : HTML

<p>
   <img scr="mon_image.png" height="100" width="100" usemap="#ma_map"/>
</p>

A remplacer SCR par SRC:
Code : HTML
<p>
   <img src="mon_image.png" height="100" width="100" usemap="#ma_map"/>
</p>


Et un dit une ANCRE, non une encre :p

Bravo quand même! (17/20)
Hors ligne magikman # Posté le 10/12/2005 à 14:37:09 - Ce membre a mis la note : 20
Avatar
Groupe : Membres
Magnifique tuto, rien que pour les exemples graphiques 20/20.
Pour les différents problèmes que l'on pourrait rencontrer et leurs solutions 20/20.
Pour ... 20/20
Pour les deux fautes comises allez 19/20

TADAM pour un score final de 20/20

Franchement bravo, si tous s'appliquaient comme toi, le monde entier s'arracherait les tutos du SDZ
Hors ligne shuss # Posté le 10/12/2005 à 15:22:13 - Ce membre n'a pas mis de note
Avatar
Groupe : Membres
Les erreurs ne sont plus, tout est reglé.
Merci Tsunami !

Image utilisateur

 
Hors ligne Tyr@el # Posté le 11/12/2005 à 12:49:09 - Ce membre a mis la note : 18
Tant crit-on noël qu'il vient
Avatar
Groupe : Membres
Très bon, très utile tuto !
Merci ;)

Image utilisateur
 
Hors ligne david96 # Posté le 13/12/2005 à 00:02:44 - Ce membre a mis la note : 18
Avatar
Groupe : Membres
Excellent, très bien expliqué et très utile à mon avis pour les designers :D
 
Hors ligne betchou # Posté le 15/12/2005 à 15:14:57 - Ce membre a mis la note : 20
Merci
Groupe : Membres
Très très bien monsieur!! C'est cool, je vais peut-etre m'en servir. A voir si on peut l'utiliser pour en faire un menu graphique... Par rapport au classique display block sur les balises <a>. Je vais chercher un peu... :colere:

Merci encore.
betchou

Ca y est, j'ai réfléchis! :D Ben, ca va moyen pour un menu. Ce n'est pas sémantique. Par contre, pour décrire une image pourquoi pas. L'utilisation des maps est quand meme bcp plus simple que l'autre méthode.
Hors ligne JC_Master # Posté le 21/12/2005 à 11:55:41 - Ce membre a mis la note : 16
Errare humanum est...
Avatar
Groupe : Bannis
Le W3C HTML1.1 Strict informe que les atributs name n'existe plus pour ces balises. Il faut les remplacer par des id(D'ou l'interet de l'atribut ID)
Sinon c'est très complet ;)

(+5)^2 = (-5)^2
Quand on a une solution, ou en vien a oublier les autres...
Pensez a Image utilisateur
[c++ & SDL] Fantastic-Land : 100%
[c++ & OpenGL & SDL] JDLV_3D : 100%
[PHP]Class RSS : 60%
[PHP] Class Template : 95%
 
Hors ligne STUL # Posté le 21/12/2005 à 13:07:35 - Ce membre n'a pas mis de note
Avatar
Groupe : Membres
euh j'ai rien compris... mais sinon
je vais essayer merci ;)

Avant de te coucher, regarde à travers ta fenêtre, les étoiles que tu verras sont les milliers de baisers que je t'envois. Elle, je t'aime...
Image utilisateur
 
Hors ligne Reivilo # Posté le 25/12/2005 à 17:18:16 - Ce membre a mis la note : 19
Opensourcez !
Avatar
Groupe : Membres
Pour les utilisateurs de The Gimp, allez dans Filtre -> Web -> Image cliquable(ImageMap) et tadaaa... c'est bien fait, et c'est valide xhtml à vue d'oeil.
Beau tuto!
 
Hors ligne yuston # Posté le 30/12/2005 à 21:49:28 - Ce membre a mis la note : 18
Avatar
Groupe : Membres
Très bien expliqué, très clair et très bien rédigé :) bravo! J'ai eu beaucoup de plaisir à lire!!!! :) :)

Yuston
 
Hors ligne moejul # Posté le 31/12/2005 à 10:21:28 - Ce membre a mis la note : 19
Voici Zozette
Avatar
Groupe : Membres
Wow merci, j'en sais beaucoup plus ! :D
 
Hors ligne Pierito # Posté le 31/12/2005 à 15:46:09 - Ce membre a mis la note : 20
Latin lover !
Avatar
Groupe : Membres
Très bon tutto
Je me demandais comment celà marchait et maintenant je connais à peu prêt le sujet.
Merci encore :)

Image utilisateur Image utilisateur Image utilisateur

Marin d'État !
 
Hors ligne ShadowBlade # Posté le 09/01/2006 à 20:01:23 - Ce membre a mis la note : 17
Avatar
Groupe : Interdiction d'écriture
Bon tuto, je ne parvenais plus a trouver les balises qui permettaient de mapper une image, voila qu'elle me sont apparue comme par enchantement.. :)

Pour ceux que ca intéresse, j'ai traduit MapThis!, je vous invite à lire le topic explicatif : MapThis! en français

Image utilisateur




Mes tutos sur le sdz


[ PHP ] Compteur de téléchargements
[ XHTML/CSS ] Modifier l'apparence d'une infobulle
[ PHOTOSHOP ] Drap de soie
 
Hors ligne baba0076 # Posté le 14/01/2006 à 19:06:12 - Ce membre a mis la note : 13
Qui ne tente rien n'a rien !
Avatar
Groupe : Bannis
J'ai un problème :
W3C me dit que name n'est plus valide alors que si je laisse id et ben j'ai plus de liens... Aussi W3C me dit que le # est invalide si je le vire et que je laisse name ca marche pas dans les deux sens

Alors :
Commnent faire pour être valide et que ca fonctionne ? Voici mon code :


Code : HTML
<div class="footer_div"><map name="footer">
        <area href="lien1" shape="poly" coords="145, 32, 212, 33, 208, 44, 144, 45" title="XHTML Validé" alt="XHTML Validé" />
        <area href="lien2" shape="poly" coords="225, 34, 247, 32, 246, 43, 225, 43" title="CSS Validé" alt="CSS Validé" />
        <area href="lien3" shape="poly" coords="262, 33, 333, 32, 332, 43, 260, 45" title="PHP Power !" alt="PHP Power !" />
        <area href="lien4" shape="poly" coords="345, 32, 458, 32, 457, 43, 345, 44, 346, 35" title="Site hébergé sur 1and1.fr" alt="Site hébergé sur 1and1.fr" />
        <area href="lien5" shape="poly" coords="471, 33, 516, 33, 517, 45, 469, 46" title="Designs du site" alt="Designs du site" />
        <area href="lien6" shape="poly" coords="532, 32, 640, 33, 640, 42, 566, 42, 533, 41" title="Smileys et image du site" alt="Smileys et image du site" />
        <area href="lien7" shape="poly" coords="654, 32, 777, 33, 779, 42, 685, 47, 653, 42" title="Configuration nécessaire" alt="Configuration nécessaire" />
        <area href="lien8" shape="poly" coords="792, 32, 855, 33, 855, 44, 793, 44" title="Règlement [A lire]" alt="Règlement [A lire]" />
</map>
<img src="images/design/footer2.png" usemap="#footer" alt="Footer non chargé, actualisez..." />
</div>


Merci par avance, @bientôt !

Cordialement, Baba0076.

XHTML est bizarre ! Peu à peu que je le découvre il rajoute des couches ! :p :-°

VENDS BOITIER ADVANCE XBLADE 8110B - 60 €
VENDS GAMECUBE + 6 JEUX, 3 MANETTE, 4 MEMORY - 150 €
VENDS SONY ERICSSON W550i + SPEAKERS + CD + CABLE - 150 €

PAR MP SVP
 
Hors ligne Philias # Posté le 26/01/2006 à 02:48:05 - Ce membre a mis la note : 19
Avatar
Groupe : Membres
Très bien fait, je n'ai pas rencontrer de problème à comprendre.

Ça va m'être utile pour faire une balise ACode.

19 sur 20 !
 
Hors ligne Tim... # Posté le 26/01/2006 à 08:45:17 - Ce membre a mis la note : 19
C'est grand un cheval...
Avatar
Groupe : Membres
Voilà un truc dont j'avais pas besoin mais je crois que je vais quand même pas mal m'en servir :p

Bon allez 19 ^^
 
Hors ligne tidadounet # Posté le 13/02/2006 à 10:30:23 - Ce membre a mis la note : 20
Avatar
Groupe : Membres
Un tuto parfait qui m'enleve une belle epine du pied
Merci bcp !!!!
tid@
Hors ligne ad # Posté le 25/02/2006 à 19:52:08 - Ce membre a mis la note : 20
en arche en o logos
Avatar
Groupe : Membres
Il y a un gros problême. En effet une validation infructueuse (comme pour baba0076 ci-dessus) sur du mapping a priori sans erreur m'a poussé à éplucher le site du w3c à la recherche de remarque.
D'un côté on a le HTML 4.0, voir ici, qui stipule que la balise name est autorisée. Mais l'HTML 1.1 lui rend impossible l'utilisation des map pour la simple et bonne raison qu'il interdit les deux seuls biais d'en parfaire une.
Je m'explique :
  • il est interdit de mettre l'attribut name dans map (chasse aux name inutile) : sauf qu'ici le name est nécessaire
  • si jamais on voulait utiliser l'id (lui obligatoire) dans usemap de img on ne pourrait pas car on ne peut commencer une valeur de name par #

En résumé (j'avais pratiqué une autre technique auparavant mais j'avais décidé de faire plus propre avec map : :( ) en attendant des versions d'XHTML corrigeant ce problême dans la définition du langage, on ne peut clamer un site validé et avec des maps...
La solution passe dans des images transparentes avec un z-index : absolument autorisé en css/xhtml. Voir ce post sur w3c validator bug report.

Espérons que mon aide portera ses fruits.
 
Hors ligne shuss # Posté le 26/02/2006 à 11:14:06 - Ce membre n'a pas mis de note
Avatar
Groupe : Membres

Deux petits points à éclaircir




La balise <map> doit comporter l'attribut id.


En effet, les images mappées semblent poser un serieux problême : La balise <map> ne doit pas utiliser l'attribut name mais l'attribut id.
Or, pour pouvoir utiliser la map, il faut l'attribut name :(

Donc il faut utiliser l'attribut name ET id o_O (je l'avait également dis à baba0076, mais par MP).

Comme il est clairement dit dans ce tuto :
Citation : Moi-même

id : c'est l'id de votre map (unique aussi). A vrai dire, il n'a pas vraiment d'utilité mais est obligatoire pour respecter les normes W3C.

ou encore :
Citation : Bibi

Puis il faut les arguments id à <map> et alt à <area/> et rajoutez les / à <area/>.

Donc merci de bien lire mon tuto :colere:


Par contre, un autre problème se pose :( : Il semblerait que maintenant, la balise <img/> aie besoin de l'attribut alt. Pour rappel, c'étaient les <area/> qui les portaient avant, remplaçant ainsi celle de <img/>.
Donc il faut maintenant l'attribut alt à <area/> ET <img/> o_O


CONCLUSION




  • La balise <area> doit comporter l'attribut name et id : l'attribut name sert à insérer la map dans une image, l'id sert à être valide : l'id devrait normalement remplacer name, mais pour l'instant, on a pas le choix.
    Ceci était clairement dit dans mon tuto.

  • La balise <img/> doit maintenant elle aussi avoir la balise alt, en plus des <area/>. Mon tuto sera modifié dans les plus brefs délai.



Merci de votre attention, shuss.

Image utilisateur

 
Hors ligne graph05 # Posté le 06/05/2006 à 10:08:51 - Ce membre n'a pas mis de note
Freestyleur à mes heures
Avatar
Groupe : Membres
Salut
Il est pas mal ton tuto ;)
Sinon quand je télécharge MapThis! et que j'essaie de l'ouvrir ya une erreur :(
Vosu ne savez pas pourquoi ?? :euh:
 
Hors ligne missodrey # Posté le 10/05/2006 à 13:37:01 - Ce membre a mis la note : 20
Groupe : Membres
Super tuto, j'en cherchais un comme ça justement ;)
Hors ligne Janeo # Posté le 13/07/2006 à 12:56:19 - Ce membre n'a pas mis de note
Groupe : Membres
Exellent tuto !
Hors ligne jover # Posté le 21/07/2006 à 08:30:02 - Ce membre n'a pas mis de note
Groupe : Membres
Tres bon tuto pour un pur zero comme moi :D
Hors ligne Anonyme # Posté le 11/09/2006 à 21:36:43 - Ce membre n'a pas mis de note
Groupe :
The gimp permet aussi de faire des maps.
Hors ligne Anonyme # Posté le 23/11/2006 à 16:59:06 - Ce membre n'a pas mis de note
Groupe :
À ad,

en xHTML 1.1 l'id remplace le name, et le usemap doit être appellé sans le dièse ;)
Hors ligne Leolio_tonton # Posté le 14/03/2007 à 15:12:33 - Ce membre a mis la note : 20
Avatar
Groupe : Membres
Salut,

y aurait-il une solution pour faire prendre des attributs CSS à une partie de la map (une area) ?

Chouette tuto en tous cas, clair, précis, se suffit à lui-même, et en plus on a un logiciel en cadeau ! 20/20 ;)
Hors ligne Firebayll # Posté le 09/05/2007 à 10:55:33 - Ce membre a mis la note : 19
Groupe : Membres
Très bon tuto, qui plus est sur un sujet qui m'interesse !!!
Bravo encore et, on va mettre ... 19/20 (oui, le 20 n'existe pas, 20 c'est la perfection... j'y met jamais :p )

Continu comme ça !

Citation : M@teo21 dans le cours de C (event en SDL)
Je sais pas vous, mais moi ça m'amuse moyennement de m'exciter frénétiquement sur la même touche du clavier juste pour déplacer le personnage de 200 pixels :lol:

-> Trop fort ! Ca me rappel mes parties de Mario Party !!!

 
Hors ligne Bones # Posté le 09/05/2007 à 22:16:29 - Ce membre a mis la note : 20
peace.
Avatar
Groupe : Membres
Ok. Une très bonne note : Secret (cliquez pour afficher)
19/20
Pour un excellent tuto !
Chapeau-BRAVO !

Vous voulez sauver un arbre ?
Mangez un KsToR.
 
Hors ligne bootoc # Posté le 13/06/2007 à 18:36:25 - Ce membre a mis la note : 17
Avatar
Groupe : Membres
Super tuto' ! :)

Le but est atteint : J'ai appris quelque chose. ;)

17/20
Hors ligne KorangaR # Posté le 29/06/2007 à 09:39:24 - Ce membre n'a pas mis de note
Groupe : Membres
Bien que l'attribut name est déprécié en xHTML 1.0, ce n'est pas faux d'utiliser les 2 pour la rétro-compatibilité, mais il faut bien le faire dans ce cas là en mettant la même valeur à l'attribut name et id, ce que tu ne fais pas.

Vous devez être inscrit pour pouvoir poster des messages

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 30 Zéros connectés | Requêtes SQL 9 requêtes | Temps de génération de la page : Total (SQL) 0.0483s (0.0308s)