Problème "Padding" HTML-CSS
Résolu
JeuneZouave
Messages postés
17
Statut
Membre
-
Haround -
Haround -
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
A voir également:
- Padding html
- Editeur html - Télécharger - HTML
- Espace en html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- Html download - Télécharger - HTML
- Nbsp html ✓ - Forum Webmastering
5 réponses
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.
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.
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.
Bonjour,
Tu peux aussi déplacer ton id "g" ailleurs.
Dans la div corps ou en ajouter une autre
par exemple
je te conseille également d'éviter de mettre du code JS directement dans les attributs..
Utilises plutôt des fonctions.
par exemple
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>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
<br /><br /> <div class="corps"> <br /><br /><br /> <a href="/redirect/1.html"><img id="g" src="img/1.png" onmouseover="this.src='img/affAnime/2.png';" onmouseout="this.src='img/affAnime/1.png'"/></a> </div>Pour le CSS :
#g{ padding-left: 75px; padding-bottom: 60px; }