High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

Superposé texte sur une image rollover

Dernière réponse le 26 sep 2009 à 20:22:38 kinders, le 25 sep 2009 à 15:45:49 
 Signaler ce message aux modérateurs

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.

Meilleures réponses pour « Superposé texte sur une image rollover » dans :
[Photofiltre]Réaliser un assemblage de 2 images VoirPhotofiltre est un logiciel de retouche d'image. Cette astuce fonctionne aussi bien avec Photofiltre qu'avec Photofiltre Studio Dans ce cas précis, Photofiltre va permettre d'assembler un collage c'est-à-dire de coller une deuxième image (en...
Animer une séquence d'images avec Gimp VoirGimp permet, entre autres, de créer une animation en superposant plusieurs images. Cette animation peut alors être sauvée au format gif. Sommaire I. Images utilisées pour notre exemple II. Ouvrir la première image puis les autres en tant...
Infographie VoirOn appelle infographie le domaine de l'informatique concernant la création et la manipulation des images numériques. L'infographie regroupe de nombreux savoirs, parmi lesquels la représentation des éléments graphiques (texte, image ou vidéo), ainsi...
Posez votre question Répondre

1

monkey_monk, le 25 sep 2009 à 15:50:40

<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 [Monkey Monk]
That's all folks !

   
Répondre à monkey_monk

2

monkey_monk, le 25 sep 2009 à 15:53:09

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 [Monkey Monk]
That's all folks !

   
Répondre à monkey_monk

3

kinders, le 25 sep 2009 à 16:20:21

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

   
Répondre à kinders

4

monkey_monk, le 25 sep 2009 à 17:56:16

Bien, tout d'abord, pourrais-tu me montrer et/ou m'expliquer la portion de ton projet qui est concernée ?

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 ! ;) [Monkey Monk]
That's all folks !

   
Répondre à monkey_monk

5

kinders, le 25 sep 2009 à 18:58:41

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?

   
Répondre à kinders

6

monkey_monk, le 25 sep 2009 à 19:03:46

Je pense qu'il faudrait soit réduire la taille du texte ou allonger les images...
[Monkey Monk]
That's all folks !

   
Répondre à monkey_monk

7

kinders, le 25 sep 2009 à 19:18:03

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.

   
Répondre à kinders

8

kinders, le 25 sep 2009 à 19:22:01

Je me suis aperçue que je n'avais pas mis la bonne taille, le texte est maintenant bien centré sur mes boutons.
Encore merci

   
Répondre à kinders

9

 monkey_monk, le 26 sep 2009 à 20:22:38

De rien ! N'oublie pas de mettre ton sujet en "résolu". ;)

Bonne continuation ! :D [Monkey Monk]
That's all folks !

   
Répondre à monkey_monk
Posez votre question Répondre
Ils ont besoin de votre aide