effet bouton sur un lien

17 avr. 2008, 19:31

Ce message fait suite a ce topic qui a derivé sur du javascript.
http://www.phpfrance.com/forums/voir_sujet-239669.php
pour le moment je n'ai que du css.
dont voici le code.
je n'ai aucune idée sur la manière de faire.
une petite piste.
merci
html

Code : Tout sélectionner

<div id="navcontainerh"> 
  <ul id="navlisth"> 
     <li><a href="./"> ACCUEIL </a></li> 
     <li><a target="_blank" href="condition-vente.php"> condition de vente </a></li> 
     <li><a href="comment-acheter.php"> Comment acheter? </a></li> 
     <li><a href="panier.php"> Panier </a></li> 
     <li><a href="promo-1.php"> <b id="couleurpromo">Promos</b> </a></li> 
     <li><a href="contact.php"><img src="images/contact.png" alt="contact" border="0"> Contact </a></li> 
  </ul>

css

Code : Tout sélectionner

#navcontainerh { 
width : 100%; 
height: 50px; 
background: url("images/fres1.png"); 
} 

#navcontainerh ul { 
margin : 0; 
padding : 0px 0 0 15%; 
letter-spacing : 2px; 
font-weight : bold; 
font-size: 14px; 
height: 50px; 
} 

#navcontainerh ul li { 
display : inline; 
float: left; 
height: 50px; 
} 

#navcontainerh ul li a { 
padding : 0 20px; 
background: url("images/fres1.png"); 
text-decoration : none; 
float : left; 
height: 50px; 
display: block; 
line-height: 50px; 
} 

navcontainerh ul li a:hover { 
background: url("images/fres.png"); 
height: 50px; 
} 

#navlisth li a:hover, #navlisth li a:active { 
text-decoration : none; 
background: url("images/fres.png"); 
text-align : left; 
font-weight : bold; 
height: 50px; 
font-size: 14px; 
}

#navlisth li a:active, #navlisth li a:focus {
  line-height: 46px; 
  display: block;
  text-decoration : none; 
  text-align : left; 
  font-weight : bold; 
  height: 46px; 
  font-size: 14px;
  padding : 0 18px; 
  border-top: 3px solid #FFE8FF;
  border-left: 2px solid #FFE8FF;
  border-right: 2px solid #FFE8FF;
  border-bottom: 1px solid #FFE8FF;
}

18 avr. 2008, 09:50

plusieurs methodes...

on joue avec une seule image et son background-position:
http://sophie-g.net/jobs/css/f_buttons.htm

un image au survol:
http://openweb.eu.org/articles/bouton_css/

transparence sur le hover et couleur du fond:
http://css.maxdesign.com.au/listamatic/horizontal13.htm

autres habillages pour les ul/li la fameuse liste

:
http://css.maxdesign.com.au/listamatic/index.htm

18 avr. 2008, 11:59

merci steph29 mais rien d'interressant.
les effet produt par les differents lien que tu m'as donner sont déja présent sur mon css.
l'effete desirer n'est plus au pasage de la souris mais au clic lors d'un clic sa doit s'enfoncer et si le clic n'est pas terminer la cellule doit se remettre a son statut initial.

18 avr. 2008, 12:05

desole au vu de la question (ou du titre) je ne pouvais pas deviner...

joue sur le a:active au lieu du a:hover alors

voici les effet css dispos sur les liens
a:active => au clic
a:link => lien normal (sans action)
a:visited => visité (etonnant non?)
a:hover => survolé

18 avr. 2008, 12:25

Je veux egalement que cela change de couleur pour donner l'effet de s'alumer quand on passe la souris dessus.
mais cela fonctionne très bien
le probleme qe j'ai avec ce bout de code c'est que sa m'affiche l'url voulu avec "class=fres" .
je croyait que cela activerais ma parti de css.
j'ai bricoler le script d'ajout au favoris.
suis-je sur la bonne voie?
entre les balise head

Code : Tout sélectionner

function fresq(anchor)
{
if (window.external)
{
window.external.fresq(anchor.getAttribute('href'));
}
}

entre les balise body

Code : Tout sélectionner

<div id="navcontainerh">
  <ul id="navlisth">
     <li><a href="./" onClick="fresq(document.write('class=fres'))"><span class="icon"> ACCUEIL </span></a></li>
</ul>

le css qui lui est associer.

Code : Tout sélectionner

#navlisth li a.fres {
  line-height: 46px; 
  display: block;
  text-decoration : none; 
  text-align : left; 
  font-weight : bold; 
  height: 46px; 
  font-size: 14px;
  padding : 0 19px; 
  border-top: 3px solid #CC00FF;
  border-left: 1px solid #CC00FF;
  border-right: 1px solid #CC00FF;
  border-bottom: 1px solid #CC00FF;
}

19 avr. 2008, 13:00

j'en suis la.
j'ai l'erreur suivante

entre les balise head

Code : Tout sélectionner

function fresq()
{
fresq(getAttributeclass('cont'));
var fresqu = "class=fres";
write(fresqu);
}

entre les balise body

Code : Tout sélectionner

<div id="navcontainerh">
<ul id="navlisth">
     <li><a href="./" class="cont" onClick="fresq()"> ACCUEIL </a></li>
  </ul>
</div>

la css associer

Code : Tout sélectionner

#navlisth li a.fres {
  line-height: 46px; 
  display: block;
  text-decoration : none; 
  text-align : left; 
  font-weight : bold; 
  height: 46px; 
  font-size: 14px;
  padding : 0 19px; 
  border-top: 3px solid #CC00FF;
  border-left: 1px solid #CC00FF;
  border-right: 1px solid #CC00FF;
  border-bottom: 1px solid #CC00FF;
}

[/img]

effet bouton sur un lien

Qui est en ligne