Création d'une zone cliquable sur une image [Résolu/Fermé]

Signaler
Messages postés
31
Date d'inscription
samedi 19 janvier 2008
Statut
Membre
Dernière intervention
8 septembre 2018
-
Messages postés
23070
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
4 janvier 2021
-
Bonjour,
j'ai un problème avec mon code HTML, il ne veut pas définir la zone cliquable sur la photo que j'ai pourtant définie dans mon code. Dans ce code j'ai mis du CSS me permettant d'afficher mon image en fonction de la taille de la fenêtre. Quand je met en commentaire le CSS , cela fonctionne... Alors il y a t-il un moyen de définir la zone cliquable en CSS qui marcherait? Ou bien une autre solution me permettant de garder mes paramètres d'affichage?


<html >
<head>
<title>Nord de Seine Airsoft</title>

<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}

#arriere{
width : 100%;
height: 100%;
}

-->
</style>
</head>
<body>

<map name= "fond">
<area shape= "rect" coords="2368,1688,3238,1758" HREF="index.htm">
</map>

<img id="arriere" usemap="#fond" src="./Images/photoaccueil2.jpg" border=0 >


</body>

</html>

15 réponses

Messages postés
23070
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
4 janvier 2021
2 176
je viens juste de mettre une petite compil en ligne sur ce sujet, tu tombes bien ...
des liens vers les posts sur CCM et vers les ressources sur le net
IMAGE MAPPING
tu devrais y trouver au moins des idées si ce n'est la solution ...
:-)
Messages postés
31
Date d'inscription
samedi 19 janvier 2008
Statut
Membre
Dernière intervention
8 septembre 2018

Salut bg62, merci pour ta réponse.
Mais mon problème vient du conflit entre le CSS et l'HTML, car mon code HTML est bon, j'ai vérifié et revérifié.
Si tu veux voir ce que ça donne en ligne : http://nsa78.fr/
Bon après peut être que quelque chose m'échappe je suis encore débutant dans ce domaine, mais ce que je ne comprends pas c'est pourquoi le code HTML n'aime pas le CSS qui me permet de garder mon image en plein écran?
Il y a une parade à cela?
Messages postés
23070
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
4 janvier 2021
2 176
pas d'histoire de conflit du tout ....
- ton codage n'est pas bon : pas de doctype ni de charset ...
et pour ton problème:
<map name= "fond">
<area shape= "rect" coords="2368,1688,3238,1758" HREF="index.htm">
</map> 

il n'y a aucun mapping de fait, aucune zone cliquable ... donc rien ne peut fonctionner !
prend le temps de regarder les liens fournit et tu pourras obtenir un codage correct pour ton 'image'
:-)
Mais pourtant c'est le code qu'on est censé mettre, la preuve quand j'enlève la partie CSS cela fonctionne, pourquoi? Je ne vois pas en quoi il n'y a pas ce qu'il faut :s

Pour ce qui est du doctype et le charset, je ne sais pas encore a quoi ca correspond, je ne fais que débuter et jamais eu besoin de les utiliser donc vais chercher sur le web.. Mais c'est aussi une des raisons pour laquelle cela ne fonctionne pas?
Messages postés
23070
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
4 janvier 2021
2 176
as-tu pris le temps de regarder mon lien, d'aller sur un de ceux en ligne et d'essayer ?
non ... ben fais un effort !
Sisi d'ailleurs j'ai vu que je n'avais pas besoin de passer par le CSS pour dimensionner une image en fonction de la fenêtre de l'utilisateur :)
Mais cependant vu que j'apprends en ce moment le CSS, je ne comprends pas le code pour la photo de famille par exemple, ce qui fait que j'ai beau le regarder de haut en bas, je n'avance pas. Et ma question reste toujours la même: Pourquoi lorsque j'enlève le CSS, les zones cliquables fonctionnent?
Messages postés
23070
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
4 janvier 2021
2 176
je ne comprends pas le code pour la photo de famille par exemple

dans ce cas tu vas sur l'un des deux générateurs en ligne et tu auras le codage total de ton mapping ...
Messages postés
31
Date d'inscription
samedi 19 janvier 2008
Statut
Membre
Dernière intervention
8 septembre 2018

