Rollover de 2 images en CSS ?
martine et chantal
Messages postés
485
Date d'inscription
Statut
Membre
Dernière intervention
-
martine et chantal Messages postés 485 Date d'inscription Statut Membre Dernière intervention -
martine et chantal Messages postés 485 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je commence tout juste à créer un site pour mon groupe.
je cherche à faire une interface simple mais quelque peu interactif.
J'ai suivis des cours sur le site du zéro (Très bon tuto pour apprendre les bases)
j'ai téléchargé Notepade++ et démarré quelques lignes
j'ai dessiné plusieurs cubes soudés dont certain me serviront de lien
ma bannière est mon ensemble de cubes.
j'ai ensuite dupliqué un des cubes sur photoshop et changé la couleur pour le rollover.
pour le moment j'ai réussi à placer un cube cliquable au bon endroit sur la bannière.
mais j'aimerai que celui-ci change de couleur au passage de la souris.
Je sais qu'il y a le javascript mais très franchement je me sens pas assez en forme pour attaquer un nouveau tuto sachant en plus que ça peut marcher en CSS.
Alors j'ai bien entendu cherché sur plusieurs tuto avant de poser ma question sur ce forum
mais rien y fait, je ne comprends pas, ça ne marche pas.
UNE idée ?
voilà où j'en suis :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>BLABLA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<style type="text/css">
<!--
.banniere { position:absolute; top:20% ; left:35% ; z-index:1;}
.cubemusic { position:absolute; top:20% ; left:35% ; margin-left:198px ; margin-top:52px ; z-index:2; }
//--></style>
</head>
<body>
</body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="banniere"><img src="http: ... .jpg" ></div>
<div class="cubemusic"><a href="music.html" ><img src="http: .... .jpg" /></div></html>
Ps: mes <br> c'est mon système D pour descendre ma bannière
je commence tout juste à créer un site pour mon groupe.
je cherche à faire une interface simple mais quelque peu interactif.
J'ai suivis des cours sur le site du zéro (Très bon tuto pour apprendre les bases)
j'ai téléchargé Notepade++ et démarré quelques lignes
j'ai dessiné plusieurs cubes soudés dont certain me serviront de lien
ma bannière est mon ensemble de cubes.
j'ai ensuite dupliqué un des cubes sur photoshop et changé la couleur pour le rollover.
pour le moment j'ai réussi à placer un cube cliquable au bon endroit sur la bannière.
mais j'aimerai que celui-ci change de couleur au passage de la souris.
Je sais qu'il y a le javascript mais très franchement je me sens pas assez en forme pour attaquer un nouveau tuto sachant en plus que ça peut marcher en CSS.
Alors j'ai bien entendu cherché sur plusieurs tuto avant de poser ma question sur ce forum
mais rien y fait, je ne comprends pas, ça ne marche pas.
UNE idée ?
voilà où j'en suis :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>BLABLA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<style type="text/css">
<!--
.banniere { position:absolute; top:20% ; left:35% ; z-index:1;}
.cubemusic { position:absolute; top:20% ; left:35% ; margin-left:198px ; margin-top:52px ; z-index:2; }
//--></style>
</head>
<body>
</body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="banniere"><img src="http: ... .jpg" ></div>
<div class="cubemusic"><a href="music.html" ><img src="http: .... .jpg" /></div></html>
Ps: mes <br> c'est mon système D pour descendre ma bannière
A voir également:
- Rollover de 2 images en CSS ?
- Supercopier 2 - Télécharger - Gestion de fichiers
- Des images - Guide
- 2 ecran pc - Guide
- Word numéro de page 1/2 - Guide
- Faire 2 colonnes sur word - Guide