5568 sujets

Sémantique web et HTML

[Résolu] Usemap et doctype

Bonjour bonjour.

Ce petit thead pour soulever une question assez récurente sur le web apparement.

J'utilise sur un site une image clickable.
Le code html: 

<img src="img/gfx/header05.jpg" alt="header mapp&eacute;" usemap="map" />
<map name="map" id="map">
  <area shape="rect" coords="0, 0, 430, 150" href="index.php" alt="Home page" />
  <area shape="rect" coords="755, 5, 773, 17" href="index.php?fr" alt="Site en fra&ccedil;ais" />
  <area shape="rect" coords="777, 5, 795, 17" href="index.php?en" alt="Site en anglais" />
</map>


Pourquoi j'ai collé les attributs "id" ET "name" dans la balise <map> ? Parce que quand je valide le code, le validateur spécifie que l'utilisation de l'attribut "name" n'est pas correcte. Et que quand je retire l'attribut "name", l'image n'est plus clickable.

En cherchant un peu, j'ai cru comprendre qu'il s'agissait du doctype. J'ai donc lu -une fois de plus et ce coup-ci du début à la fin- le fameux article d'alsacreations auquel on réenvoit allègrement sur moultes forums et décidé de passer le doctype du site en XHTML 1.0 strict: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


L'ancien doctype étant: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


Maitenant c'est magique, je n'ai plus d'erreur. Mais je ne comprends pas pourquoi.
Voilà: pourquoi est-ce que maintenant j'ai le droit de mettre un attribut "name" dans mon image ? Et pourquoi est-ce que le précédent doctype m'en interdisait l'utilisation, empêchant l'utilisation du mapping de l'image ?

Désolé de prendre de votre temps pour un truc aussi futile: j'essaie juste de comprendre Smiley smile

D'avance merci,
mrb'
Modifié par mOrbide (29 Dec 2007 - 15:47)
Bonjour,

L'attribut name est historiquement lié à HTML, dans lequel il avait été créé pour identifier un élément dans la structure, que ce soit pour créer une ancre, identifier un formulaire, une image MAP, un applet ou un frame.

La reformulation d'HTML en XHTML entraîne sa disparition, ce rôle était désormais dévolu à l'attribut id. Mais cette disparition est évidemment progressive, pour assurer la compatibilité des pages en XHTML1.x avec les agents utilisateurs courants et gérer les question de compatibilité liées aux outils de production du code.

La progression peut être résumée grossièrement par:

En XHTML1.0 traité en tant que text/html, name et id doivent être employés simultanéement (compatibilité maximale HTML - XML).

En XHTML1.0 traité en tant qu'application/xhtml+xml, seul id devrait être employé.

En XHTML1.1, obligatoirement traité en tant qu'application/xhtml+xml, seul id peut être employé.

(Rappel: on ne fait pas d'XHTML1.1 en text/html).

Après, il y a ce qu'on font les navigateurs actuels, évidemment : une image MAP en text/html avec id uniquement est parfaitement reconnue par IE et Opera, mais pas par FF...
Modifié par Laurent Denis (15 Dec 2007 - 08:56)
Ok, un grand merci pour cette explication Smiley smile

Et donc au final, mon "compromis" de choisir le doctype xhtml 1.0 strict est correct ?
Heyoan a écrit :
Salut,

la vraie question est "Pourquoi utilises-tu XHTML 1.1" Smiley cligne ?

Hello.
Justement, le document d'Alsacreations ne répondait pas vraiment à ma question. Je voudrais simplement faire un site web compatible w3c; toutes ces considérations de doctype etc me passent des km au dessus de la tête j'avoue.

Dans ce cas-ci j'ai pris l'XHTML 1.0 strict car mon client voulait une image mappée, un site fonctionnel sous IE et FF, que je lui avais promis un site w3c compliant et que c'est le seul moyen que j'ai trouvé pour concilier les deux.

Maintenant je n'ai aucune certitude sur mon choix évidemment, d'où l'ouverture de ce sujet et mon impossibilité de répondre à ta question "Pourquoi l'XHTML 1.1"...
Heyoan a écrit :
Re',

le plus simple serait de lire ce tutoriel : Les DTD HTML4.01 et XHTML1.0 : comment choisir ? et ce complément de la FAQ : Comment bien déclarer XHTML1.1 ? dont voici un petit extrait :A l'heure actuelle, vu les carences des navigateurs, passer en XHTML 1.1 n'a aucun intérêt pour la plupart des utilisateurs actuels du XHTML1.0

A+
C'est ce que j'ai lu et à quoi je faisais référence, mais qui m'avait vraiment laissé dubitatif Smiley cligne
Par contre je n'avais pas vu le complément FAQ; je vais lire ça.
Bonjour.
Je relève un peu le topic car je me rends compte d'une chose: depuis la modification du doctype et mes divers chipotages, l'image mappée ne fonctionne plus sous IE 6.

Ma question est simple: pourquoi ?
Je pensais pourtant avoir tout déclaré correctement cette fois...

(Le code est toujours le même que celui dans mon post de tête; le site est le suivant: www3.behostings.be).
Modifié par mOrbide (19 Dec 2007 - 17:19)
Hello,

en l'occurrence le vrai problème est d'utiliser une balise <map> dans ton cas Smiley cligne !

Pour être plus clair, ton site devrait être accessible même sans image et sans css, or si tu désactives les images on ne voit plus rien Smiley scared !

Une solution possible serait de mettre dans le header tes drapeaux directement dans le code html en float:right; avec un alt qui va bien et un <h1> qui serait également un lien sous la forme :
<h1><a href="./" title="Revenir à la page d'accueil"><img src="mon_header_sans_les_drapeaux.gif" alt="BeHostings.be - Retour à l'accueil" /></a></h1>

A+ Smiley smile
Bonjour.

C'est ce que j'avais fait un début, et ça fonctionnait très bien. Mais par après le client m'a demandé d'également rendre le logo du header clickable (et de le faire pointer vers la home page) et, par soucis de simplicité, j'ai donc opté pour une image clickable avec 3 zones.

De plus, je travaille actuellement pour un autre client qui veut un menu entièrement graphique (des icones clickables). Pour ce faire j'ai à nouveau utilisé une image mappée, mais qui ne fonctionne toujours pas sous IE.

Merci donc pour ce coup de main: je me rends bien compte que ça serait plus propre, mais ça ne résout pas vraiment mon problème Smiley decu
Modifié par mOrbide (19 Dec 2007 - 18:08)
Bonjour,

Corriger l'attribut usemap:

usemap="#map"


(Le caractère # est vital : le contenu de usemap doit être une URI pour que l'image MAP soit prise en compte Smiley cligne )
Modifié par Laurent Denis (22 Dec 2007 - 06:33)
Damn, c'était donc ça...
Un tout grand merci ! Ca m'enlève vraiment un poids pénible.

En passant, meilleurs voeux à tous.
C'est sincère; bien qu'on ne se connaisse pas le moins du monde, chaque fois que que je passe ici on me répond avec patience et précision. Alsacreations et sa communauté sont une ressource précieuse. Merci à tous Smiley smile et à l'an prochain !
Sujet clos
Aller à