Image rotative via bouton HTML/CSS/Java

Résolu/Fermé

Nyttrom Messages postés 183 Date d'inscription mardi 14 décembre 2010 Statut Membre Dernière intervention 26 septembre 2017 - 20 déc. 2013 à 15:36
Utilisateur anonyme - 21 déc. 2013 à 18:04

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 ! --*

A voir également:

Image rotative via bouton HTML/CSS/Java
Waptrick java football - Télécharger - Jeux vidéo
Jeux java itel football - Télécharger - Jeux vidéo
Java apk - Télécharger - Langages
Image iso - Guide
Editeur html - Télécharger - HTML

3 réponses

Réponse 1 / 3

Nyttrom Messages postés 183 Date d'inscription mardi 14 décembre 2010 Statut Membre Dernière intervention 26 septembre 2017 26
20 déc. 2013 à 16:34

Un piti up svp :)

Réponse 2 / 3

Utilisateur anonyme
20 déc. 2013 à 22:09

salut, tu veux ca ?

http://pour-ccm.zz.mu/ccm.html

Réponse 3 / 3

Nyttrom Messages postés 183 Date d'inscription mardi 14 décembre 2010 Statut Membre Dernière intervention 26 septembre 2017 26
21 déc. 2013 à 17:23

Ouais exactement x)

Utilisateur anonyme
21 déc. 2013 à 18:04

ben vas 'y récupère le code et met en résolu !

Discussions similaires

telechargement gratuit de jeux pour telephone

Téléchargement de la Bible en français

Télécharger des jeux Java ?