5568 sujets

Sémantique web et HTML

Image map

Pages :
Bonjour, voilà je suis confronté à un problème usemap, je n'arrive pas à compléter cette étape, donc je m'adresse à vous bande de webmaster Smiley smile donc voilà mon code: 

<html>
<head></head>
<body>
Image:
<p align="center"><img src="http://upload.wikimedia.org/wikipedia/commons/0/01/Die_Gartenlaube_%281874%29_b_431.jpg" heigh="1000px" width="500px" usemap="#Map"></p>
	<map name="Lapins">	
		<area shape="rect"
		href="http://www.wikipedia.org/" 
		coords="0,0,48,28">
			
		<area shape="circle"
		href="http://www.wikipedia.org/" 
		coords="50,30,10">
		
		<area shape="poly" 
		href="http://www.wikipedia.org/" 
		coords="60,50,80,30,100,40,50,100">
	</map>
</body>
</html>

Et pourtant ça ne marche pas, je n'arrive pas à être redirigé sur wikipedia.org, où est le problème?
Modifié par Laurie-Anne (09 Nov 2011 - 11:21)
Bonjour,

Dans ton image, il faut changer
usemap="#Map"
Avec le nom de la map (Lapins). Sinon les deux éléments ne savent pas se "reconnaitre".
Salut,

La valeur de l'attribut usemap de ton image ne cible pas l'élément map parce que l'attribut name de ce dernier a une valeur différente de "Map". Il est donc normal que la carte cliquable ne soit pas trouvée.

Soit dit en passant, ton code HTML ne comporte pas de doctype : il faut en mettre un.

Édition : grillé par Laurie-Anne.
Modifié par Victor BRITO (09 Nov 2011 - 11:22)
Hello.

Tu n'as pas donné la même valeur a ton attribut usemap et à l'attribut name de ta map.
D'ailleurs remplace celui-ci par un attribut id, cette écriture est dépréciée (quoi que j'ai un doute concernant map).

Pas de doctype par contre? Dans l'état ton code ne valide pas.

Edit: Double grilled.
Re Edit: Et en plus je me suis planté sur le coup de name VS id.
Modifié par Florian_R (09 Nov 2011 - 11:30)
Florian_R a écrit :
D'ailleurs remplace celui-ci par un attribut id, cette écriture est dépréciée (quoi que j'ai un doute concernant map).

L'attribut name est accepté pour l'élément map (y compris en HTML 4.01 strict, XHTML 1.0 strict et HTML 5), qu'on peut doubler d'un attribut id de même valeur (cet attribut id étant obligatoire en XHTML 1).
Merci à tous pour toutes ces réponses très rapides, par contre pour quoi le doctype? Mais mon image ne se redirige toujours pas sur l'autre site, j'ai changer le nom map, mais ça ne va toujours pas.
Modifié par CineStudent (09 Nov 2011 - 11:38)
Le doctype sert à définir la version d'HTML ou d'XHTML utilisée.

Il est nottamment utile pour le navigateur qui sait ainsi comment interpréter la page (en mode standard, en mode quirks...).

Un doctype valide est, avant tout, nécessaire pour éviter les erreurs de rendu avec IE.
CineStudent a écrit :
Merci à tous pour toutes ces réponses très rapides, par contre à quoi sert le doctype?

À indiquer au navigateur dans quel langage est codé le document Web et dans quelle version et, par conséquent, quelle grammaire appliquer pour interpréter le plus correctement possible le document Web. Sans doctype, certains navigateurs (à commencer par IE) bascule dans un mode de rendu qu'on appelle le mode Quirks, qui est un mode de compatibilité avec du code HTML non respectueux des standards et dont les effets les plus connus sont l'absence de prise en compte des marges automatiques et l'utilisation d'un modèle de boîte différent du modèle standard.
D'accord j'ai compris, mais comment l'inscrire dans mon code? Et mon usemap ne va toujours pas. Est-ce un problème de coordonnées? Je ne suis pas sur mais je crois être en html 4.01, surement pas en xhtml.
Modifié par CineStudent (09 Nov 2011 - 11:43)
CineStudent a écrit :
D'accord j'ai compris, mais comment l'inscrire dans mon code?

Le doctype doit apparaître avant l'élément html.
CineStudent a écrit :
Je ne suis pas sur mais je crois être en html 4.01, surement pas en xhtml.

Effectivement. J'ajouterai que, comme tu utilises un attribut de mise en forme (align), tu dois adopter le doctype HTML 4.01 transitionnel, dont la syntaxe est détaillée dans cet article.
CineStudent a écrit :
Et mon usemap ne va toujours pas. Est-ce un problème de coordonnées?

