ouvrir une seconde image + mailto en html, possible ? [reglé]

ouvrir une seconde image + mailto en html, possible ? [reglé] - HTML/CSS - Programmation

Marsh Posté le 19-02-2005 à 14:50:08    

Bonjour à tous,
 
Voilà, ça fait un an que j'ai un site internet. J'ai commencé par le HTML ... suis passé au PHP ... mais j'avoue que ce qui me pose problème maintenant c'est le JavaScript ... comme 13% des internautes l'ont de désactivé, je souhaite l'éradiquer de mon site pour une question de compatibilité.
 
Je voulais remplacer donc le JS de mon rollover qui pointe sur un mailto.  J'ai mis mon script en CSS avec la technique du Pixy Rollover ...

Code :
  1. <head>
  2. <style>
  3. a.C { background-image: url('images/pixy-rollover.jpg'); display: block; width: 100px }
  4. a.C:hover { background: url('images/pixy-rollover.jpg') 0 -40px }
  5. </style>
  6. </head>
  7. <body>
  8. <center>
  9. <a class="C" href="#back-inline-4"><img border="0" src="images/vide.gif" width="100" height="30"></a>
  10. </center>
  11. </body>


ça fonctionnait très bien en local sur Firefox et sur Iexplorer 6 ... mais quand je passe sur le web, sur Firefox, ça ne fonctionne plus, et sur IE6, j'ai un temps de latence correspondant au glissement de l'image ... bref c'est moche et surtout pas fluide comme le résultat obtenu avec le JS.
 
Donc je souhaite changer de technique, puisque rien ne me convient de ce qui m'est proposé ...  
je voudrais afficher une image A, lorsqu'on clique sur celle ci, une image B prendrait sa place ET lancerait le mailto ... est-ce possible et si oui comment, en quel langage et avec quel script ? ...  
 
Merci de votre aide


Message édité par Profil supprimé le 19-02-2005 à 19:56:46
Reply

Marsh Posté le 19-02-2005 à 14:50:08   

Reply

Marsh Posté le 19-02-2005 à 14:53:50    

bha avec le css c'est la bonne technique...


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 19-02-2005 à 14:58:01    

http://wellstyled.com/css-nopreload-rollovers.html


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 19-02-2005 à 15:10:32    

oui je sais que le CSS est une des solutions les plus en vogue ... mais elle n'est pas géniale ...  je ne comprend pas c'est pourquoi ça ne fonctionne pas correctement sur Firefox ... mais bon ! Sachant que 80% des internautes onst sur IE ... je dois me soucier d'eux ... même si IE est une injure à l'informatique.  une solution ?

Reply

Marsh Posté le 19-02-2005 à 16:55:17    

j'ai solutionné ça en faisant un menu graphique image sur image avec le code CSS suivant :

Code :
  1. <HEAD>
  2. <style>
  3. h1 {
  4. font-size : 15px;
  5. font-style : italic;
  6. }
  7. </style>
  8. <style>
  9. <!--A:link {text-decoration: none; color: #000099}
  10. A:visited {text-decoration:none; color: #800040}
  11. A:active {text-decoration: underline; color: #000099}
  12. A:hover {text-decoration: underline; color: #000099}-->
  13. </style>
  14. <style type="text/css">
  15. <!--
  16. ul, li { /* utilisation de liste pour le menu */
  17. list-style-type: none;  /* suppression des puces de liste */
  18. margin:0;
  19. padding:0;
  20. }
  21. ul {
  22. position: absolute; /* positionnement pour IE5 et IE5.5 */
  23. left: 60%;
  24. top: 210px;
  25. background: transparent url(images/email/email.jpg) top left no-repeat; /* arrière-plan général du menu */
  26. height: 320px;
  27. width: 255px;
  28. }
  29. li {
  30. display: inline; /* correction pour IE5 et IE5.5 */
  31. }
  32. li a { /* dimensions et définitions des boutons */
  33. display: block;  /* mise en block de <a> pour lui donner des dimensions */
  34. height: 108px;
  35. width: 170px;
  36. line-height: 108px;  /* hauteur de ligne pour éviter les paddings */
  37. }
  38. li a:hover {
  39. background: transparent url(images/email/email.jpg) top left no-repeat;
  40. }
  41. a#menu1:hover {
  42. background-position: 0% -320px; /* décalage de l'arrière-plan pour chaque bouton */
  43. }
  44. a#menu2:hover {
  45. background-position: 0% -428px;
  46. }
  47. -->
  48. </style>
  49. </HEAD>
  50. <BODY>
  51. <ul>
  52. <li><li><a ></a></li>
  53. <li><a id="menu2" accesskey="2" href="url"></a></li></li>
  54. </ul>
  55. </BODY>


 
;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed