Effet ROLLOVER CSS
oursinus maritimus
Messages postés
48
Date d'inscription
Statut
Membre
Dernière intervention
-
oursinus maritimus Messages postés 48 Date d'inscription Statut Membre Dernière intervention -
oursinus maritimus Messages postés 48 Date d'inscription Statut Membre Dernière intervention -
Bonjour, Je suis en train de faire un site sur Kompozer. Toutes mes pages sont faites et le navigation fonctionne bien. Par contre, j'aimerai appliquer des effets Rollover sur mes boutons, pour qu'ils changent d'aspect lorsqu'ils sont activés en passant la souris dessus. J'ai créé une double image en JPEG de chaque bouton, avec un aspect différent en haut et en bas. Je ne sais pas trop quoi taper comme code CSS.
Voici 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>
Quels sont les codes CSS à rentrer pour la convertir en effet rollover? Merci d'avance pour la réponse.
Voici 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>
Quels sont les codes CSS à rentrer pour la convertir en effet rollover? Merci d'avance pour la réponse.
A voir également:
- Effet ROLLOVER CSS
- Effet miroir word - Guide
- Effet miroir photo - Accueil - Photo
- Effet miroir telephone - Guide
- Effet ralenti video - Guide
- Photo effet dessin gratuit - Télécharger - Retouche d'image
7 réponses
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...
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 :)
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.