Problème css

Fermé

Nicolvian Messages postés 7 Date d'inscription vendredi 11 mars 2016 Statut Membre Dernière intervention 19 avril 2016 - 17 avril 2016 à 21:35
Nicolvian Messages postés 7 Date d'inscription vendredi 11 mars 2016 Statut Membre Dernière intervention 19 avril 2016 - 18 avril 2016 à 10:01

Bonjour,

je veut que comme on survole mon image une autre image la remplace

je procède donc comme sella.


<html>
<head>
<title>test personelle</title>
</head>
<body>
<div class="bouton">
  <p>
   <a src="pome1.png"></a>
 </p>
</div>
<style>
.bouton a  {
display:block;
width:150px;
line-height:50px;
text-align:center;
vertical-align:middle;
background:url(pome1.png) no-repeat;
color:blue;
text-decoration:none;
}
.bouton a:hover {
background:url(pomme2.png) no-repeat;
}
</style>
</body>
</html>

seule problème rien s'affiche aucune image au lancement de la page.
je me pose aussi la question de es que une image avec le fond invisible est susceptible de bloqué la prose dure ?
de l'aide serait pas de refus xD

A voir également:

Problème css
Enlever couleur lien css ✓ - Forum CSS
Css exposant ✓ - Forum CSS
Css download - Télécharger - HTML
Css retour à la ligne ✓ - Forum CSS
Tableau html bordure sans css ✓ - Forum HTML

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 4 689
17 avril 2016 à 21:59

Bonjour,

La balise SRC d'une balise A sert à indiquer un LIEN .. pas à y mettre une image
De plus.. tu n'as pas utilisé la même orthographe par rapport au nom des tes images...

Bref...
Essayes ça :



<html>
<head>
<title>test personelle</title>
<style>
a.pommes{
  display: block;
  min-height:300px;
  width:auto
  min-height:80px;
  padding:0px;
  background:url(pomme1.png) no-repeat;
}

a.pommes:hover{
  display: block;
  min-height:300px;
  width:auto
  min-height:80px;
  padding:0px;
  background:url(pomme2.png) no-repeat;
}
</style>
</head>
<body>
<div class="bouton">
  <p>
    <a href='#' class="pomes">
    </a>
  </p>
</div>

</body>
</html>

Bien entendu.. tes images se situent dans le même dossier que ta page html ... et elles se nommes :
pomme1 et pomme2

Voila.

Nicolvian Messages postés 7 Date d'inscription vendredi 11 mars 2016 Statut Membre Dernière intervention 19 avril 2016
17 avril 2016 à 22:58

Effectivement mon lien <a> était stupide mes je comprend pas ce que tu veut dire par le même orthographe on et vraiment obligé de donné le même nom que l'image d'ans le class="" ?
désolé je débute xD .
jais testé ton code ça ait la même chose :/

jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 4 689
17 avril 2016 à 23:02

Pas pour le nom de la class... mais pour le nom des images ....

Nicolvian Messages postés 7 Date d'inscription vendredi 11 mars 2016 Statut Membre Dernière intervention 19 avril 2016 > jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024
18 avril 2016 à 10:01

ça fonctionne merci =) par contre ils redimensionne pas l'image en elle même mes le lien
ils serait surement fonctionnelle si je mes <img> a la place de <a> ?

Discussions similaires

trait horizontal avec du css

Enlever le soulignement sous les liens en HTML/CSS

[CSS] Forcé retour à la ligne

HTML - définir taille bouton

[CSS] Mettre un objet au premier plan

Discussions similaires

Newsletters