Problème "Padding" HTML-CSS
Résolu
Bonjour tout le monde,
En vue d'un projet scolaire, je suis en train de préparer un site. Jusque là, tout va bien. Sauf que j'ai un problème avec les liens que j'ai mis sur les image. Je voudrais que seulement le clique dans la zone orange fait la redirection vers une autre page sauf que les zones rouges (Où j'ai mis "padding-left" et "padding-buttom") servent aussi à la redirection. Je voudrais, si possible, que la redirection soit exclusivement réservé à la zone orange tout en conservant les paddings.
Merci d'avance de vos réponses.
En vue d'un projet scolaire, je suis en train de préparer un site. Jusque là, tout va bien. Sauf que j'ai un problème avec les liens que j'ai mis sur les image. Je voudrais que seulement le clique dans la zone orange fait la redirection vers une autre page sauf que les zones rouges (Où j'ai mis "padding-left" et "padding-buttom") servent aussi à la redirection. Je voudrais, si possible, que la redirection soit exclusivement réservé à la zone orange tout en conservant les paddings.
Merci d'avance de vos réponses.
Configuration: Windows 10/ Chrome 80.0.3987.122
5 réponses
-
ModérateurBonjour
Sans voir ton code il sera impossible de t'aider
-
Bonsoir,
le padding c'est la marge interne de l'élément, ici l'image.
Le clic passe par un lien donc concerne tout ce qui est contenu dans le lien: ici une image et ses marges.
Pour délimiter une zone je pense le plus simple est de passer par les area map comme ceci:
(c'est assez simple avec un rectangle en plus)
https://www.w3schools.com/TAGS/tag_area.asp
Sinon une autre solution serait de mettre des éléments invisibles(comme un div) en superposition(donc hors du lien avec la balise "a" ), 4 un par 'bord' où on doit empêcher le clic mais ça me paraît nettement plus compliqué pour le même résultat.-
éventuellement il y a ça aussi si on veut utiliser le CSS, ça consiste juste à masquer une partie de l'image donc je ne sais pas si ça peut correspondre ou alors il faut aussi adapter les marges.
https://www.w3schools.com/cssref/pr_pos_clip.asp
Bien sûr en utilisant clip il faut rajouter le lien comme c'est fait dans le code que vous nous montrez.
-
-
Merci de votre réponse, je teste dans les plus brefs délais et je vous dis ça a fonctionné.
-
ModérateurBonjour,
Tu peux aussi déplacer ton id "g" ailleurs.
Dans la div corps ou en ajouter une autre
par exemple<div class="corps"> <br /><br /><br /> <div id="g"> <a href="/redirect/1.html"> <img src="img/1.png" onmouseover="this.src='img/affAnime/2.png';" onmouseout="this.src='img/affAnime/1.png'"/> </a> </div> </div>
je te conseille également d'éviter de mettre du code JS directement dans les attributs..
Utilises plutôt des fonctions.
par exemple<div class="corps"> <br /><br /><br /> <div id="g"> <a href="/redirect/1.html"> <img src="img/1.png" onmouseover="changeImg(this,'2.png');" onmouseout="changeImg(this,'1.png');"/> </a> </div> </div> <script type="text/javascript"> function changeImg(elm,imgName){ elm.src='img/affAnime/'+ imgName; } </script>
-
Problème résolu !
"Sinon une autre solution serait de mettre des éléments invisibles" -Haround
Solution : J'ai fais une image .png 1px*1px que j'ai redimensionné avec le css :#espace{ height: 300px; width: 75px; }
Merci de vos réponses ^^
