Onmouseover + Box Shadow

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Pino76
Messages : 3
Enregistré le : 29 mars 2023, 12:45

Onmouseover + Box Shadow

Message par Pino76 » 29 mars 2023, 12:48

Bonjour à Tous.
Je me permet de déranger le Forum pour une question à la quelle je ne sais pas donner réponse. Je ne suis pas un programmeur, mais j'aime connaître. Pour mon petit site j'utilise souvent l'event OnMouseOver et Out, qui me permet l'affichage d'images au passage. Ya t il possibilité d'ajouter une ombre même réglable a ce type de script, pour rendre cette image plus conviviale. Je sais le fonction "box-shadow" le permet, mais comment?
(area shape="rect" coords="000,000,000,000" onmouseover="image.src='image1.jpg'"onmouseout="image.src='image2.jpg' " />
… Merci beaucoup...

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Onmouseover + Box Shadow

Message par webmaster » 29 mars 2023, 12:57

Bonjour,

On peut séparer les instructions js par un ; et donc ajouter tout ce qu'on veut en plus :

Code : Tout sélectionner

onmouseover="image.src='image1.jpg'; image.style.boxShadow='''10px 5px 5px black' "
remarque la propriété CSS

Code : Tout sélectionner

box-shadow
devient la propriété JS

Code : Tout sélectionner

boxShadow
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Pino76
Messages : 3
Enregistré le : 29 mars 2023, 12:45

Re: Onmouseover + Box Shadow

Message par Pino76 » 29 mars 2023, 19:52

Merci beaucoup pour la réponse. Donc si je partage la commande je peux ajouter le style a chaque onmouse ou alors juste pour "over" et laisser le "out" normal...
onmouseover="image.src='image1.jpg'; image.style.boxShadow='''10px 5px 5px black'; "onmouseout="image.src='image2.jpg';image.style.boxShadow='''10px 5px 5px black'; " />
Merci......

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Onmouseover + Box Shadow

Message par webmaster » 29 mars 2023, 21:38

Le code complet serait :

Code : Tout sélectionner

onmouseover="image.src='image1.jpg'; image.style.boxShadow='10px 5px 5px black' " onmouseout="image.src='image2.jpg'; box-shadow: unset "
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Pino76
Messages : 3
Enregistré le : 29 mars 2023, 12:45

Re: Onmouseover + Box Shadow

Message par Pino76 » 30 mars 2023, 01:11

tres sympas, merci beaucoup.....

drebotti4
Messages : 2
Enregistré le : 12 mars 2024, 23:26

Re: Onmouseover + Box Shadow

Message par drebotti4 » 12 mars 2024, 23:30

Pino76 a écrit :
29 mars 2023, 12:48
Bonjour à Tous.
Je me permet de déranger le Forum pour une question à la quelle je ne sais pas donner réponse. Je ne suis pas un programmeur, mais j'aime connaître. Pour mon petit site j'utilise souvent l'event OnMouseOver et Out, qui me permet l'affichage d'images au passage. KinitoPET Ya t il possibilité d'ajouter une ombre même réglable a ce type de script, pour rendre cette image plus conviviale. Je sais le fonction "box-shadow" le permet, mais comment?
(area shape="rect" coords="000,000,000,000" onmouseover="image.src='image1.jpg'"onmouseout="image.src='image2.jpg' " />
… Merci beaucoup...
Bonjour! Pour ajouter une ombre à une image lorsqu'on survole avec la souris, vous pouvez utiliser la propriété CSS box-shadow. Voici comment vous pourriez l'ajouter à votre script :

<area shape="rect" coords="000,000,000,000" onmouseover="image.src='image1.jpg'; this.style.boxShadow='2px 2px 5px rgba(0, 0, 0, 0.5)';" onmouseout="image.src='image2.jpg'; this.style.boxShadow='none';" />

Cela ajoute une ombre de 2 pixels de décalage à droite et en bas, avec un flou de 5 pixels et une opacité de 50%. Vous pouvez ajuster les valeurs pour obtenir l'effet désiré.

Sethlarke
Messages : 1
Enregistré le : 26 mars 2024, 10:19

Re: Onmouseover + Box Shadow

Message par Sethlarke » 26 mars 2024, 10:20

webmaster a écrit :
29 mars 2023, 21:38
Le code complet serait :

Code : Tout sélectionner

onmouseover="image.src='image1.jpg'; image.style.boxShadow='10px 5px 5px black' " onmouseout="image.src='image2.jpg'; box-shadow: unset "
vraiment apprécié, merci beaucoup.

Répondre