Effet ROLLOVER CSS
Fermé
oursinus maritimus
Messages postés
48
Date d'inscription
vendredi 17 avril 2009
Statut
Membre
Dernière intervention
13 février 2015
-
26 janv. 2010 à 00:11
oursinus maritimus Messages postés 48 Date d'inscription vendredi 17 avril 2009 Statut Membre Dernière intervention 13 février 2015 - 29 janv. 2010 à 18:01
oursinus maritimus Messages postés 48 Date d'inscription vendredi 17 avril 2009 Statut Membre Dernière intervention 13 février 2015 - 29 janv. 2010 à 18:01
A voir également:
- Effet ROLLOVER CSS
- Effet miroir word - Guide
- Restreindre instagram effet - Guide
- Effet paillette illustrator ✓ - Forum Photoshop
- Cet effet requiert une accélération gpu - Forum Windows 10
- Css premier plan ✓ - Forum CSS
7 réponses
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
26 janv. 2010 à 18:10
26 janv. 2010 à 18:10
Les effets rollover se font en css avec les images déclarées en bakground. Donc pas avec une image déclarée dans le code html.
Ou alors il faut le faire en javascript.
Donc, laisse tomber ce code, et reprends les tutos pas à pas.
On ne pourra pas te beaucoup dire mieux ici...
Ou alors il faut le faire en javascript.
Donc, laisse tomber ce code, et reprends les tutos pas à pas.
On ne pourra pas te beaucoup dire mieux ici...
ifisch
Messages postés
188
Date d'inscription
mardi 26 février 2008
Statut
Membre
Dernière intervention
21 octobre 2015
17
26 janv. 2010 à 00:14
26 janv. 2010 à 00:14
Bonsoir, par exemple : https://www.google.fr/search?q=rollover+css&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a&gws_rd=ssl . Le premier lien a l'air très bien :)
oursinus maritimus
Messages postés
48
Date d'inscription
vendredi 17 avril 2009
Statut
Membre
Dernière intervention
13 février 2015
26 janv. 2010 à 18:00
26 janv. 2010 à 18:00
Bonjour ifisch, merci pour la réponse. Mais, j'ai déjà regardé ce tutoriel ainsi que plusieurs autres. Mais, étant débutant, je n'y comprend rien. J'ai réussi à faire le reste de mon site sur Kompozer avec des tutoriaux, mais, là je bloque pour ces effets Rollover.
Je te redonne les caractéristiques d'une image par exemple, lorsqu'elle est insérée dans Kompozer:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>brouillon 2</title>
</head>
<body>
<img style="width: 109px; height: 64px;"
alt="double bouton accueil"
src="file:///D:/oursinus/Site%20Internet/www/Rollover/images/Boutons%20Accueil%20Cr%E9ations%20Contact/Double-Bouton-Accueil.jpg">
</body>
</html>
Si tu peux me dire quels sont les codes CSS à rentrer pour la convertir en effet rollover? Peux tu me dire le procédé étape par étape, pour faire du rollover sur kompozer avec cet exemple d'image double bouton accueil?
Merci d'avance pour la réponse.
Je te redonne les caractéristiques d'une image par exemple, lorsqu'elle est insérée dans Kompozer:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>brouillon 2</title>
</head>
<body>
<img style="width: 109px; height: 64px;"
alt="double bouton accueil"
src="file:///D:/oursinus/Site%20Internet/www/Rollover/images/Boutons%20Accueil%20Cr%E9ations%20Contact/Double-Bouton-Accueil.jpg">
</body>
</html>
Si tu peux me dire quels sont les codes CSS à rentrer pour la convertir en effet rollover? Peux tu me dire le procédé étape par étape, pour faire du rollover sur kompozer avec cet exemple d'image double bouton accueil?
Merci d'avance pour la réponse.
Utilisateur anonyme
26 janv. 2010 à 18:41
26 janv. 2010 à 18:41
On ne pourra pas te beaucoup dire mieux ici...
J'aime ta confiance en toi ^^ :p
J'aime ta confiance en toi ^^ :p
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
26 janv. 2010 à 18:47
26 janv. 2010 à 18:47
C'est surtout que je ne suis pas adepte de la réinvention de la roue ;)
oursinus maritimus
Messages postés
48
Date d'inscription
vendredi 17 avril 2009
Statut
Membre
Dernière intervention
13 février 2015
28 janv. 2010 à 12:37
28 janv. 2010 à 12:37
Ok , merci, je vais reprendre les tutoriels.
oursinus maritimus
Messages postés
48
Date d'inscription
vendredi 17 avril 2009
Statut
Membre
Dernière intervention
13 février 2015
29 janv. 2010 à 18:01
29 janv. 2010 à 18:01
Salut notobe et Alexis-pires,
J'ai trouvé un tuto assez simple qui me permet de faire mes boutons rollovers sur Photoshop CS4, et de les envoyer sur Kompozer après. C'est en html, c'est peut être possible?
J'ai créé des images.gif sur Photoshop en cliquant sur fenêtre animation (=équivalent d'adobe Image Ready). Il y a deux états pour chacun de mes boutons. 1 au repos et l'autre over.
Voici les caractéristiques d'une image par exemple, lorsqu'elle est insérée dans Kompozer, avec un effet rollover html qui fonctionne bien:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>brouillon 2</title>
</head>
<body>
<img style="width: 328px; height: 35px;"
alt="bouton adresse mail repos"
src="file:///D:/oursinus/Site%20Internet/www/Rollover/images/Bouton%20Adresse%20Mail/Bouton-Adresse-Mail%20Repos.gif"
onmouseover="this.src='file:///D:/oursinus/Site%20Internet/www/Rollover/images/Bouton%20Adresse%20Mail/Bouton-Adresse-Mail%20Over.gif'"
onmouseout="this.src='file:///D:/oursinus/Site%20Internet/www/Rollover/images/Bouton%20Adresse%20Mail/Bouton-Adresse-Mail%20Repos.gif'">
</body>
</html>
J'aimerai mettre cette image en position absolue avec l'effet rolover html en même temps est-ce vraiment impossible? Quels son les codes à mettre?
Voici les caractéristiques de l'image en position absolue qui fonctionne bien (mais sans l'effet rollover que je n'arrive pas à lui appliquer):
<div style="bouton adresse mail Repos:url(chemin-de-ton-/image1.gif); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:0;"></div>
<div style="bouton adresse mail Repos:url(chemin-de-ton-/image2.gif); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:1;"></div>
Peut-on faire:
<div style="bouton adresse mail Repos:url(chemin-de-ton-/image1.gif); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:0;"></div>
<div style="bouton adresse mail Repos:url(chemin-de-ton-/image2.gif); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:1;"></div>
onmouseover="this.src='file:///D:/oursinus/Site%20Internet/www/Rollover/images/Bouton%20Adresse%20Mail/Bouton-Adresse-Mail%20Over.gif'"
onmouseout="this.src='file:///D:/oursinus/Site%20Internet/www/Rollover/images/Bouton%20Adresse%20Mail/Bouton-Adresse-Mail%20Repos.gif'">
J'ai peut être loupé un truc? Merci d'avance pour la réponse.
J'ai trouvé un tuto assez simple qui me permet de faire mes boutons rollovers sur Photoshop CS4, et de les envoyer sur Kompozer après. C'est en html, c'est peut être possible?
J'ai créé des images.gif sur Photoshop en cliquant sur fenêtre animation (=équivalent d'adobe Image Ready). Il y a deux états pour chacun de mes boutons. 1 au repos et l'autre over.
Voici les caractéristiques d'une image par exemple, lorsqu'elle est insérée dans Kompozer, avec un effet rollover html qui fonctionne bien:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>brouillon 2</title>
</head>
<body>
<img style="width: 328px; height: 35px;"
alt="bouton adresse mail repos"
src="file:///D:/oursinus/Site%20Internet/www/Rollover/images/Bouton%20Adresse%20Mail/Bouton-Adresse-Mail%20Repos.gif"
onmouseover="this.src='file:///D:/oursinus/Site%20Internet/www/Rollover/images/Bouton%20Adresse%20Mail/Bouton-Adresse-Mail%20Over.gif'"
onmouseout="this.src='file:///D:/oursinus/Site%20Internet/www/Rollover/images/Bouton%20Adresse%20Mail/Bouton-Adresse-Mail%20Repos.gif'">
</body>
</html>
J'aimerai mettre cette image en position absolue avec l'effet rolover html en même temps est-ce vraiment impossible? Quels son les codes à mettre?
Voici les caractéristiques de l'image en position absolue qui fonctionne bien (mais sans l'effet rollover que je n'arrive pas à lui appliquer):
<div style="bouton adresse mail Repos:url(chemin-de-ton-/image1.gif); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:0;"></div>
<div style="bouton adresse mail Repos:url(chemin-de-ton-/image2.gif); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:1;"></div>
Peut-on faire:
<div style="bouton adresse mail Repos:url(chemin-de-ton-/image1.gif); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:0;"></div>
<div style="bouton adresse mail Repos:url(chemin-de-ton-/image2.gif); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:1;"></div>
onmouseover="this.src='file:///D:/oursinus/Site%20Internet/www/Rollover/images/Bouton%20Adresse%20Mail/Bouton-Adresse-Mail%20Over.gif'"
onmouseout="this.src='file:///D:/oursinus/Site%20Internet/www/Rollover/images/Bouton%20Adresse%20Mail/Bouton-Adresse-Mail%20Repos.gif'">
J'ai peut être loupé un truc? Merci d'avance pour la réponse.
