Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3039 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°987082
Profil sup​primé
Posté le 19-02-2005 à 14:50:08  answer
 

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>
  8. <body>
  9. <center>
  10. <a class="C" href="#back-inline-4"><img border="0" src="images/vide.gif" width="100" height="30"></a>
  11. </center>
  12. </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
mood
Publicité
Posté le 19-02-2005 à 14:50:08  profilanswer
 

n°987084
KangOl
Profil : pointeur
Posté le 19-02-2005 à 14:53:50  profilanswer
 

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


---------------
Nos estans firs di nosse pitite patreye...
n°987088
KangOl
Profil : pointeur
Posté le 19-02-2005 à 14:58:01  profilanswer
 

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


---------------
Nos estans firs di nosse pitite patreye...
n°987090
Profil sup​primé
Posté le 19-02-2005 à 15:10:32  answer
 

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 ?

n°987146
Profil sup​primé
Posté le 19-02-2005 à 16:55:17  answer
 

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


 
;)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Jai perdu ma source + prob ouvrir nouvelle fenetre [Resolu][PHP] Insérer le contenu entier d'une page HTML dans une chaine
Probleme html très facile a résoudre (mais je trouve pas snif)Lien dans une page HTML vers un bookmark dans un fichier .DOC
[Script DOS] ouvrir une page phpCode HTML rotation image
[C#] Envoi de mail avec image 'embeded'[HTML] Afficher un post-it au passage sur un lien ???
Plus de sujets relatifs à : ouvrir une seconde image + mailto en html, possible ? [reglé]

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.048 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR