Comment modifier la graisse et la taille d'un texte sur survol de la souris ?

**hellspawn_ludo** · 26/12/2007, 03h15

Bonjour,

J'aimerais créer un menu au format texte et non au format image. Ainsi, pour la maintenance du site, il me sera plus facile de changer le nom des menus à l'avenir.

Toutefois, ne voulant pas voir apparaître de soulignement sous les textes de mon menu à cause de la balise <a>, je les ai mis dans des balises <p>. Cependant, j'aimerais que, lors du survol de la souris sur un des menus, le texte de celui-ci soit modifié de façon à apparaître en gras et dans une taille un peu plus grande mais je ne sais comment faire.

Pourriez-vous me dire si cela est possible et si oui, comment le faire ?

Je vous remercie pour votre aide.

Voici le code de mon menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
    <table  style="color:#CCD3AF ; width:900px ; height:auto ; background-color:Black" >
        <tr>
            <td colspan="3" style="background-image: url(Images/BandeauMenu.jpg); background-repeat: no-repeat; height: 142px; width: 960px;">
 
                <!--Lettres OL.-->
                <img src="Images/Ol.jpg"  style="position:absolute; left: 242px; top: 21px;" height="117" />
 
                <!--Nom des menus-->
                <p style="position:absolute ; left:250px ; top:144px ; font-family:Verdana ; font-size:14px; width: 81px; text-align: center;">Accueil</p>
                <p style="position:absolute ; left:345px ; top:144px ; font-family:Verdana ; font-size:14px; width: 81px; text-align: center;">Bio</p>
                <p style="position:absolute ; left:440px ; top:144px ; font-family:Verdana ; font-size:14px; width: 81px; text-align: center;">Musique</p>
                <p style="position:absolute ; left:535px ; top:144px ; font-family:Verdana ; font-size:14px; width: 81px; text-align: center;">Images</p>
                <p style="position:absolute ; left:630px ; top:144px ; font-family:Verdana ; font-size:14px; width: 81px; text-align: center;">Presse</p>
                <p style="position:absolute ; left:725px ; top:144px ; font-family:Verdana ; font-size:14px; width: 81px; text-align: center;">Contact</p>
 
            </td>
        </tr>
    </table>

**HiRoN** · 26/12/2007, 09h47

http://xhtml.developpez.com/faq/?pag...IEN_coloration

A adapter à ton cas ?

**BnA** · 26/12/2007, 11h57

Pour la taille du texte:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
font-size: 15px;

Pour la "graisse":

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
font-weight: bold;

Pour de l'italique (par exemple):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
font-style:italic;

Etc...

**hellspawn_ludo** · 26/12/2007, 14h05

HiRoN et BnA, un grand merci à vous deux. Ca fonctionne impeccablement.

Voici ce que j'ai mis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<style>
     p {text-decoration:none}
     p:hover{font-size:20px ; font-weight:bold;}
</style>

Cependant, j'ai voulu faire la même chose pour la balise <img> de façon à augmenter la propriété 'width' au moment du survol de la souris sur mon texte mais ça ne fonctionne pas.

'hover' ne fonctionne pas sur une <img> ?

**Kerod** · 26/12/2007, 14h22

Déjà dis toi bien que hover ne fonctionne que sous FF et IE7 donc ton développement ne sera pas compatible avec IE6 et inférieur.

Sauf si tu utilises bien sur le hover sur une balise a qui fonctionne partout.

Pour ton a sans soulignement : text-decoration:none

**hellspawn_ludo** · 26/12/2007, 14h36

Merci Kerod,

Je viens de modifier le <p> en <a>.

Ma balise <a> est en position:absolute car je l'ai surperposée sur une <img>, elle-même en position:absolute.
Maintenant et grâce au forum'eur', j'arrive à modifier mes textes de menu cependant, j'aimerais aussi par la même occasion, augmenter la taille de mes images lors du survol de la souris sur un menu.
Ainsi, l'effet sera comme si on mettait en évidence un onglet.

J'espère être clair dans mes explications et que quelqu'un puisse m'apporter une réponse.

Merci à vous tous.

**Kerod** · 26/12/2007, 14h54

En CSS tu pourras pas survoler un élément et faire en sorte que ce soit un autre qui change d'aspect.

Pour faire ça il faudrait que tu te tournes du côté JavaScript en faisant quelque chose dans le genre :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('idimg').style.width = 'taille px';

Mais avant de faire ça dans le onmouseover de ton a il faut donner un id à ton image qui lui correspond.

Pour de former et apprendre CSS suis ces tutoriels et cours : http://css.developpez.com/cours/

Tu vois ?