Problème boutton/image CSS

Résolu
antoinegdln4 -  
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,
Je cherche à transformer une image - icone en .png en boutton css interactif (avec un a:active, un a:hover).. Comment le faire ?
Car si je définis l'image en background ou background image, à part me la mettre en background, il ne fait rien.
Je cherche en gros à adapter la forme de l'image en un bouton CSS.
Merci d'avance de vos réponses.
A voir également:

17 réponses

Réponse 1 / 17
salim_1305 Messages postés 60 Date d'inscription   Statut Membre Dernière intervention   1
 
tu peux essayé cela
html
<div id="bouton" <a href="url">Link text</a>><div>
#bouton{
widht:50px;/* exemple*/
height:30px;
background: url(image01) no-repeat center;
}
#bouton:hover{
background: url(image02);
}
#bouton:active{
backgroud: url(image03);
}
0
Réponse 2 / 17
antoinegdln4 Messages postés 32 Date d'inscription   Statut Membre Dernière intervention   1
 
Ca marche pas comme je veux.. En fait je voudrais un bouton de la forme de l'imaga..
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Salut 
je voudrais un bouton de la forme de l'image
.
heuuu l image a part carree ou rectangle , quelle forme crois tu qu elle a ????

a+
0
Réponse 3 / 17
antoinegdln4
 
Bon je vais être plus précis !
Je voudrais faire un bouton en forme de boule de Noel, avec le CSS.. Ya pas n moyen via une image ?
0
Réponse 4 / 17
Nhay Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   126
 
En gros, tu aimerai qu'on ne puissent pas cliquer autour de ta boule c'est ça ?
Si c'est tout rond, tu peut tenter un border-radius (Et un display:block sur le lien si ton image est en background + height/width de dimension)

Si je fais fausse route, dit-le, j'suis pas certain d'avoir tout compris :)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 17
antoinegdln4
 
C'est à peu près ça, mais il existe pas en moyen en CSS (ou en JS ?) de faire un bouton soigneux, en forme de boule de Noel ? :)
0
Réponse 6 / 17
Nhay Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   126
 
Pour un bouton de formulaire, tu a l'input type image
<input type='image' src='/img/image.jpg' alt='' />
Ou encore la balise button
<button type='submit'><img src='' alt='' /></button>
0
Réponse 7 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Si tu peux faire ca avec 
 
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
     background: url(ton-image.png);
      display: block;


exemple 
<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">

    body{
      margin: 0;
      padding: 0;
      background-color: #333333;
    }

    #centre{
      width: 257px;
      margin: auto;
    }
          /* CSS DU A */
    a.rond {
      width: 255px;
      height: 255px;
      border: 1px solid #333;
      background-color: #ffffff;
      -webkit-border-radius: 150px;
      -moz-border-radius: 150px;
      border-radius: 150px;
      background: url(ton-image.png);
      display: block;
    }
         /* CSS DU A */
    </style>
  </head>
  <body>
    <div id="centre">
      <a href="#" class="rond"></a>
    </div>
  </body>
</html>


voila l image que tu met a background: url(ton-image.png);


a+
0
Réponse 8 / 17
antoinegdln4 Messages postés 32 Date d'inscription   Statut Membre Dernière intervention   1
 
Je te remercie beaucoup, ça ressemble à peu près à ce que je veux, mais à encore quelques détails près... .. Il s'agit encore "d'un bloc", sur lequel on doit cliquer dessus... N'y a t il pas moyen que l'on clique juste sur la boule, et qu'il n'y ai plus de bloc carré ? Puisque l'image.png est une icone, donc sans fond.. Donc ça devrait être possible non ?
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
mais c est toujours un bloc !! ton image n est pas sans fond , mais a un fond transparent ce qui donne cette impression de rond !!
et bien pour imager ont peux dire que le border radius a 150px sur les 4 angles fait un peu la meme chose avec le block <a> !

tu peux aussi le faire avec un mapping, et la tu clique sur une area shape ronde,
je vois pas trop l interet pour un seul lien ,
mais c est faisable !

meme exemple que au dessus mais avec un mapping 

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">

    body{
      margin: 0;
      padding: 0;
      background-color: #333333;
    }

    #centre{
      width: 257px;
      margin: auto;
    }

    </style>
  </head>
  <body>
    <div id="centre">
      <img alt="image" usemap="#image-rond" src="image-rond.png">
      <map id="image-rond" name="image-rond">
        <area alt="lien" href="#" shape="circle" coords="134,127,125">
      </map>
    </div>
  </body>
