Sujet Précédent Sujet Suivant

Création d'une zone cliquable sur une image

Résolu/Fermé
Obare Messages postés 31 Date d'inscription samedi 19 janvier 2008 Statut Membre Dernière intervention 8 septembre 2018 - 28 janv. 2010 à 12:04
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 - 11 déc. 2010 à 18:54
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>
A voir également:

15 réponses

Réponse 1 / 15
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
28 janv. 2010 à 12:18
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 ...
:-)
0
Réponse 2 / 15
Obare Messages postés 31 Date d'inscription samedi 19 janvier 2008 Statut Membre Dernière intervention 8 septembre 2018
28 janv. 2010 à 12:30
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?
0
Réponse 3 / 15
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
28 janv. 2010 à 14:57
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'
:-)
0
Réponse 4 / 15
Obare
28 janv. 2010 à 15:08
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?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 15
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
28 janv. 2010 à 15:10
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 !
0
Réponse 6 / 15
Obare
28 janv. 2010 à 15:32
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?
0
Réponse 7 / 15
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
28 janv. 2010 à 16:10 
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 ...
0
Réponse 8 / 15
Obare Messages postés 31 Date d'inscription samedi 19 janvier 2008 Statut Membre Dernière intervention 8 septembre 2018
28 janv. 2010 à 16:31
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.
0
Réponse 9 / 15
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
28 janv. 2010 à 16:59 
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 ...
0
Réponse 10 / 15
Obare Messages postés 31 Date d'inscription samedi 19 janvier 2008 Statut Membre Dernière intervention 8 septembre 2018
28 janv. 2010 à 17:23
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.
0
Réponse 11 / 15
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
28 janv. 2010 à 17:36
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.
0
Réponse 12 / 15
Obare Messages postés 31 Date d'inscription samedi 19 janvier 2008 Statut Membre Dernière intervention 8 septembre 2018
28 janv. 2010 à 17:47
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.
0
Réponse 13 / 15
Obare Messages postés 31 Date d'inscription samedi 19 janvier 2008 Statut Membre Dernière intervention 8 septembre 2018
28 janv. 2010 à 17:56
OK problème résolut en codant avec du PHP, qui calcul en fonction de la résolution les zones cliquables.
0
Réponse 14 / 15
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
28 janv. 2010 à 17:59
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...
0
Réponse 15 / 15
khady
11 déc. 2010 à 18:04
je voudrais l'exercice au complet avec la feuille html et css ainsi que en meme tems la conception d'image
0
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
11 déc. 2010 à 18:54
faut te la mettre en ligne aussi ?
inscris-toi ici c'est gratuit !
après tu pourras créer ton post perso :-)
0

Discussions similaires

Image cliquable dans html
pau -
efS -

5 réponses
Vidéo : comment changer sa zone géographique ?
azerty_42 -
tiloli -

8 réponses
&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
comment insérer une image cliquable sur la page html?
nawras70 -
Utilisateur anonyme -

4 réponses