[REGLER] image qui apparait au survol du lien, puis une autre

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [REGLER] image qui apparait au survol du lien, puis une autre

Positiviste

Reaction Apathique

Bonjour à tous,

Ce que je souhaiterai, c'est qu'une image apparait au survol du lien, derrière le lien et que lorsque l'on clique une autre image apparaissent et reste jusqu'a ce qu'un autre lien soit cliqué.
j'ai dessiné les images.
Je voudrai faire çà pour tous les liens.

au debut j'avais ecris çà : (vous pouvez rigoler)

Code :

a
{
text-decoration: none;
color: black;
font-size: 12px;
}
a:hover
{
background-image: url("bouton_off.png" );
height: 30px;
width: 60px;
color: white;
}
a:active
{
background-image: url("bouton_on.png" );
height: 30px;
width: 60px;
color: white;
}
a:focus
{
background-image: url("bouton_on.png" );
color: white;
height: 30px;
width: 60px;
}

mais bon la taille des liens ne sont pas les m^ donc çà n'allait pas. Et le height n'était pas pris en compte. Alors je me suis tourné vers rollover que vous pouvez voir ds le premier lien:

<code type="html">

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style_ff.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="style_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script language="JavaScript">
<!-- Begin
bouton = new Image();
bouton.src = "bouton_on.gif";
end -->
</script>
</head>
<body>
<div id="gris">
<ul class="haut">
<li class ="haut"><a href="contact.html" onmouseover="bouton.src = 'bouton_on.png';" onmouseout="bouton.src = 'bouton_off.png';"><img src="bouton_off.png" border=0 width="60" height="30" name=bouton>Contact</a></li>
<li class ="haut"><a href="page2.html">Lien</a></li>
</ul>
<p><img src="image01.png" alt="triptyque" id="triptyque" /></p>
<ul class="bas">
<li class ="bas"><a href="galerie.html">Accueil</a></li>
<li class ="bas"><a href="portrait.html">Portrait</a></li>
<li class ="bas"><a href="paysage.html">Paysage</a></li>
<li class ="bas"><a href="page5.html">Noir et Blanc</a></li>
<li class ="bas"><a href="page6.html">Reportage</a></li>
<li class ="bas"><a href="page7.html">Architectures</a></li>
<li class ="bas"><a href="page8.html">Divers</a></li>
<li class ="bas"><a href="page8.html">Commandez des Tirages</a></li>
</ul>
<h6>Mough-Lee Création ©. Touts droits réservés
Toutes les oeuvres présentes sur ce site appartiennent à l'auteur sauf indications contraires.<br />
Toutes reproductions sont prohibées sauf accord de l'auteur.</h6>
</div>
</body>
</html>

mais bon, le mot contact apparait à coté de l'image sous FF et IE7 et sous IE7 il y a des décalage des autres liens et images pas sous FF et sous IE7 le rendu est moche. Donc rien ne va.

COmment pourrai-je faire ? Connaissez vous une autre fonction ou dois-je coder différemment le html ?

j'ai essayer en enlevant le mot contact et en l'incluant ds l'image. Mais même resultat.

voici mon CSS en entier au cas ou cela viendrait de la :

Code :

body {
background-color: black;
text-align:center;
margin-top:50px;
margin-bottom:50px;
padding:0px;
}
#gris{
background-image: url("gris03.png" );
height: 600px;
width: 800px;
background-repeat: no-repeat;
margin:auto;
text-align:left;
}
#gris02{
background-image: url("gris04.png" );
height: 925px;
width: 800px;
background-repeat: no-repeat;
margin:auto;
text-align:left;
}
li {
display:inline;
}
li.bas {
margin-right: 30px;
}
li.haut{
margin-right: 25px;
}
ul.haut{
float:right;
margin-top:50px;
}
ul.bas{
text-align:left;
margin-top:370px;
}
#triptyque {
position:relative;
top:290px;
left: 110px;
}
a
{
text-decoration: none;
color: black;
font-size: 12px;
}
a:hover
{
color: white;
}
a:active
{
color: white;
}
a:focus
{
color: white;
}
h6 {
text-align:center;
margin-top:40px;">
}

Message cité 1 fois
Message édité par Positiviste le 21-07-2009 à 07:54:31

---------------
ploum ploum tralala

Publicité

David Boring

Positiviste a écrit :

mais bon la taille des liens ne sont pas les m^ donc çà n'allait pas. Et le height n'était pas pris en compte. Alors je me suis tourné vers rollover que vous pouvez voir ds le premier lien:

Les éléments inline, comme les liens ou un span doivent être mis en display block pour leur donner une hauteur et une largeur.
Et la pseudo classe :active, c'est uniquement lorsqu'on clique dessus

Positiviste

Reaction Apathique

c'est bon réglé. merci

Code :

ul {
padding:0;
margin:0;
list-style-type:none;
}
li {
float:left; /*pour IE*/
margin-right:15px;
}
ul li a {
display:block;
float:left;
width:65px;
line-height:21px; /*hauteur de l'image de fond*/
background:none;
color:black;
text-decoration:none;
text-align:center;
}
ul li a:hover {
background:url(../images/bouton_01.png) no-repeat;
color:black;
text-decoration:none;
}
ul li a:focus {
background:url(../images/bouton_on.png) no-repeat;
color:black;
text-decoration:none;
outline: none;
}
ul li a:active{
background:url(../images/bouton_on.png) no-repeat;
color:black;
text-decoration:none;
outline: none;
}

c'était pour les boutons des menus de ce site (accueil, portrait etc..) en cours de construction :

http://www.mough-lee.fr/galerie_java/galerie.html

Message édité par Positiviste le 21-07-2009 à 07:53:49

---------------
ploum ploum tralala

FORUM HardWare.fr

Programmation

HTML/CSS

[REGLER] image qui apparait au survol du lien, puis une autre

Sujets relatifs
image qui suit la barre de défilement	[C# & WPF] Taille d'une image
[AS2] Recuperer le lien d'une page contenant le swf	Problème image dans tableau
[html] coller une image a un tableau	Afficher texte au survol javascript
Lien skype avec majuscule	Lien bouton changé par un autre bouton
Matlab enregistrer image imtool avec contraste	Lien de la base SQL
Plus de sujets relatifs à : [REGLER] image qui apparait au survol du lien, puis une autre

Page générée en 0.059 secondes