changer les boutons de oscss

changer les boutons de oscss

Messagepar boris369 » Sam 02 Juil 2011, 19:01

voila j'ai changé la plupart des boutons d'ocss car la plupart de mes bouton sont des images, j'aimerai les rendre plus interactifs pour que quand on clique dessus le bouton s'enfonce, puis si la souris se retire le bouton se relache, un peu comme un vrai bouton en fait.

Le probleme c'est que je n'y arrive pas vraiment, j'arrive à faire en sorte que le bouton s'enfonce et ressorte lors du passage de la souris en javascript avec la fonction mouseover de cette facon :

Code: Tout sélectionner
<input type="image" title="" class="bouton-creermoncompte" src="http://localhost/osCSS-2/templates/clean/images/boutons/creer_mon_compte.png" onmouseover="javascript:this.src='http://localhost/osCSS-2/templates/clean/images/boutons/creer_mon_compte2.png';" onmouseout="javascript:this.src='http://localhost/osCSS-2/templates/clean/images/boutons/creer_mon_compte.png';" /> <!-- fonction javascript -->


mais je voudrais que cela se fasse que quand on click dessus, j'ai donc essayé la même syntaxe avec les fonctions mousdown et mouseup mais ca ne marche pas bien, le bouton reste enfoncé et ne ressort pas, comme ci la fonction mouseup n'était pas prise en compte, voila ce que j'ai fait :

<input type="image" title="" class="bouton-creermoncompte" src="http://localhost/osCSS-2/templates/clean/images/boutons/creer_mon_compte.png" onmousedown="javascript:this.src='http://localhost/osCSS-2/templates/clean/images/boutons/creer_mon_compte2.png';" onmouseup="javascript:this.src='http://localhost/osCSS-2/templates/clean/images/boutons/creer_mon_compte.png';" />


j'ai aussi essayé avec la fonction onclick mais je n'y arrive pas, des idées ?

je précise que pour cette exemple, je suis dans le fichier create_account.php pour le bouton creer mon compte en bas de page
boris369
Membre très actif
 
Messages: 149
Inscription: Sam 31 Jan 2009, 02:54

Re: changer les boutons de oscss

Messagepar chever » Lun 04 Juil 2011, 11:52

Peut etre faudrait il regarder du cote css

ex :

Code: Tout sélectionner
input.submitBt {
background: url(image1)}

input.submitBt:hover {

background: url(image2);

}


Sinon toujours avec css, tu crée un cadre autour de ton bouton avec border-style outset et quand la souris passe dessus, border-style inset
oscss 1.2/seo/point and rewards/featured et beaucoup de sueur
chever
Membre gold
 
Messages: 529
Inscription: Jeu 26 Juil 2007, 21:06
Localisation: Macon

Re: changer les boutons de oscss

Messagepar boris369 » Mer 06 Juil 2011, 22:20

cette option n'est pas une bonne idée bien qu'elle soit pratique dans l'utilisation, c'est ce que j'avais fait au début mais cela donne un temps de latence à charger l'image en cache et en plus cela bug ds ie en faisant clignoter le navigateur :roll: c'est pour cela que le java me parait mieu approprié pour ce genre de chose.
boris369
Membre très actif
 
Messages: 149
Inscription: Sam 31 Jan 2009, 02:54

Re: changer les boutons de oscss

Messagepar Brain » Mar 26 Juil 2011, 15:20

Bonjour,
Je rejoins chever sur le fait que le mieux est d'utiliser le css pour ce genre de chose.
Ensuite afin d'éviter de recharger chaque image à chaque changement d'état: active, hover, etc... le mieux est de créer une seule image par bouton contenant tous les états. Il ne reste plus ensuite qu'à changer le background-position en css en fonction des états pour afficher l'image voulue sans avoir de temps de chargement vu qu'elle est déjà chargée.
Brain
Membre actif
 
Messages: 69
Inscription: Dim 24 Avr 2011, 15:50


Retourner vers My osCSS

 


  • Articles en relation
    Réponses
    Vus
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 2 invités

cron