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

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 ...
:-)

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?

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?

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?

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 ...

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.

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 ...

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.

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.

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.

OK problème résolut en codant avec du PHP, qui calcul en fonction de la résolution les zones cliquables.

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