Lien avec une Image et un texte

Résolu/Fermé
Aka13 Messages postés 153 Date d'inscription jeudi 18 juin 2009 Statut Membre Dernière intervention 8 février 2016 - 23 sept. 2010 à 21:37
A.Souali Messages postés 24 Date d'inscription lundi 1 février 2010 Statut Membre Dernière intervention 26 février 2011 - 24 sept. 2010 à 12:40
Bonjour,

J'aimerais crée un bouton du avec une image (background de préférence) et pouvoir mettre un texte dans le code et non sur l'image du bouton.

J'ai essayer des solutions mais je n'y arrive pas (fonctionne uniquement sur internet explorer).
<a href="article1.html" target="box" style="background: url(images/bleu.gif); width: 142px; height: 22px;"><center>CLIQUEZ ICI</center></a>

A voir également:

3 réponses

A.Souali Messages postés 24 Date d'inscription lundi 1 février 2010 Statut Membre Dernière intervention 26 février 2011 1
Modifié par A.Souali le 23/09/2010 à 22:44
tu peut toujours essayer avec du CSS:

Style :

#button {
background-image:url('images/bleu.gif');width:142px;height:22px;text-align:center;
}


HTML :

<div id="button"><a href="article1.html" target="box" >CLIQUEZ ICI</a></div>


j'espere que c'est ca ..
0
Aka13 Messages postés 153 Date d'inscription jeudi 18 juin 2009 Statut Membre Dernière intervention 8 février 2016 8
24 sept. 2010 à 00:10
Merci, sa fonctionne bien ce que tu m'a donner sauf que c'est pas ce que j'attends malheureusement.

Moi je veut que le fond AUSSI soit dans le le lien et c'est sa qui me pose problème, là le fond n'est pas cliquable.
0
Aka13 Messages postés 153 Date d'inscription jeudi 18 juin 2009 Statut Membre Dernière intervention 8 février 2016 8
24 sept. 2010 à 00:19
J'ai trouvé sa qui fonctionne avec internet explorer mais mozila fait une legère erreur au niveau de "padding-top:4px" car sa descend l'image en même temps que le texte.

CSS
.buttons a, .buttons button {
    display: block;
    float:left;
    width: 142px;
    height: 22px;
    background: url(images/bleu.gif);
    text-align:center;
    padding-top: 4px;
}

HTML
<div class="buttons">
<a href="article1.html" target="box">CLIQUEZ ICI</a>
</div>


J'ai penser que peut être pour aligner le texte il y aurais un autre moyen qu'utiliser padding-top ?
0
A.Souali Messages postés 24 Date d'inscription lundi 1 février 2010 Statut Membre Dernière intervention 26 février 2011 1
24 sept. 2010 à 12:40
<style type="text/css">

input.button
{
font-size:12px;
font-weight:bold;
width:142px;
height:22px;
background-image:url(blue.gif);
border-style:none;
}

</style>

<script language="javascript">

function goLite(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color = "#FFFFFF";
}

function goDim(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color = "";
}

</script>




/* html */

<form name="form">
<input
type="button"
name="btn1"
class="button"
value="CLIQUEZ ICI"
title="cliquez ici pour plus d'infos"
onMouseOver="goLite(this.form.name,this.name)"
onMouseOut="goDim(this.form.name,this.name)">
</form>
0