CSS : Délimiter une zone pour souris sur une image par CardiartDe - page 1

30 décembre 2018 à 19:57:31

Salut à tous !

Bossant l'HTML depuis peu, je suis confronté à un problème pour un projet :
Je souhaiterais faire apparaitre une image sur une autre, et cela via le passage de la souris. J'arrive à peu près à le faire mais le soucis c'est que j'aimerais définir une zone précise dans mon image et non l'image entière.
(Exemple : l'image représente un coucher de Soleil sur la mer ; et bien je souhaiterais qu'au passage de la souris sur la zone du Soleil, apparaisse une image de Lune pour le remplacer)

J'espère que vous me comprendrez et surtout que vous pourrez m'aider ! Merci d'avance à vous

Zoki_Marciano

30 décembre 2018 à 20:29:10

un hover quoi?

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

CardiartDe

30 décembre 2018 à 21:05:15

<html>



<head>
		<title>POJ</title>

		<style type="text/css"> 
				a.tooltip #FF {
				display: inline;
				width: 1050px;
				height: 730px;
				top: 8px;
				left: 8px;
				}

				a.tooltip:hover #FF  {
				display: inline;
				position: absolute;;
				}
		</style>
</head>



<body>
		<a class="tooltip" href="#">
		<img src="Dessin.png" alt="details" width="1050px" height="730px'" />

		<img id="FF" src="Chapeau.png" alt="details" width="1300px" height="730px" />

		</a>
</body>





</html>

Zoki_Marciano a écrit:

un hover quoi?

Bien j'ai mis un hover. Mais je n'arrive pas à modifier la zone de survol...
Pour reprendre l'exemple : quand le curseur n'est pas sur l'image il n'y a pas de modifications le soleil est là, normal (image1) ; mais dès que le curseur passe sur l'image, au niveau de la mer par exemple, alors le Soleil se change en Lune (image2). Moi je voudrais que cela se fasse quand le curseur est sur le Soleil (image3), pas avant x)

-
Edité par CardiartDe 30 décembre 2018 à 21:13:45

Zoki_Marciano

30 décembre 2018 à 23:40:50

C'est la balise <area> qu'il te faut je pense :

https://developer.mozilla.org/fr/docs/Web/HTML/Element/area

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

ChrisLebure

31 décembre 2018 à 11:56:41

Bonjour,

une solution est d'utiliser l'image soleil.jpg en fond d'une div, et de changer l'image de fond au survol de la div en lune.jpg, on peut même ajouter une transition, sympa

CardiartDe

31 décembre 2018 à 12:27:08

Zoki_Marciano a écrit:

C'est la balise <area> qu'il te faut je pense :

https://developer.mozilla.org/fr/docs/Web/HTML/Element/area

Je vais réessayer avec cette balise, mais il me semble que je rencontrais un problème à un moment donné...

ChrisLebure a écrit:

Bonjour,

une solution est d'utiliser l'image soleil.jpg en fond d'une div, et de changer l'image de fond au survol de la div en lune.jpg, on peut même ajouter une transition, sympa

Oui mais le problème avec div, c'est que ça ne résout pas le problème de la zone de survol... Elle restera l'image entière, hors je souhaiterais sélectionner une partie de cette image. Ou alors je n'ai peut-être pas compris votre solution

ChrisLebure

31 décembre 2018 à 14:12:30

une solution simple les backgrounds et une div :

https://codepen.io/farang/pen/BvmYpr

CardiartDe

2 janvier 2019 à 16:43:40

ChrisLebure a écrit:

une solution simple les backgrounds et une div :

https://codepen.io/farang/pen/BvmYpr

Super ! Merci pour la démo
Je n'arrive juste pas à savoir comment modifier l'endroit ou apparaît une image (ici la Lune).

Pour reprendre notre exemple, si j'ai envie de faire apparaître d'autres éléments, de la même manière, par exemple une mouette quand on passe le curseur sur la gauche de l'image, un rocher sur une zone à droite ou que sais-je encore.

Sauriez-vous comment faire ?

ChrisLebure

2 janvier 2019 à 16:53:33

Hello,

là j'ai un peu triché, car le soleil était au centre de l'image de fond, donc j'ai seulement fait en sorte que la lune soit centrée et en haut de son conteneur, avec flex et justify-content:center;

A noter que j'ai utilisé dans la div contenant la lune, un gif transparent importé, car si on met une div vide (donc transparente) la transition de fonctionne plus.

Pour positionner exactement une div par exemple au dessus d'une mouette, il va falloir la positionner en position:absolute

Autre solution: utiliser une map sur la div conteneur,
https://www.w3schools.com/tags/tag_map.asp

Je vais essayer, à suivre...

lune, mouette, requin et le tout responsive :

https://codepen.io/farang/pen/aPEGbY

-
Edité par ChrisLebure 2 janvier 2019 à 18:16:15

CardiartDe

4 janvier 2019 à 20:29:33

Je vous remercie, ça m'a beaucoup aidé

CSS : Délimiter une zone pour souris sur une image

Supprimer

Modérer

Signaler le message aux modérateurs