Superposé texte sur une image rollover
kinders
Messages postés
8
Date d'inscription
Statut
Membre
Dernière intervention
-
monkey_monk Messages postés 641 Date d'inscription Statut Membre Dernière intervention -
monkey_monk Messages postés 641 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Voila je suis en train de créer mon site et je souhaite faire des boutons de menu rollover.
Au départ j'avais mis mes images (boutons avec texte). Mais cela ne me plait plus car en insérant un traducteur automatique, je me suis aperçu que les boutons n'était plus approprié à la langue choisie.
Je souhaite donc simplement superposer un texte sur une image rollover. J'ai vu que c'était possible avec une seule image, mais je ne sais pas si ça l'est avec un rollover.
Voici le code que j'avais inséré dans ma page pour le rollover:
<td style="text-align: center; width: 20%;"><a
href="index.php"><img alt=""
style="border: 0px solid ; width: 100%; height: 25px;"
src="images/buttons/image_1.gif"
onmouseover="this.src='images/buttons/image_2.gif'"
onmouseout="this.src='images/buttons/image_1'"></a></td>
Merci d'avance pour vos réponses.
Voila je suis en train de créer mon site et je souhaite faire des boutons de menu rollover.
Au départ j'avais mis mes images (boutons avec texte). Mais cela ne me plait plus car en insérant un traducteur automatique, je me suis aperçu que les boutons n'était plus approprié à la langue choisie.
Je souhaite donc simplement superposer un texte sur une image rollover. J'ai vu que c'était possible avec une seule image, mais je ne sais pas si ça l'est avec un rollover.
Voici le code que j'avais inséré dans ma page pour le rollover:
<td style="text-align: center; width: 20%;"><a
href="index.php"><img alt=""
style="border: 0px solid ; width: 100%; height: 25px;"
src="images/buttons/image_1.gif"
onmouseover="this.src='images/buttons/image_2.gif'"
onmouseout="this.src='images/buttons/image_1'"></a></td>
Merci d'avance pour vos réponses.
A voir également:
- Superposé texte sur une image rollover
- Extraire texte d'une image - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Image iso - Guide
- Légender une image - Guide
- Transcription audio en texte word gratuit - Guide
9 réponses
<a class="bouton">Mon bouton</a>
a.bouton:link, a.bouton:visited {
display:block;
width:100px;
height:15px;
background:url(imageOut.png) 0 0 no-repeat;
}
a.bouton:hover, a.bouton:active {
width:100px;
height:15px;
background:url(imageOver.png) 0 0 no-repeat;
}
Et ça devrait rouler ! :D
a.bouton:link, a.bouton:visited {
display:block;
width:100px;
height:15px;
background:url(imageOut.png) 0 0 no-repeat;
}
a.bouton:hover, a.bouton:active {
width:100px;
height:15px;
background:url(imageOver.png) 0 0 no-repeat;
}
Et ça devrait rouler ! :D
Bon évidemment tu devras peut-être ajuster les padding et/ou marge... mais tu es grand non ? :p
Tu peux aussi gérer le texte des liens (couleur, taille, etc...)... a toi de chipoter un peu !
Amuse-toi bien ! :D
Tu peux aussi gérer le texte des liens (couleur, taille, etc...)... a toi de chipoter un peu !
Amuse-toi bien ! :D
Je suis un peu perdue, je ne sais pas où mettre le code donné, j'ai essayé directement dans la page php mais ça ne fonctionne pas :(
J'ai aussi essayé dans la page css de mettre:
a.bouton:link, a.bouton:visited {
display:block;
width:100px;
height:15px;
background:url(IMAGES/buttons/MONOBLOCS1.gif) 0 0 no-repeat;
}
a.bouton:hover, a.bouton:active {
width:100px;
height:15px;
background:url(IMAGES/buttons/MONOBLOCS1-ROLL.gif) 0 0 no-repeat;
}
et d'appeler avec <a class="bouton">Mon bouton</a>
mais ça ne fonctionne toujours pas. Je suis navrée mais je ne suis pas une pro ;)
Si on pouvais mieux m'expliquer merci
J'ai aussi essayé dans la page css de mettre:
a.bouton:link, a.bouton:visited {
display:block;
width:100px;
height:15px;
background:url(IMAGES/buttons/MONOBLOCS1.gif) 0 0 no-repeat;
}
a.bouton:hover, a.bouton:active {
width:100px;
height:15px;
background:url(IMAGES/buttons/MONOBLOCS1-ROLL.gif) 0 0 no-repeat;
}
et d'appeler avec <a class="bouton">Mon bouton</a>
mais ça ne fonctionne toujours pas. Je suis navrée mais je ne suis pas une pro ;)
Si on pouvais mieux m'expliquer merci
Bien, tout d'abord, pourrais-tu me montrer et/ou m'expliquer la portion de ton projet qui est concernée ?
Pour ceci :
c'était bien dans un fichier css qu'il fallait le mettre... ou encore, tu pouvais le placer dans <head> de cette façon :
...pour que tu comprennes bien, avec ce code CSS, on déclare une "classe" (série de propriété) pour l'objet <a> (la balise déclarant les liens).
Dans ton HTML/PHP tu dois alors remplacer :
par :
Mais pour mieux t'aider, il aurait fallu que je puisse (au moins) voir la page concernée... car je ne sais pas qu'elle taille doit faire ton bouton et/ou ton image... et cette taille doit être déclarée dans le css du bouton !
J'espère que tu comprends mieux à présent, n'hésites pas en cas de besoin ! ;)
Pour ceci :
a.bouton:link, a.bouton:visited {
display:block;
width:100px;
height:15px;
background:url(IMAGES/buttons/MONOBLOCS1.gif) 0 0 no-repeat;
}
a.bouton:hover, a.bouton:active {
width:100px;
height:15px;
background:url(IMAGES/buttons/MONOBLOCS1-ROLL.gif) 0 0 no-repeat;
}
c'était bien dans un fichier css qu'il fallait le mettre... ou encore, tu pouvais le placer dans <head> de cette façon :
<style type="text/css">
a.bouton:link, a.bouton:visited {
display:block;
width:100px;
height:15px;
background:url(IMAGES/buttons/MONOBLOCS1.gif) 0 0 no-repeat;
}
a.bouton:hover, a.bouton:active {
width:100px;
height:15px;
background:url(IMAGES/buttons/MONOBLOCS1-ROLL.gif) 0 0 no-repeat;
}
</style>
...pour que tu comprennes bien, avec ce code CSS, on déclare une "classe" (série de propriété) pour l'objet <a> (la balise déclarant les liens).
Dans ton HTML/PHP tu dois alors remplacer :
<code><a href="index.php"> <img alt="" style="border: 0px solid ; width: 100%; height: 25px;" src="images/buttons/image_1.gif" onmouseover="this.src='images/buttons/image_2.gif'" onmouseout="this.src='images/buttons/image_1'"> </a>
par :
<a class="bouton" href="index.php" title=""> Aller à l'index(par ex) </a>
Mais pour mieux t'aider, il aurait fallu que je puisse (au moins) voir la page concernée... car je ne sais pas qu'elle taille doit faire ton bouton et/ou ton image... et cette taille doit être déclarée dans le css du bouton !
J'espère que tu comprends mieux à présent, n'hésites pas en cas de besoin ! ;)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
J'ai réussi, mais malheureusement le texte et les boutons ne se placent pas exactement là où je le souhaite
cf : abc.des.kinders.free.fr (menu de gauche)
J'ai modifié le code css :
<style type="text/css">
a.bouton:link, a.bouton:visited {
display:block;
width:150px;
height:50px;
line-height:43px;
font-size:14pt;
text-align:center;
vertical-align:middle;
background:url(IMAGES/buttons/button.png) no-repeat;
color:white;
text-decoration:none;
}
a.bouton:hover, a.bouton:active {width:150px;
height:50px;
background:url(IMAGES/buttons/button-roll.png) 0 0 no-repeat;
}
</style>
Je souhaiterais placé mes boutons au milieu de la barre et le texte au milieu des boutons. Comment dois-je faire?
cf : abc.des.kinders.free.fr (menu de gauche)
J'ai modifié le code css :
<style type="text/css">
a.bouton:link, a.bouton:visited {
display:block;
width:150px;
height:50px;
line-height:43px;
font-size:14pt;
text-align:center;
vertical-align:middle;
background:url(IMAGES/buttons/button.png) no-repeat;
color:white;
text-decoration:none;
}
a.bouton:hover, a.bouton:active {width:150px;
height:50px;
background:url(IMAGES/buttons/button-roll.png) 0 0 no-repeat;
}
</style>
Je souhaiterais placé mes boutons au milieu de la barre et le texte au milieu des boutons. Comment dois-je faire?
Merci pour la réponse, j'ai modifié la largeur de ma cellule et je vais diminuer les boutons.
Merci d'avoir répondu rapidement.
Merci d'avoir répondu rapidement.