Image rotative via bouton HTML/CSS/Java

[Résolu/Fermé]
Signaler
Messages postés
183
Date d'inscription
mardi 14 décembre 2010
Statut
Membre
Dernière intervention
26 septembre 2017
-
 Utilisateur anonyme -
Bonjour a tous, alors voilà, je vous explique vite fait comment j'en suis arrivé là :

Je suis actuellement en terminale STI2D (sin) et j'ai un site a faire pour une revue de projet. J'aimerais pour le design, avoir une sorte d'image qui tourne en fonction de la position de notre souris. Plus exactement, en fonction du lien sur lequel on se trouve.

*Moment de solitude puisque personne n'as rien compris*

Alors je vous faire une petite image
http://img4.hostingpics.net/pics/736585CCM.png

(Tout en espérant que ce soir plus clair.)

Je vous montre mon code HTML/CSS (pour le moment l'image tourne sur elle même quand on passe la souris dessus mais à ce que j'ai cru comprendre en farfouillant sur le net j'ai vu que nous aurions besoin de java alors si quelqu'un peut m'aider :D )

Le HTML :

<!DOCTYPE html>
<html>
	<head>
		<title>test</title>
		<link rel="stylesheet" href="css/principal.css"/>
	</head>

	<body>

		<div class="imagemenu">
			<img src="images/menu2.png"/>
		</div>

		<!-- Mes liens sont gros simplement parce qu'il change d'image quand 
		on passe la souris dessus ^^ -->
		<a class="about" href="page.html"
			onMouseOver="document.img_1.src='images/about2.png';"
			onMouseOut="document.img_1.src='images/about.png';">
			<img class="img" name="img_1" src="images/about.png">
		</a>

		<a class="videolive" href="page.html"
			onMouseOver="document.img_1.src='images/videolive2.png';"
			onMouseOut="document.img_1.src='images/videolive.png';">
			<img class="img" name="img_1" src="images/videolive.png">
		</a>
	</body>
</html>



LE CSS :

body
{
	background-color: black;
}

.imagemenu {
-moz-transition-duration:5s;
-moz-transition-timing-function:linear;
-webkit-transition-duration:5s;
-webkit-transition-timing-function:linear;
transition-duration:5s;
transition-timing-function:linear;
position: absolute;
margin-left: -200px;
margin-right: auto;
margin-top: 200px;
width: 350px;
}

.imagemenu:hover {
	-moz-transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
}

.about
{
	position: absolute;
	margin-top: 480px;
	margin-left: 120px;
}


Alors si il faut du java ou quoi, j'aimerais bien qu'on m'explique ^^.
Merci beaucoup d'avance :)

*-- Oui cela rend ma signature complètement fausse mais chut ! --*

3 réponses

Messages postés
183
Date d'inscription
mardi 14 décembre 2010
Statut
Membre
Dernière intervention
26 septembre 2017
26
Un piti up svp :)

salut, tu veux ca ?

http://pour-ccm.zz.mu/ccm.html
Messages postés
183
Date d'inscription
mardi 14 décembre 2010
Statut
Membre
Dernière intervention
26 septembre 2017
26
Ouais exactement x)
Utilisateur anonyme
ben vas 'y récupère le code et met en résolu !