Lien avec une Image et un texte
Résolu
Aka13
Messages postés
153
Date d'inscription
Statut
Membre
Dernière intervention
-
A.Souali Messages postés 24 Date d'inscription Statut Membre Dernière intervention -
A.Souali Messages postés 24 Date d'inscription Statut Membre Dernière intervention -
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).
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:
- Lien avec une Image et un texte
- Partager des photos avec un lien - Guide
- Lien url - Guide
- Extraire texte d'une image - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Verificateur de lien - Guide
3 réponses
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 ..
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 ..
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.
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.
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
HTML
J'ai penser que peut être pour aligner le texte il y aurais un autre moyen qu'utiliser padding-top ?
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 ?
<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>
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>
