Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

Problèmes De Bouton

Dozer

Alor voila, j'ai 2 images et je voudrai qu'en passent la souris sur la 1ere, une 2eme s'affiche et en cliquant dessus, que ça ammène vers une autre page. j'ai trouver un code qui marche a moitier sur internet qui marche a moitier même pas dutout des fois :

&#60;A HREF=&#34;http&#58;//mapage.boxnet.net&#34; onMouseOver=&#34;i178328.src='http&#58;//pagesperso.laposte.net/otmax/images_page/home2.png'&#34; &nbsp;onMouseOut=&#34;i178328.src='http&#58;//pagesperso.laposte.net/otmax/images_page/home.png'&#34;&#62;&#60;IMG SRC=&#34;http&#58;//pagesperso.laposte.net/otmax/images_page/home.png&#34; BORDER=0 NAME=&#34;i178328&#34; ALT=&#34;&#34; HSPACE=0 VSPACE=0&#62;&#60;/A&#62;<br />&#60;A HREF=&#34;http&#58;//mapage.boxnet.net/logiciels.htm&#34; onMouseOver=&#34;i262453.src='http&#58;//pagesperso.laposte.net/otmax/images_page/applications2.png'&#34; &nbsp;onMouseOut=&#34;i262453.src='http&#58;//pagesperso.laposte.net/otmax/images_page/applications.png'&#34;&#62;&#60;IMG SRC=&#34;http&#58;//pagesperso.laposte.net/otmax/images_page/applications.png&#34; BORDER=0 NAME=&#34;i262453&#34; ALT=&#34;&#34; HSPACE=0 VSPACE=0&#62;&#60;/A&#62;<br />&#60;A HREF=&#34;http&#58;//mapage.boxnet.net/divers.htm&#34; onMouseOver=&#34;i458650.src='http&#58;//pagesperso.laposte.net/otmax/images_page/documents2.png&#34; &nbsp;onMouseOut=&#34;i458650.src='http&#58;//pagesperso.laposte.net/otmax/images_page/documents.png'&#34;&#62;&#60;IMG SRC=&#34;http&#58;//pagesperso.laposte.net/otmax/images_page/documents.png&#34; BORDER=0 NAME=&#34;i458650&#34; ALT=&#34;&#34; HSPACE=0 VSPACE=0&#62;&#60;/A&#62;<br />&#60;A HREF=&#34;http&#58;//mapage.boxnet.net/musique.htm&#34; onMouseOver=&#34;i532767.src='http&#58;//pagesperso.laposte.net/otmax/images_page/musique2.png&#34; &nbsp;onMouseOut=&#34;i532767.src='http&#58;//pagesperso.laposte.net/otmax/images_page/musique.png'&#34;&#62;&#60;IMG SRC=&#34;http&#58;//pagesperso.laposte.net/otmax/images_page/musique.png&#34; BORDER=0 NAME=&#34;i532767&#34; ALT=&#34;&#34; HSPACE=0 VSPACE=0&#62;&#60;/A&#62;<br />&#60;A HREF=&#34;http&#58;//mapage.boxnet.net/images.htm&#34; onMouseOver=&#34;i218959.src='http&#58;//pagesperso.laposte.net/otmax/images_page/pictures2.png&#34; &nbsp;onMouseOut=&#34;i218959.src='http&#58;//pagesperso.laposte.net/otmax/images_page/pictures.png'&#34;&#62;&#60;IMG SRC=&#34;http&#58;//pagesperso.laposte.net/otmax/images_page/pictures.png&#34; BORDER=0 NAME=&#34;i218959&#34; ALT=&#34;&#34; HSPACE=0 VSPACE=0&#62;&#60;/A&#62;<br />&#60;A HREF=&#34;http&#58;//mapage.boxnet.net/liens.htm&#34; onMouseOver=&#34;i47045.src='http&#58;//pagesperso.laposte.net/otmax/images_page/liens2.png&#34; &nbsp;onMouseOut=&#34;i47045.src='http&#58;//pagesperso.laposte.net/otmax/images_page/liens.png'&#34;&#62;&#60;IMG SRC=&#34;http&#58;//pagesperso.laposte.net/otmax/images_page/liens.png&#34; BORDER=0 NAME=&#34;i47045&#34; ALT=&#34;&#34; HSPACE=0 VSPACE=0&#62;&#60;/A&#62;<br />&#60;A HREF=&#34;mailto&#58;anozer@mac.com&#34; onMouseOver=&#34;i678865.src='http&#58;//pagesperso.laposte.net/otmax/images_page/mail2.png'&#34; &nbsp;onMouseOut=&#34;i678865.src='http&#58;//pagesperso.laposte.net/otmax/images_page/mail.png'&#34;&#62;&#60;IMG SRC=&#34;http&#58;//pagesperso.laposte.net/otmax/images_page/mail.png&#34; BORDER=0 NAME=&#34;i678865&#34; ALT=&#34;&#34; HSPACE=0 VSPACE=0&#62;&#60;/A&#62;&#60;/div&#62;&#60;/td&#62;&#60;/tr&#62;<br />