Bon et bien contre toute attente... Enfin si j'avais raison, tes générateurs de code, me donnent bien ce que j'avais trouvé avec mes area shape, mais cela ne fonctionne pas lorsqu'on se sert des paramètres width & height en pourcentage, ce qui est toujours le problème initial :p

Donc non, la réponse n'est pas dans tes liens et oui j'ai bien lut.
Messages postés
23070
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
4 janvier 2021
2 176
Donc non, la réponse n'est pas dans tes liens et oui j'ai bien lut.

dommage que je n'ai pas le temps maintenant, il faudrait à peu près moins d'une 1/2 heure pour que ce soit en ligne à partir de ces liens tellement c'est simple
prends une page vierge, pas de css, et intègre le mapping que tu obtiens en ligne dans la partie 'body', après tu verras ...
Messages postés
31
Date d'inscription
samedi 19 janvier 2008
Statut
Membre
Dernière intervention
8 septembre 2018

Oui, la ça fonctionne comme je l'ai dit plus haut, mais ce sera avec les dimensions par défaut de la photo. Mon soucis est que la photo est vraiment grande et donc, on ne voit qu'un tiers si je ne fais pas passer le width et height.
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
207
Mais enfin, c'est évident que ça ne peut pas fonctionner avec une image qui se redimensionne !

La zone de clic est définie à quelques 3000 px du haut de l'écran, comment veux-tu que ça rentre dans un écran normal ? L'image se redimensionne, mais la zone est en coordonnées absolues. Donc elle reste fixe et est inatteignable puisqu'on ne peut pas scroller.

Et puis mettre une photo de personnes, même cagoulées, qui se redimensionne et donc perd ses proportions, ça donne des choses du plus haut comique... Est-ce bien le but ?

De plus, pas besoin de mettre du texte sur l'image. La police utilisée n'est tout de même pas extraordinaire.
Donc, la photo en image de fond (réduite la photo, car là, une image de plus de 3 Mo, c'est du délire), du texte (du vrai) dans le code html, stylisé et positionné en bas à droite avec les CSS, et voilà, il n'y aura plus de problèmes.
Messages postés
31
Date d'inscription
samedi 19 janvier 2008
Statut
Membre
Dernière intervention
8 septembre 2018

Pas faux, je n'y avais pas pensé. M'enfin pour le coté évident, surement pour quelqu'un qui s'y connais bien pas pour quelqu'un qui n'en fait pas souvent ;)

Ensuite pour le coté comique dont tu parles, je ne sais pas quel écran tu as, mais on a fait des tests sur 5 résolutions différentes, et cela restait normal, rien de réellement comique.

Puis pour la police c'est une question de gouts et couleur, elle ne me plait pas, mais on m'a demandé de faire comme ça donc je fais.
Messages postés
31
Date d'inscription
samedi 19 janvier 2008
Statut
Membre
Dernière intervention
8 septembre 2018

OK problème résolut en codant avec du PHP, qui calcul en fonction de la résolution les zones cliquables.
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
207
Puis pour la police c'est une question de gouts et couleur, elle ne me plait pas, mais on m'a demandé de faire comme ça donc je fais.

On ne s'est pas compris je crois.
Ce n'est pas le problème que la police soit belle ou pas. C'est juste qu'elle est de forme courante (à part les T, mais bon). Donc, il n'y a pas besoin de la mettre en image, on peut avoir le même effet avec du vrai texte ce qui évite de faire une image mappée.

Quant à la résolution, il faut surtout penser que la fenêtre n'est pas toujours en plein écran.
Et que les barres latérales (par exemple) que l'on plie et déplie pour avoir accès à ses marques pages ou son historique, ça se fait couramment...
Donc, oui, ça donne des effets comiques...
je voudrais l'exercice au complet avec la feuille html et css ainsi que en meme tems la conception d'image
Messages postés
23070
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
4 janvier 2021
2 176
faut te la mettre en ligne aussi ?
inscris-toi ici c'est gratuit !
après tu pourras créer ton post perso :-)