Créer une ancre à partir d'une zone d'image vers zone d'image
Phil
-
LeRebelge -
LeRebelge -
Bonjour
J'ai le soucis suivant, je suis sous dreamw8 et je cherche ancrer des zones d'une image vers d'autres zones de cette même image
En fait mon but, c'est que lorsque l'on clique sur la zone située en coordonnées 52,362,289,465 que cela me positionne en zone 497,1191,842,1304
comment définir qu'une zone de coordonnées porte un nom déterminé ?
Probablement de bêtes questions pour qui connait mais casse tête pour moi pour le moment..
merci de votre aide ou bon conseils
Phil
J'ai le soucis suivant, je suis sous dreamw8 et je cherche ancrer des zones d'une image vers d'autres zones de cette même image
<body>
<div align="left"><img src="picturespréparation formes et couleurs2b image 1280.jpg" width="1274" height="5806" border="0" usemap="#image1" />
<a name="carte" id="carte"></a>
<a name="pourlui" id="pourlui"></a>
<a name="pourelle" id="pourelle"></a>
<a name="menu" id="menu"></a>
<a name="pourelle" id="pourelle"></a>
<map name="image1" id="image1">
<area shape="rect" coords="52,362,289,465" href="#pourelle" />
<area shape="rect" coords="322,363,543,465" href="#pourlui" />
<area shape="rect" coords="602,363,879,466" href="#carte" />
<area shape="rect" coords="497,1191,842,1304" href="#" />
<area shape="rect" coords="454,3365,769,3489" href="#menu" />
<area shape="rect" coords="101,5731,264,5806" href="#menu" />
</map>
</div>
</body>
</html>
En fait mon but, c'est que lorsque l'on clique sur la zone située en coordonnées 52,362,289,465 que cela me positionne en zone 497,1191,842,1304
comment définir qu'une zone de coordonnées porte un nom déterminé ?
Probablement de bêtes questions pour qui connait mais casse tête pour moi pour le moment..
merci de votre aide ou bon conseils
Phil
A voir également:
- Créer une ancre à partir d'une zone d'image vers zone d'image
- Alternative zone telechargement - Accueil - Outils
- Créer une icone à partir d'une image - Guide
- Créer une image iso - Guide
- Creer un groupe whatsapp a partir d'un autre groupe - Guide
- Légender une image - Guide
1 réponse
Salut,
un lien interne à la page indique de pointer une ancre nommée quand vous cliquez dessus.
Donc:
va faire un lien vers l'élément qui est désigné par l'attribut name="pourelle"
Celui ci étant en dehors de votre image il ne correspond pas.
Il faut donc rajouter l'attribut name de l'élément ciblé,
comme ceci:
Il y a un problème et ce serait étonnant que votre image s'affiche. Le nom du fichier image ne doit pas comporter d'espaces ou d'accents (comme tout les fichiers et dossier sur le web).
Vous avez aussi oublié d’indiquer l'attribut alt d'une image qui est nécessaire pour une balise img.
https://www.w3schools.com/tags/tag_img.asp
C'est aussi vraiment pas recommandé de faire un menu avec des images. Celles ci ne pouvant être repéré pour le référencement comme un texte et encore moins ne permettent l'accessibilité(pour les mal entendants par exemple qui ne pourront pas entendre une version vocale) il faut au moins indiquer un texte écrit en texte(et non une image contenant du texte). L'accessibilité du web correspond à rendre accessible aux personnes handicapés et à tout les langages par le biais de traduction auto mais aussi et surtout à respecter le cadre d'un code HTML efficace et correctement compris par tout les programmes, comme ceux pour le référencement et les navigateurs web.
Il y a aussi d'autres inconvénients pratique que je ne détaillerais pas mais utiliser une image et ne pas indiquer un contenu de texte(il faut faire les 2 éventuellement) en menu est à éviter absolument.
Vous pouvez toujours faire ce que vous voulez mais en ajoutant les menus en textes par dessus l'image(en superposition par la mise en page CSS) qui dans ce cas n'a plus besoin d'avoir la map et area shape puisque les zones cliquables seront indiqués par les positions des textes.
Je vous recommande aussi d'éviter les facilités WYSIWYG fournies par Dreamweaver vu que vous l'utilisez ici en mode éditeur de texte. Le code fournit automatiquement par DW est très mauvais, difficile à mettre à jour et avoir une compatibilité. Ce genre d'outil est d'ailleurs abandonné depuis l'existence des C.M.S.(programme de gestionnaire de contenus) qui permettent des programmes beaucoup plus élaborés et respectueux des normes et standards du web ou de passer à un éditeur de texte gratuit qui propose des capacités en tout point quivalentes du mode éditeur de DW(coloration syntaxique, auto-complétion...) mais seront gratuit et empêcheront que vous ayez un script de vos pages mal écrit, incompréhensible pour un humain et autres problémes inhérents au WYSIWYG.
Dreamweacer c'est un peu comme des roulettes de stabilisation sur un vélo, pratique pour commencer à apprendre (et encore c'est plus un moyen d'avoir confiance parce que ça donne pas les bonnes façons de faire) mais une fois qu'on veut rouler normalement(ou écrire soi-même le code) cela sera plus une gêne qu'autre chose.
un lien interne à la page indique de pointer une ancre nommée quand vous cliquez dessus.
Donc:
<area shape="rect" coords="52,362,289,465" href="#pourelle" />
va faire un lien vers l'élément qui est désigné par l'attribut name="pourelle"
<a name="pourelle" id="pourelle"></a>
Celui ci étant en dehors de votre image il ne correspond pas.
Il faut donc rajouter l'attribut name de l'élément ciblé,
comme ceci:
<area name="pourelle" shape="rect" coords="497,1191,842,1304" />
Il y a un problème et ce serait étonnant que votre image s'affiche. Le nom du fichier image ne doit pas comporter d'espaces ou d'accents (comme tout les fichiers et dossier sur le web).
Vous avez aussi oublié d’indiquer l'attribut alt d'une image qui est nécessaire pour une balise img.
https://www.w3schools.com/tags/tag_img.asp
C'est aussi vraiment pas recommandé de faire un menu avec des images. Celles ci ne pouvant être repéré pour le référencement comme un texte et encore moins ne permettent l'accessibilité(pour les mal entendants par exemple qui ne pourront pas entendre une version vocale) il faut au moins indiquer un texte écrit en texte(et non une image contenant du texte). L'accessibilité du web correspond à rendre accessible aux personnes handicapés et à tout les langages par le biais de traduction auto mais aussi et surtout à respecter le cadre d'un code HTML efficace et correctement compris par tout les programmes, comme ceux pour le référencement et les navigateurs web.
Il y a aussi d'autres inconvénients pratique que je ne détaillerais pas mais utiliser une image et ne pas indiquer un contenu de texte(il faut faire les 2 éventuellement) en menu est à éviter absolument.
Vous pouvez toujours faire ce que vous voulez mais en ajoutant les menus en textes par dessus l'image(en superposition par la mise en page CSS) qui dans ce cas n'a plus besoin d'avoir la map et area shape puisque les zones cliquables seront indiqués par les positions des textes.
Je vous recommande aussi d'éviter les facilités WYSIWYG fournies par Dreamweaver vu que vous l'utilisez ici en mode éditeur de texte. Le code fournit automatiquement par DW est très mauvais, difficile à mettre à jour et avoir une compatibilité. Ce genre d'outil est d'ailleurs abandonné depuis l'existence des C.M.S.(programme de gestionnaire de contenus) qui permettent des programmes beaucoup plus élaborés et respectueux des normes et standards du web ou de passer à un éditeur de texte gratuit qui propose des capacités en tout point quivalentes du mode éditeur de DW(coloration syntaxique, auto-complétion...) mais seront gratuit et empêcheront que vous ayez un script de vos pages mal écrit, incompréhensible pour un humain et autres problémes inhérents au WYSIWYG.
Dreamweacer c'est un peu comme des roulettes de stabilisation sur un vélo, pratique pour commencer à apprendre (et encore c'est plus un moyen d'avoir confiance parce que ça donne pas les bonnes façons de faire) mais une fois qu'on veut rouler normalement(ou écrire soi-même le code) cela sera plus une gêne qu'autre chose.