Actualité informatique
Test comparatif matériel informatique
Jeux vidéo
Astuces informatique
Vidéo
Télécharger
Services en ligne
Forum informatique
01Business



|||-  

besoin de conseils pour du javascript

 

 

 
Page photos
 
     
Vider la liste des messages à citer
 
 Page :
1
Auteur Sujet :

besoin de conseils pour du javascript

darkvador9​193
darkvador9193
Sur la bonne voie (de 100 à 499 messages postés)
  1. Posté le 28/08/2006 à 10:09:24  
 
Bonjour à tous  :salut:
 voilà, je voudrais savoir comment créer un bouton en javascript, mais avec un détail : je voudrais qu'il y ait trois images différentes : normal, survolé, cliqué. Si quelqu'un peut m'aider ça me sera hyper utile.
 Merci d'avance pour vos réponses.
 A+ :)

(Publicité)
  1. homepage
pc-conseil
Tu cartonnes ! (de 500 à 999 messages postés)
  1. Posté le 30/08/2006 à 19:43:57  
 
Je te met ci dessous un script JS pour pouvoir faire du rollover avec des images :
 Il faut que tu déclares tes images dans la partie images, il doit y avoir l'image originale et l'image rollover terminée par le chiffre 2.
 Tu peux rendre cette fonction compatible avec tous les navigateur, là je ne me suis pas foulé, mais ca fonctionne.

 /* rollovers d'images */
 if (document.images) {
 /*images */  
  image = new Image();
  image.src = "../img/menu/accoff.gif";
  image2 = new Image();
  image2.src = "../img/menu/accon.gif";
  etc ... pour toutes les images à rollover
 }

 /* event = onMouseover */
 function onimage(name)
 {
  if (document.images)
  {

fullname = eval(name + "2" );

document[name].src = fullname.src;
  }
 }

 /* event = onMouseout */
 function offimage(name)
 {
  if (document.images)
  {

fullname = eval(name);

if (fullname.complete)

{

document[name].src = fullname.src;

}
  }
 }

 Ensuite dans tes balises img tu fais ça:
 <img onmouseover="javascript:onimag​e('image');" onmouseout="javascript:offimag​e('image2');" src="../img/menu/image.gif" id="acc" name="acc" class="images" alt="" />

 Si tu faire en plus tu peux créer un évènement clickimage() pour faire la même chose lorsque tu veux faire l'image cliquée.

darkvador9193
Sur la bonne voie (de 100 à 499 messages postés)
  1. Posté le 06/09/2006 à 12:47:47  
 



Tu peux le rendre compatible avec tous les navigateurs



 Comment on fait ? ça me serait beaucoup utile pour d'autres scripts !
 A+

pc_expert
Fan Club de Clic-Clic Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 06/09/2006 à 13:49:38  
 
euh franchement du JS pour ça !

 Et le CSS ça sert à quoi ? :S

bacardi55
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 06/09/2006 à 18:39:30  
 
+1 avec Pc_eXPert

 le JS faut l'utiliser que pour des choses qu'on ne peut pas faire avec le xhtml/css :)

 si tu veux le code css demande ;)

  1. homepage
pc-conseil
Tu cartonnes ! (de 500 à 999 messages postés)
  1. Posté le 06/09/2006 à 21:14:18  
 
OK OK désolé pour les puristes, alors allons y en CSS :

 Code CSS :
 a.image { /* définition de la classe "image" de la balise <a> */

display: block; /* la balise a doit être en bloc */

width: 100px; /* largeur de l'image réactive */

height: 100px; /* hauteur de l'image réactive */

background-image: url(image1.gif); /* source de l'image de départ */

background-repeat: no-repeat;

}
   
 a.image:hover { /* définition de la classe "image" de la balise <a> au survol */

background-image: url(image2.gif); /* source de l'image d'arrivée */

}

 Ce que tu dois mettre dans les pages où tu veux faire du Rollover:
 <a class="image" title="" href="tonlien.htm"></a>

 Et si tu veux pour améliorer le temps de chargement des tes pages (pour éviter de préchargé les boutons), puisqu'on est entre puristes :
 Code CSS :
 #lien { /* "lien" sera notre conteneur, ici la balise div */
 position:absolute; /* placement de l'image-lien, à vous d'adapter */
 left: 200px; /* dimensions selon l'image, à vous d'adapter */
 top: 50px;
 width: 100px;
 height: 100px;
 background: url(image2.gif) top left no-repeat; /* placement de l'image 2 au second plan */
 }

 #lien a { /* définition du lien qui occupera toute la place du conteneur */
 display: block;
 width: 100%;
 height: 100%;
 background: white url(image1.gif) top left no-repeat; /* placement de l'image 1 au premier plan */
 color: #000;

 }

 #lien a:hover { /* masquage de l'image1 au survol */
 background: transparent none;
 }

 Voila voila, mais il faudrait que je vérifie (c'est de l'ancien code  :p ) pour voir s'il est normé.

 PS : Pour les 2 puristes, le post étant destiné à un débutant j'ai voulu faire basique avant d'attaquer le CSS/XHTML qui peut être un peu moins assimilable, c'est tout  ;)

 Sinon pour répondre à ta question sur des scripts compatibles, il faut avoir les navigateurs sous la main pour tester, et se documenter pour les fonctions JS pour connaître les compatibilités (sur un site de références par exemple : http://www.javascript.com/)

bacardi55
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 06/09/2006 à 23:23:30  
 
PC-Conseil > ton code est bien normé (j'ai même été vérifié par le ptit validateur pour etre sur :P)

 Sinon je pense pas etre un puriste (quoi que un peu quand meme) mais je trouve dommage d'utiliser du JS quand on en a pas besoin alors que des gens le desactive... ca serait dommage pour ceux qui ne veulent pas activer le JS qui ne pourront pas profiter du rollover pourtant pas tres compliquer a faire en CSS ;)

 de plus, j ai trouvé ton optimisation intéressante pour le chargement de l'image ;)s

  1. homepage
pc-conseil
Tu cartonnes ! (de 500 à 999 messages postés)
  1. Posté le 07/09/2006 à 23:04:40  
 
Merci  ;)
 Ca m'a permis de ressortir mes "vieux" codes du placard, ça fait pas de mal des fois....
 Moi j'aime bien le JS, m'embêter pour le rendre compatible pendant des heures entre tous les navigateurs   :langue:  :langue:
 Mais ta remarque est exact pour le JS  :) C'est mon côté chef de projet qui ressort, ça occupe les équipes de développeurs le JS et on peut facturer au client un code in-maintenanble et in-buvable pour que le même client refasse appel à nous à chaque modifs  :D  :D

darkvador9193
Sur la bonne voie (de 100 à 499 messages postés)
  1. Posté le 09/09/2006 à 11:27:00  
 
Merci à tous !

 Page :
1

Aller à :