As-tu pris en compte nos remarques concernant la différence de valeur d'attribut ?
J'ai mis
usemap="Map"
<map name="Map"
Oui j'en pris compte, mais pour l'id, est ce que je dois remplacer name par id, ou mettre:
<map name="Map" id="Map"
?
Effectivement je n'avais pas mis de # devant la valeur de mon usemap, mais malgré ça, ça ne va toujours pas.
L'image, quand je clic ça ne me dirige pas vers le site que je souhaite, voici mon texte:

<html>
<head></head>
<body>
<body vlink="000000">
<font color="ff0000">Image:</font>
	<p align="center"><img src="http://upload.wikimedia.org/wikipedia/commons/0/01/Die_Gartenlaube_%281874%29_b_431.jpg" heigh="1000px" width="500px" usemap="#Map"></p>
	<map name="Map" id="Map">	
		<area shape="rect"
		href="http://www.wikipedia.org/" 
		coords="0,0,48,28">
			
		<area shape="circle"
		href="http://www.wikipedia.org/" 
		coords="50,30,10">
		
		<area shape="poly" 
		href="http://www.wikipedia.org/" 
		coords="60,50,80,30,100,40,50,100">
	</map>
</body>
</html>
Pourrais-tu nous indiquer l'URL vers la page en question ?

Soit dit en passant, il y a une faute de frappe : tu as écrit heigh au lieu de height pour l'un des attributs de l'élément img.
Modifié par Victor BRITO (09 Nov 2011 - 12:15)
Désolé pour l'absence, alors oui merci pour la faute de frappe, je l'ai corrigé, mais quel url je dois vous indiquer? Tous sont écris dans le code.
bonjour,

j'ai fait un copié collé de ton code, cela fonctionne, regardes l'image jointe, dans le cercle rouge, tes 3 area sont dedans.

upload/38492-map.jpg
Ah ouai, merci... je suis quand même un peu stupide... Smiley smile Merci!

Sinon je suis confronté à un autre problème, voilà j'ai crée 3 carrés, et j'ai mis un texte dedans, mais j'aimerais que le texte soit en haut à gauche, comment faire? J'ai essayé plusieurs manoeuvres mais rien ne va, voilà le code:

<style>
.blocrouge, .blocbleu, .blocvert
{
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 50px;
	padding-bottom: 50px;
	border: solid 0px;
	border: solid 0px;
	margin-right: 15px;
	margin-left: 40px;
	position: absolute;
}
.blocvert 
{
	background-color: #0f0;
	top: 15%;
	left: 70px;
	width: 25px;
	height: 25px;
}
.blocbleu 
{
	background-color: #00f;
	top: 22%;
	left: 165px;
	height: 150px;
	width: 200px;
}
.blocrouge
{
	background-color: #f00;
	top: 38%;
	left: 325px;
	width: 470px;
	height: 400px;
}

</style>

<html>
<body>
<font color="ffffff">
	<div class="blocvert">Ceci est un bloc vert</div>
	<div class="blocbleu">Ceci est un bloc bleu</div>
	<div class="blocrouge">Ceci est un bloc rouge</div>
</font>
</body>
</html>

Modifié par CineStudent (09 Nov 2011 - 14:43)
Bonjour,

Pour l'histoire du texte que tu voudrais en haut à gauche dans tes blocs: tu as vu que tu as un padding-top de 50px et un padding-left de 50px également dans tes blocs, ce qui fait que ton texte sera bien en haut à gauche (c'est le comportement par défaut)... mais éloigné de 50px de chaque bord?

Remarques en vrac:
- Encore une fois tu travailles avec un code HTML invalide, sans Doctype.
- Tu as placé un élément STYLE en dehors de l'élément racine (c'est à dire avant la balise <html>), ce qui est invalide et par ailleurs peu logique.
- Dans ton premier exemple tu appelles une page directement sur un serveur de wikimedia.org. Ça s'appelle du hotlinking et c'est considéré comme une mauvaise pratique (les visites sur ta page vont consommer de la bande passante sur ce serveur tiers, et par ailleurs l'image pourrait être supprimée et ta page serait donc cassée...).
- Tu utilises un élément FONT pour déclarer une couleur de texte. Sais-tu que tu peux le faire directement dans ta feuille de styles? L'élément FONT est déprécié, et il est remplacé avantageusement par des styles CSS.
Pages :
Sujet clos
Aller à