</html>


a+
0
Réponse 9 / 17
antoinegdln4
 
D'accord, merci beaucoup :)
Je t'explique beaucoup plus précisemment mon projet :
Bien qu'on soit le 06 décembre je cherche à créer un calendrier de l'avent, avec des boutons en forme de boules de Noel, avec une png à fond transparent, et que, quand on clique dessus, le ":active" fonctionne normalement lorsque l'on clique dessus, et quel lorsque l'on la survole, le ":hover" la fasse changer de couleur (la boule de Noel). Est ce possible ?
0
Réponse 10 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Salut

j ai pas trop le temps , mais je t ai fais un exemple vite fait !

http://www.solidfiles.com/d/9c1b37dd74/

a+
0
Réponse 11 / 17
antoinegdln4
 
antoinegdln4.rar MDR mais merci beaucoup je vais voir ça :)
0
Réponse 12 / 17
antoinegdln4
 
Après test sur ton fichier, deux questions :
De un comment faire pour mettre du texte par dessus l'image ?
De deux, après avoir viré le tableau et toutes les images, je n'en ai laissé qu'une, est-il normal que je n'arrive pas à la décaler à gauche avec un "left:..." ?
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
  
comment faire pour mettre du texte par dessus l'image ?

dans tes liens <a> tu met ton texte dans un <p> 
<a href="#" class="rond"><p>TEXT</p></a>


ensuite dans le CSS
a a.rond tu ajoute 
 
line-height: 122px; 
text-decoration: none;/* pour enlever la ligne sous le texte du lien  */


et tu ajoute cette regle CSS 
a.rond p {
      vertical-align: middle;
      display: inline;
      color: #FF0000;/* tu choisira ta couleur */ 
      font-weight: bolder;/* tu choisira  */ 
    }


après avoir viré le tableau
?? quel tableau ?? tout est fait en div ! 

est-il normal que je n'arrive pas à la décaler à gauche avec un "left:..." ?
???
c est que tu as due laisser la div cal et son css !

tu est sur de comprendre un peu le html css ??? j ai de gros doutes !

a+
0
Réponse 13 / 17
antoinegdln4
 
Je débute, c'est normal :)
0
Réponse 14 / 17
antoinegdln4
 
Pourquoi, après avoir tapé le code comme ça :
<!DOCTYPE html>
<html>
<head>
<title>
RAD ZONE Webcreation
</title>
<meta charset="utf-8">
<style type="text/css">
<!--




a.rond {

width: 122px;
height: 122px;
display: block;
border-radius:150px;
background: url(2.png);
}
a.rond2 {
left:120px;
width: 122px;
height: 122px;
display: inline-block;
border-radius:150px;
background: url(2.png);
}

a:hover {
background: url(transfertlogoombresq2_122x122.png);
}

a:active {
background: url(trempty_122x122.png);
}





</style>
</head>
<body>


<a href="#" class="rond" ></a>
<a href="#" class="rond2" ></a>



</body>
</html>

Il m'affiche les images les unes en dessous des autres ? (enfin les deux seules images)
0
Réponse 15 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
loool :-))
ok bon on va arreter la !! ca ne sert a rien , il faut d abord que tu apprenne un minimum les bases html css , sinon on va tourner en rond sans avancer !

voila le cours pour debutant
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

apres on pourra t aider

a+
0
Réponse 16 / 17
antoinegdln4
 
Non mais je débute pas à ce point là...
J'aurais juste aimé que tu me dise ce qui cloche dans mon code plutot que de prendre pour plus bete que je ne le suis à chaque fois...
0
Réponse 17 / 17
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
  
ce qui cloche dans mon code plutot que de prendre pour plus bete que je ne le suis à chaque fois...
.

mais c est les bases que tu ne comprend pas !!
sinon tu saurait qu il suffit de mettre 
display: inline-block;

a la place de 
display: block;
a a.rond pour que tout s aligne ! 

Non mais je débute pas à ce point là...
revise un peu quand meme ,en CSS si tu n a pas un minimum de base tu va galerer a chaque changement dans ton code et comme dans cet exemple (difference entre block et inline-block) et passer des heures sur un probleme , alors que 10 secondes suffisent pour le corriger si tu a les bases !!

a+
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Comment recadrer une image avec Inkscape
infofeet -
TELLIEZ -

13 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse