Onmouseover + Box Shadow
Onmouseover + Box Shadow
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...
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...
Re: Onmouseover + Box Shadow
Bonjour,
On peut séparer les instructions js par un ; et donc ajouter tout ce qu'on veut en plus :
remarque la propriété CSS devient la propriété JS
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' "
Code : Tout sélectionner
box-shadow
Code : Tout sélectionner
boxShadow
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php
https://www.toutjavascript.com/livre/index.php
Re: Onmouseover + Box Shadow
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......
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......
Re: Onmouseover + Box Shadow
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
https://www.toutjavascript.com/livre/index.php
Re: Onmouseover + Box Shadow
tres sympas, merci beaucoup.....
Re: Onmouseover + Box Shadow
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 :Pino76 a écrit : ↑29 mars 2023, 12:48Bonjour à 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...
<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é.
Re: Onmouseover + Box Shadow
vraiment apprécié, merci beaucoup.webmaster a écrit : ↑29 mars 2023, 21:38Le code complet serait : geometry dash breezeCode : Tout sélectionner
onmouseover="image.src='image1.jpg'; image.style.boxShadow='10px 5px 5px black' " onmouseout="image.src='image2.jpg'; box-shadow: unset "