EFFET ROLLOVER
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éé des images.gif sur Photoshop avec fenêtre animation (=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 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 en même temps est-ce possible? 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:url(chemin-de-ton-/image1.jpeg); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:0;"></div>
<div style="bouton adresse mail:url(chemin-de-ton-/image2.jpeg); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:1;"></div>
Merci d'avance pour la réponse
Voici les caractéristiques d'une image par exemple, lorsqu'elle est insérée dans Kompozer, avec un effet rollover 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 en même temps est-ce possible? 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:url(chemin-de-ton-/image1.jpeg); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:0;"></div>
<div style="bouton adresse mail:url(chemin-de-ton-/image2.jpeg); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:1;"></div>
Merci d'avance pour la réponse
A voir également:
- EFFET ROLLOVER
- 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
14 réponses
<img src="image.png" alt="Bouton" onmouseover="this.src = 'image_hover.png';" onmouseout="this.src = 'image.png';" />
salut avion-f16 merci pour la réponse!
Je ne comprends pas trop bien, il faut que je convertisse mes images .gif en .png sur Photoshop? ou jpeg en png? Est il nécessaire de les animer avec l'option image ready?
Et ensuite après les avoir insérer sur Kompozer, obtient-on le code source suivant (par exemple pour le bouton adresse mail) :
<div style="bouton adresse mail repos:url(chemin-de-ton-/image1.png); 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.png); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:1;"></div>
<img src="Bouton%20Adresse%20Mail.png" alt="Bouton-Adresse-Mail%20Repos.png" onmouseover="this.src = 'Bouton%20Adresse%20Mail-hover.png';" onmouseout="this.src = 'Bouton%20Adresse%20Mail.png';" />
J'aimerai que mes boutons aient un effet rollover et qu'ils soient en position absolue en même temps.
Merci pour ton aide
Je ne comprends pas trop bien, il faut que je convertisse mes images .gif en .png sur Photoshop? ou jpeg en png? Est il nécessaire de les animer avec l'option image ready?
Et ensuite après les avoir insérer sur Kompozer, obtient-on le code source suivant (par exemple pour le bouton adresse mail) :
<div style="bouton adresse mail repos:url(chemin-de-ton-/image1.png); 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.png); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:1;"></div>
<img src="Bouton%20Adresse%20Mail.png" alt="Bouton-Adresse-Mail%20Repos.png" onmouseover="this.src = 'Bouton%20Adresse%20Mail-hover.png';" onmouseout="this.src = 'Bouton%20Adresse%20Mail.png';" />
J'aimerai que mes boutons aient un effet rollover et qu'ils soient en position absolue en même temps.
Merci pour ton aide
Pour l'histoire des .png c'est un exemple, ça fonctionne avec n'importe quel format supporté par le navigateur.
Ok, on peut laisser ça en jpeg alors.
Peut tu me dire, si ce que j'ai marqué en dessous est juste pour cette image?
<div style="bouton adresse mail repos:url(chemin-de-ton-/image1.jpeg); 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.jpeg); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:1;"></div>
<img src="Bouton%20Adresse%20Mail.jpeg" alt="Bouton-Adresse-Mail%20Repos.jpeg" onmouseover="this.src = 'Bouton%20Adresse%20Mail-hover.jpeg';" onmouseout="this.src = 'Bouton%20Adresse%20Mail.jpeg';" />
Merci
Peut tu me dire, si ce que j'ai marqué en dessous est juste pour cette image?
<div style="bouton adresse mail repos:url(chemin-de-ton-/image1.jpeg); 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.jpeg); width:328px; height:35px; position:absolute;left:50%;margin-left:-60px; top:300px; z-index:1;"></div>
<img src="Bouton%20Adresse%20Mail.jpeg" alt="Bouton-Adresse-Mail%20Repos.jpeg" onmouseover="this.src = 'Bouton%20Adresse%20Mail-hover.jpeg';" onmouseout="this.src = 'Bouton%20Adresse%20Mail.jpeg';" />
Merci
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bouton adresse mail repos, c'est juste le nom de mon image que je veut tranformer en bouton. C'est une image où mon adresse mail est marqué dessus. Si tu veux on peut prendre une image qui s'appelle bouton accueil. (ça sera le bouton accueil de mon site). Ses caractéristiques en position absolue sont:
<div style="bouton accueil:url(chemin-de-ton-/image1.jpeg); width:109px; height:32px; position:absolute;left:50%;margin-left:-405px; top:205px; z-index:0;"></div>
<div style="bouton accueil:url(chemin-de-ton-/image2.jpeg); width:109px; height:32px; position:absolute;left:50%;margin-left:-405px; top:205px; z-index:1;"></div>
Pour faire un effet rollover sur cette image faut-il mettre?=
<div style="bouton accueil:url(chemin-de-ton-/image1.jpeg); width:109px; height:32px; position:absolute;left:50%;margin-left:-405px; top:205px; z-index:0;"></div>
<div style="bouton accueil:url(chemin-de-ton-/image2.jpeg); width:109px; height:32px; position:absolute;left:50%;margin-left:-405px; top:205px; z-index:1;"></div>
<img src="bouton accueil" alt="Bouton" onmouseover="this.src = 'bouton accueil_hover.jpeg';" onmouseout="this.src = 'bouton accueil.jpeg';" />
<div style="bouton accueil:url(chemin-de-ton-/image1.jpeg); width:109px; height:32px; position:absolute;left:50%;margin-left:-405px; top:205px; z-index:0;"></div>
<div style="bouton accueil:url(chemin-de-ton-/image2.jpeg); width:109px; height:32px; position:absolute;left:50%;margin-left:-405px; top:205px; z-index:1;"></div>
Pour faire un effet rollover sur cette image faut-il mettre?=
<div style="bouton accueil:url(chemin-de-ton-/image1.jpeg); width:109px; height:32px; position:absolute;left:50%;margin-left:-405px; top:205px; z-index:0;"></div>
<div style="bouton accueil:url(chemin-de-ton-/image2.jpeg); width:109px; height:32px; position:absolute;left:50%;margin-left:-405px; top:205px; z-index:1;"></div>
<img src="bouton accueil" alt="Bouton" onmouseover="this.src = 'bouton accueil_hover.jpeg';" onmouseout="this.src = 'bouton accueil.jpeg';" />
C'est du n'importe quoi ce que tu mets dans l'attribut 'style' : cet attribut ne peut contenir que du CSS !
Je le mets pas dans l'attribut 'style', je sais pas ce que c'est. Je mets ces codes dans la fenêtre source. Mais bon , je me plante peut être...
Peux-tu m'expliquer ce qu'est cet attribut 'style'? Et comment m'en servir? C'est là dedans qu'il faut rentrer les codes=
<img src="image.png" alt="Bouton" onmouseover="this.src = 'image_hover.png';" onmouseout="this.src = 'image.png';" />
Peux-tu m'expliquer ce qu'est cet attribut 'style'? Et comment m'en servir? C'est là dedans qu'il faut rentrer les codes=
<img src="image.png" alt="Bouton" onmouseover="this.src = 'image_hover.png';" onmouseout="this.src = 'image.png';" />
L'attribut style sert simplement à mettre du CSS directement sur la balise.
Et si je ne me trompe pas, tu peux mettre un lien en position:absolute donc je ne vois pas pourquoi tu veux utiliser un div.
Et si je ne me trompe pas, tu peux mettre un lien en position:absolute donc je ne vois pas pourquoi tu veux utiliser un div.
Pour le div, c'est pas fait exprès. Je sais pas utiliser ça.
Comment activer l'attribut style avec kompozer. Faut cliquer sur quoi?
Comment activer l'attribut style avec kompozer. Faut cliquer sur quoi?
Ok. je rentre dans le code source et pour mettre mon image insérée en effet rollover, que faut-il faire?