#1 Le 21/04/2015, à 18:53
- Yoannjap
CSS - Remplacer une image par une autre image au survol de la souris
Bonjour,
Je débute en CSS, et je viens de chercher un temps incalculable de l'aide dans les tutos, forums, etc., le tout en anglais, français.
Ma question va donc vous paraître de base et facile à trouver la réponse, or je vous jure, je ne vois que des 'remplacer un lien par une image on hover' ou des trucs comme ça. Mais pas, remplacer une image par une autre.
Donc, voici mon code html (bon, ayez de l'indulgence pour le cafouillis, j'essaye de rendre ça le plus lisible possible, mais je débute hein!) :
<div class="conteneur">
<div class="bloc1">
<a href='https://docs.google.com/forms/d/1cgI5eERVsB0z2okvxVv6TSYScqURidSPkonykR_OOaU/viewform?entry.666433813={{Note ID}}&entry.1288711688&entry.1713282433'><div id=".footer"><img class='pic' src='fais_un_donsature.svg'></div></a></body>
</div>
<div class="bloc1bis">
<a href='https://docs.google.com/forms/d/1cgI5eERVsB0z2okvxVv6TSYScqURidSPkonykR_OOaU/viewform?entry.666433813={{Note ID}}&entry.1288711688&entry.1713282433'><div id=".footer"><img class='pic' src='fais_un_don2.svg'></div></a></body>
</div>
<div class="bloc2">
<a href='https://docs.google.com/forms/d/1cgI5eERVsB0z2okvxVv6TSYScqURidSPkonykR_OOaU/viewform?entry.666433813={{Note ID}}&entry.1288711688&entry.1713282433'><div id=".footer"><img class='pic' src='bubble_correctionsature.svg'></div></a></body>
</div>
</div>Et mon code CSS:
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:8%;
right:0;
width:100%;
}
div.conteneur { margin:auto;
text-align:center;}
div.bloc1 { position: absolute;
left: 0%;
bottom:0%;
display:inline-block;
margin-left: 0px;
}
div.bloc1bis { position: absolute;
left: 50%;
bottom:0%;
display:inline-block;
margin-left: 0px;
}
div.bloc2 {
position: absolute;
right: 1%;
bottom:0%;
display:inline-block;
margin-right: 0px;
}
.pic{opacity: 0.4; filter: alpha(opacity=100); } .pic:hover { opacity: 1; filter: alpha(opacity=30); }
.pic2{opacity: 0.4; filter: alpha(opacity=100); } .pic:hover { opacity: 1; filter: alpha(opacity=30); }Ce que je veux obtenir : lorsque je survole à la souris l'image 'fais_un_donsature.svg', s'affiche 'fais_un_don2.svg' tout en cachant la première ('fais_un_donsature.svg', donc).
Merci infiniment pour votre aide dans mes débuts CSS+HTML !!!
Hors ligne
#2 Le 21/04/2015, à 19:36
- Rufus T. Firefly
Re : CSS - Remplacer une image par une autre image au survol de la souris
Salut,
Oh là !
Un lien, avec une div dedans, puis une image, et tout ça qui se termine par un </body>
Ça, ça ne va pas du tout et tu comptes vraiment sur la gentillesse (pas garantie) du navigateur... En plus, ça ne sert à rien.
Il faut vraiment que tu commences au début : balises bloc et balises inline...
Regarde par là, il y a plein de tutos pour faire des trucs : Alsacréations
Ça, par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
<html lang="fr">
<head>
<title>Construction de menus simples en XHTML/CSS: portes coulissantes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"><!--
/***********************************/
/* Méthode des portes coulissantes */
/**********************************/
#nav {
list-style: none ;
margin: 0 ;
padding: 0 ;
overflow: hidden ; /* Création du contexte de formatage */
}
#nav li {
float: left ;
width: 150px ;
border: 1px solid #600 ;
margin-right: 1px ;
color: #fff ;
background: #c00 ;
}
#nav li a {
display: block ;
background: #900 url(lienCoulissant.png) left top no-repeat ;
color: #fff ;
font: 1em "Trebuchet MS",Arial,sans-serif ;
line-height: 1em ;
padding: 4px 0 ;
text-align: center ;
text-decoration: none ;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
background: #033 url(lienCoulissant.png) right top no-repeat ;
text-decoration: underline ;
}
--></style>
<!--[if lt IE 7]>
<style type="text/css">
#nav { /* Contexte de formatage pour IE6 */
overflow: visible ;
height: 1% ;
}
</style>
<![endif]-->
</head>
<body>
<h1>Méthode des portes coulissantes</h1>
<ul id="nav">
<li><a href="#" title="aller à la section 1">item1</a></li>
<li><a href="#" title="aller à la section 2">item2</a></li>
<li><a href="#" title="aller à la section 3">item3</a></li>
<li><a href="#" title="aller à la section 4">item4</a></li>
<li><a href="#" title="aller à la section 5">item5</a></li>
</ul>
<p><a href="/tuto/lire/574-Creer-des-menus-simples-en-CSS.html" title="">retour au tutoriel</a></p>
</body>
</html>Source : http://www.alsacreations.com/tuto/lire/ … n-CSS.html
Il faut absolument viser du code propre comme celui de l'exemple, parce que sinon c'est très rapidement ingérable. Au bout de quelques jours tu ne comprendras plus toi-même ce que tu as bidouillé...
La provocation est une façon de remettre la réalité sur ses pieds. (Bertolt Brecht)
Il n'y a pas de route royale pour la science et ceux-là seulement ont chance d'arriver à ses sommets lumineux qui ne craignent pas de se fatiguer à gravir ses sentiers escarpés. (Karl Marx)
Il est devenu plus facile de penser la fin du monde que la fin du capitalisme
Hors ligne
#3 Le 21/04/2015, à 22:30
- Yoannjap
Re : CSS - Remplacer une image par une autre image au survol de la souris
Ok merci beaucoup pour tes liens Rufus ! Bon, dès demain, je repars sur de bonnes bases, mais je sens que le CSS prend du temps, un million d'erreur, et une pilosité cabeçale ruinée avant d'être un temps soit peu maîtrisée. Sans compter l'évolution qu'a l'air d'aller à 100 à l'heure...
Hors ligne
#4 Le 22/04/2015, à 00:24
- Rufus T. Firefly
Re : CSS - Remplacer une image par une autre image au survol de la souris
Ce n'est pas aussi grave que ça... A condition de procéder avec un minimum de méthode ! Et on n'est pas obligé d'utiliser toutes les propriétés disponibles...
La première étape consiste à bien structurer la page, sans se préoccuper de la gueule que ça aura. Un bon truc, au début, c'est d'examiner le résultat avec l'option affichage->style de la page->aucun style de firefox. Ou encore mieux, avec un navigateur en mode texte, genre lynx. C'est très précieux, comme contrôle, au moins au début (après, une fois qu'on maîtrise un peu, les erreurs sautent aux yeux). Quand la page est bien faite, le résultat dans lynx est parfaitement clair, logique et utilisable. Si c'est le foutoir, c'est qu'il y a un problème...
La css, donc le côté esthétique, vient après. En outre, css signifie cascaded style sheets, et il importe de ne jamais oublier le "cascaded", qui permet très souvent de "factoriser" en quelque sorte un style, c'est-à-dire le définir pour un parent plutôt que pour chaque enfant... Il y a aussi un bon outil pour voir si c'est c'est bien fait, l'extension firebug de firefox. Si les styles d'un élément sont assez systématiquement redéfinis 36 fois, la css est probablement mal conçue et donc simplifiable.
Enfin, dernier outil : le validateur du w3c. Mais le zéro faute avec ça, c'est pour les perfectionnistes... Cela dit, c'est quand même utile, par exemple pour détecter des balises qu'on a oublié de fermer ou des choses de cette sorte.
La provocation est une façon de remettre la réalité sur ses pieds. (Bertolt Brecht)
Il n'y a pas de route royale pour la science et ceux-là seulement ont chance d'arriver à ses sommets lumineux qui ne craignent pas de se fatiguer à gravir ses sentiers escarpés. (Karl Marx)
Il est devenu plus facile de penser la fin du monde que la fin du capitalisme
Hors ligne