Problème boutton/image CSS

Résolu
antoinegdln4 -  
RAD ZONE Messages postés 5362 Statut Contributeur -
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.

17 réponses

  1.
    salim_1305 Messages postés 70 Statut Membre 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
  2. antoinegdln4 Messages postés 34 Statut Membre 1
     
    Ca marche pas comme je veux.. En fait je voudrais un bouton de la forme de l'imaga..
    0
    1. RAD ZONE Messages postés 5362 Statut Contributeur 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
  3. 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
  4. 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

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

    Posez votre question
  6. 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
  7. 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
  8. RAD ZONE Messages postés 5362 Statut Contributeur 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
  9. antoinegdln4 Messages postés 34 Statut Membre 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
    1. RAD ZONE Messages postés 5362 Statut Contributeur 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
  10. 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
  12. antoinegdln4
     
    antoinegdln4.rar MDR mais merci beaucoup je vais voir ça :)
    0
  13. 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
    1. RAD ZONE Messages postés 5362 Statut Contributeur 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
  15. 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
  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
  18. RAD ZONE Messages postés 5362 Statut Contributeur 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

Retrouver l'image originale d'une photo modifiée
Raven -
Asta972155 -

10 réponses
Comment recadrer une image avec Inkscape
infofeet -
TELLIEZ -

13 réponses