la page http://mapage.boxnet.net Avez vous un code ou une qutre métode (flash, html, javascript ...) J'ai aussi un autre problème, j'arrive a bien aligné les images pour safari mais pas pour fire fox et inversement ... Merci de m'aider

syndicman

Tu peux te référer a cette page ou il est expliqué comment arriver a tes fins a l'aide d'une simple feuille de style : http://openweb.eu.org/articles/bouton_css/

Dozer

ouai super merci !!!

Dozer

arg, sa marche pas : css :

/* CSS Document */<br /><br /> a.bouton {<br /> &nbsp;background-image&#58; url&#40;http&#58;//mapage.boxnet.net/images_page/accueil.png&#41;<br />}<br />a.bouton&#58;hover {<br /> &nbsp;background-image&#58; url&#40;http&#58;//mapage.boxnet.net/images_page/accueil2.png&#41;;<br />}

html :

&#60;&#33;DOCTYPE HTML PUBLIC &#34;-//W3C//DTD HTML 4.01 Transitional//EN&#34;<br />&#34;http&#58;//www.w3.org/TR/html4/loose.dtd&#34;&#62;<br />&#60;html&#62;<br />&#60;head&#62;<br />&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=iso-8859-1&#34;&#62;<br />&#60;title&#62;Document sans nom&#60;/title&#62;<br />&#60;/head&#62;<br />&#60;p&#62;<br /> &nbsp;&#60;a href=&#34;http&#58;//mapage.boxnet.net&#34; class=&#34;bouton&#34;&#62;&#60;/a&#62;<br />&#60;/p&#62;<br />&#60;body&#62;<br />&#60;/body&#62;<br />&#60;/html&#62;<br />

c'est quoi le problème ? :blink:

Akira

Faut pas mettre "class a.bouton" plutôt ?

Dozer

nan, toujours pas ... http://mapage.boxnet.net/mapage.htm CSS (document nommé css.css)

/* CSS Document */<br /><br />a.bouton {<br /> background-image&#58; url&#40;http&#58;//pagesperso.laposte.net/otmax/images_page/accueil.png&#41;<br />}<br />a.bouton&#58;hover {<br /> background-image&#58; url&#40;http&#58;//pagesperso.laposte.net/otmax/images_page/accueil2.png&#41;;<br />}

html (document nommé mapage.htm)

&#60;html&#62;<br />&#60;head&#62;<br />&#60;title&#62;Document sans nom&#60;/title&#62;<br />&#60;/head&#62;<br />&#60;p&#62;<br />&#60;a href=&#34;http&#58;//mapage.boxnet.net&#34; class=&#34;a.bouton&#34;&#62;&#60;/a&#62;<br />&#60;/p&#62;<br />&#60;body&#62;<br />&#60;/body&#62;<br />&#60;/html&#62;<br />

syndicman

Déjà tu as oublié de mettre un lien vers ton fichier .css dans ton code HTML. <html> <head> <title>Document sans nom</title> <style type="text/css" media="screen">@import "css.css";</style> </head> <body> <a href="http://mapage.boxnet.net" class="bouton"></a> </body> </html>

Dozer

merci mais ça ne marche toujours pas ...

&#60;html&#62;<br />&#60;head&#62;<br />&#60;title&#62;Ma Page&#60;/title&#62;<br />&#60;style type=&#34;text/css&#34; media=&#34;screen&#34;&#62;@import &#34;css.css&#34;;&#60;/style&#62;<br />&#60;/head&#62;<br />&#60;p&#62;<br />&#60;a href=&#34;http&#58;//mapage.boxnet.net&#34; class=&#34;a.bouton&#34;&#62;&#60;/a&#62;<br />&#60;/p&#62;<br />&#60;body&#62;<br />&#60;/body&#62;<br />&#60;/html&#62;

et

/* CSS Document */<br /><br />a.bouton {<br /> background-image&#58; url&#40;http&#58;//pagesperso.laposte.net/otmax/images_page/accueil.png&#41;<br />}<br />a.bouton&#58;hover {<br /> background-image&#58; url&#40;http&#58;//pagesperso.laposte.net/otmax/images_page/accueil2.png&#41;;<br />}

syndicman

Ton code n'est pas bon. Le <body> est mal placé, ton lien est vide et la classe devrait être bouton et non a.bouton. <html> <head> <title>Document sans nom</title> <style type="text/css" media="screen">@import "css.css";</style> </head> <body> <a href="http://mapage.boxnet.net" class="bouton"></a> </body> </html> Il faudrait également que tu spécifies quel code HTML tu utilises par exemple comme sur l'exemple d'OpenWeb pour du XHTML 1.0, il faut que tu ajoutes ça au début de ton fichier : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> et <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> à la place de <html>

Dozer

mais comment je me suis débrouiller :brick: Merci !!!

Dozer

ça ne marche toujours pas, mais je suis vraiment bète ou quoi ?!

&#60;&#33;DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Strict//EN&#34; &#34;http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&#34;&#62;<br />&#60;html xmlns=&#34;http&#58;//www.w3.org/1999/xhtml&#34; xml&#58;lang=&#34;fr&#34; lang=&#34;fr&#34;&#62;<br />&#60;head&#62;<br />&#60;title&#62;Document sans nom&#60;/title&#62;<br />&#60;style type=&#34;text/css&#34; media=&#34;screen&#34;&#62;@import &#34;css.css&#34;;&#60;/style&#62;<br />&#60;/head&#62;<br />&#60;body&#62;<br />&#60;p&#62;<br />&#60;a href=&#34;http&#58;//mapage.boxnet.net&#34; class=&#34;bouton&#34;&#62;&#60;img src=&#34;http&#58;//pagesperso.laposte.net/otmax/images_page/accueil.png&#34; /&#62;&#60;/a&#62;<br />&#60;/p&#62;<br />&#60;/body&#62;<br />&#60;/html&#62;

Que faut il metre entre <a ...> et </a> ?

Dozer

quand on pause la souris dessu, l'image 2 apparait en dessous au lieu de pardessus :unsure:

Mighty KC

http://mightykc.free.fr/css Ca serait pas ca que tu voulais faire ? :) NB : y a pas de preloading des images... vais faire une autre version ce soir, envie de tester un truc ke j'ai trouvé l'autre jour (et je risque d'en avoir besoin demain au boulot ;) )

Mighty KC

Allez, une p'tite version 2 : - 1 page dans laquelle on cale un lien avec la classe adéquate (ici "roll") - 1 css dans laquelle on file une image de fond au lien de classe "roll". Display en "block" pour filer une taille (celle de l'image), on met une image de fond en état "neutre", pas de répétition de l'arriere plan, position d'origine : "0px 0px" (en haut a gauche). Lorsqu'on survole, l'image d'arrière plan change de position : "0px -162px" (elle monte de 162 pixels vers le haut). - 1 image contenant les deux états. Voilà, p'tite préférence pour la version 2 : pas de préchargement nécessaire pour l'image survolée. Mais faut que les CSS soient prises correctement en compte ;) NB : optimise tes pngs (pas avec Photoshop, pas top du tout pour les optimisations qualité/poids) et fais gaffe à la compatibilité pour la transparence (vive IE :evil: ) NB2: mes pages html sont en xhtml 1.1 strict : ca laisse pas passer grand chose et n'est pas toujours interprété de la même facon que du transitional ou html 4... par le même navigateur ! (simplement en changeant l'en tête alors que le code passe les certifs).

Dozer

ouai super merci !!! je vai aissayer la version 1 (moins compliquer :D) puis la 2 Mes pngs sont faite avec Firework mx 2004 (photoshop est sur disquette :wacko: ) MERCI