Résolu Petit soucis avec un code CSS avec "easyPHP"

Solutions (9)
Tags :
  • Arrière plan
  • CSS
  • Programmation
|
bonjour à tous et à toute, voila je recherche le moyen, avec" Easy PHP", de rendre une image lien lumineuse quand le curseur de la souris passe sur l'image (sans cliqué dessus).

Exemple: http://www.feriale.net/index.php

On m'a donné un code CSS mais j'ai quelque petit soucis pour le faire fonctionné.

voici le code:

  1. .image {
  2. background: url(image_non_lumineuse.jpg) no-repeat;
  3. }
  4. .image:hover {
  5. background: url(image_lumineuse.jpg) no-repeat;
  6. }



Que faut il que je face pour que sa marche? Y a t'il un code HTML a entré ?

voici mon code CSS et HTML actuel:

CSS:

  1. #body {
  2. width: 1440px;
  3. text-align: center;
  4. background: #cccccc;
  5. margin-left: 0;
  6. margin-right: 0,5em;
  7. }
  8.  
  9. #page_entete {
  10. width:1424px;
  11. height: 101px;
  12. background-image:url(entete.jpg);
  13. text-align: center;
  14. clear: both;
  15. }
  16.  
  17. #marge_gauche {
  18. width:240px;
  19. height:650px;
  20. background-image:url(margeg.jpg);
  21. float: left;
  22. }
  23.  
  24. .image {
  25. background-image: url(logo_humaine.jpg) no-repeat;
  26. }
  27. .image:hover {
  28. background-image: url(logo_humainex.jpg) no-repeat;
  29. }
  30.  
  31. #marge_droite {
  32. width:240px;
  33. height:650px;
  34. background-image:url(marged.jpg);
  35. float: right;
  36. }
  37.  
  38. #contenu {
  39. width: 1400px;
  40. height:650px;
  41. background-image:url(fond.jpg);
  42. float: center;
  43. }
  44.  
  45. #page_pied {
  46. width:1424px;
  47. height: 40px;
  48. background-image:url(piedpage.jpg);
  49. text-align: center;
  50. clear: both;
  51. }



HTML:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmtns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  4. <head><link href="page_menu.css" type="text/css" rel="stylesheet" />
  5. <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
  6.  
  7. <title>
  8. </title>
  9. </head>
  10.  
  11. <body>
  12. </html>
  13.  
  14. <div id="page_entete">
  15. </div>
  16.  
  17. <div id="marge_gauche">
  18.  
  19. <a href="http://127.0.0.1/site/Alliance/page%20alliance/alliance.html"><img src="alliance.jpg" height=240 width=240 /><a/>
  20.  
  21. <br><br>
  22.  
  23. <img src="alliance_flag.png"/>
  24.  
  25. <a href="http://127.0.0.1/site/Alliance/page%20humaine/humaine.html" ><img src="logo_humaine.jpg" style="position:absolute; left:83px; top:425px;"/></a>
  26. <a href="http://127.0.0.1/site/Alliance/page%20gnominette/gnominette.html" ><img src="logo_gnominette.jpg" style="position:absolute; left:83px; top:616px;"/></a>
  27. <a href="http://127.0.0.1/site/Alliance/page%20elfette%20de%20la%20nuit/elfette%20de%20la%20nuit.html" ><img src="logo_elfette de la nuit.jpg" style="position:absolute; left:84px; top:552px;"/></a>
  28. <a href="http://127.0.0.1/site/Alliance/page%20draenei%20(F)/draenei%20F.html" ><img src="logo_draenei (F).jpg" style="position:absolute; left:83px; top:679px;"/></a>
  29. <a href="http://127.0.0.1/site/Alliance/page%20naine/naine.html" ><img src="logo_naine.jpg" style="position:absolute; left:84px; top:489px;"/></a>
  30.  
  31. <a href="http://127.0.0.1/site/Alliance/page%20humain/humain.html" ><img src="logo_humain.jpg" style="position:absolute; left:174px; top:425px;"/></a>
  32. <a href="http://127.0.0.1/site/Alliance/page%20gnome/gnome.html" ><img src="logo_gnome.jpg" style="position:absolute; left:175px; top:616px;"/></a>
  33. <a href="http://127.0.0.1/site/Alliance/page%20elfe%20de%20la%20nuit/elfe%20de%20la%20nuit.html" ><img src="logo_elfe de la nuit.jpg" style="position:absolute; left:174px; top:552px;"/></a>
  34. <a href="http://127.0.0.1/site/Alliance/page%20draenei%20(M)/draenei%20M.html" ><img src="logo_draenei (M).jpg" style="position:absolute; left:174px; top:679px;"/></a>
  35. <a href="http://127.0.0.1/site/Alliance/page%20nain/nain.html" ><img src="logo_nain.jpg" style="position:absolute; left:174px; top:488px;"/></a>
  36.  
  37. </div>
  38.  
  39. <div id="marge_droite">
  40.  
  41. <a href=""><img src="horde.jpg" height=240 width=240 /></a>
  42.  
  43. <br><br>
  44.  
  45. <img src="horde_flag.png"/>
  46.  
  47. <a href="" ><img src="logo_orquesse.jpg" style="position:absolute; right:80px; top:419px;"/></a>
  48. <a href="" ><img src="logo_trollesse.jpg" style="position:absolute; right:80px; top:606px;"/></a>
  49. <a href="" ><img src="logo_tauren (F).jpg" style="position:absolute; right:80px; top:546px;"/></a>
  50. <a href="" ><img src="logo_elfette de sang.jpg" style="position:absolute; right:80px; top:667px;"/></a>
  51. <a href="" ><img src="logo_morte-vivante.jpg" style="position:absolute; right:80px; top:483px;"/></a>
  52.  
  53. <a href="" ><img src="logo_orque.jpg" style="position:absolute; right:171px; top:419px;"/></a>
  54. <a href="" ><img src="logo_troll.jpg" style="position:absolute; right:171px; top:606px;"/></a>
  55. <a href="" ><img src="logo_tauren (M).jpg" style="position:absolute; right:171px; top:544px;"/></a>
  56. <a href="" ><img src="logo_elfe de sang.jpg" style="position:absolute; right:171px; top:667px;"/></a>
  57. <a href="" ><img src="logo_mort-vivant.jpg" style="position:absolute; right:171px; top:482px;"/></a>
  58.  
  59. </div>
  60.  
  61. <div id="contenu">
  62. </div>
  63.  
  64. <div id="page_pied">
  65. </div>
  66. </body>


:ange:  Merci d'avance ;) 
Contenus similaires
Meilleure solution
partage
|
Petite question tout con coldis ... Tu as bien créé les 2 images : la non lumineuse et la lumineuse ?

Parce que le principe c'est pas de rendre une image lumineuse en réalité, c'est juste d'échanger des images lorsque la souris passe dessus.

Après il y a plein de technique, CSS ou JavaScript, mais le principe est toujours le même : l'image change (soit on en met une autre, soit on la déplace ...)

Comme je suis très gentil, je vais te montrer que mon code fonctionne très bien :

Voici mes deux images, en premier la normal et après celle qui s'affichera si la souris est au dessus :

En version CSS
et

En version JavaScript
et

Et voila le résultat : ICI (<clic)

Si tu regarde le source tu verras que c'est exactement comme le code donnée tout en haut ...

Dans mon cas :

  • La version CSS
    1. .image {
    2. background: url(css_image_normal.png) no-repeat;
    3. }
    4. .image:hover {
    5. background: url(css_image_hover.png) no-repeat;
    6. }


  • La version JavaScript
    1. <img src="js_image_normal.png" onmouseover="this.src='js_image_hover.png';" onmouseout="this.src='js_image_normal.png';" />



    Ce qui donne en HTML :

    1. <div class="image" id="vCSS"></div>
    2. <div id="vJS">
    3. <img src="js_image_normal.png" onmouseover="this.src='js_image_hover.png';" onmouseout="this.src='js_image_normal.png';" />
    4. </div>


    Le premier "div" étant la version CSS, le second la version JavaScript.


    Donc, c'est quoi ton problème ? Ça marche bien :o 
    • Commenter cette solution |
    Score
    0
    òh
    òi
    |
    coldis33740 a dit :
    Désolé mais je ne comprend pas :( 

    Je rentre ce code ou?
    Pourquoi un "border"?
    Pourquoi le "div" n'est ni ouvert ( <div>) ni fermé (</div>)?

    lol !!! J'abandonne... :pfff:  En tout cas je pense qu'on peut dire un grand merci à RedSux pour sapatience et son petit tuto css/javascript !!!
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    Meilleure réponse sélectionnée par coldis33740.
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    merci beaucoup =)
    bonne journée a vous tous
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    Désolé mais je ne comprend pas :( 

    Je rentre ce code ou?
    Pourquoi un "border"?
    Pourquoi le "div" n'est ni ouvert ( <div>) ni fermé (</div>)?
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    Salut,

    Essaie et adapte le code suivant :

    1. <html>
    2. <body>
    3.  
    4. <style>
    5. div
    6. {
    7. background: url(url_image_1);
    8. border : 1px solid black; /* cadre de 1 pixel, couleur noire, en ligne continue */
    9. width:300px; /* la largeur de ton image */
    10. height:150px; /* la hauteur de ton image */
    11. }
    12.  
    13. div:hover
    14. {
    15. background: url(url_image_2);
    16. }
    17. </style>
    18.  
    19. <!-- la balise div ci dessous permet de tester le code -->
    20. <div></div>
    21.  
    22. </body>
    23. </html>



    Si cela ne fonctionne pas, c'est peut-être un problème de navigateur... car si tu utilises Internet Explorer 8, c'est normal c'est un bug de l'appli (l'attribut "hover" n'est pas reconnu)...

    Sinon si tu utilises Firefox ou un autre navigateur, c'est ton code qui est mauvais...
    Mais avec l'exemple de code ci-dessus, ca devrait fonctionner (en remplacant url_image_1 et url_image_2 par les URL de tes 2 images bien évidemment !!!!)

    @+
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    Alors la je comprend plus rien. :'( 
    J'ai cherché partout sur internet, j'ai lu une bonne quinzaine de tutoriels et j'ai mis le code que RedSux ma donné en long en large et en travers mais rien a faire je trouve pas, ou du moins je n'arrive pas à rendre mon image lumineuse quand mon curseur passe dessus.
    Please Help Me :'( 

    si possible dite moi exactement se que je dois marqué car la je perd vraiment espoir :(  .
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    , Modérateur |
    Et pour ajouter à ce qu'a dit RedSux. Supprime aussi tous tes URLs en http://127.0.0.1/... et met des URLs relatives plutôt.
    • Commenter cette réponse |
    Score
    0
    òh
    òi
    |
    Bonjour,

    Bon, premièrement : EasyPHP étant juste une suite logiciel intégrant un serveur web (Apache), un interpréteur de scripts (PHP) et une base de données (MySQL); je ne vois pas le rapport entre ton soucis et cette suite !

    Il faut comprendre que ton code html+css est interpréter pas le navigateur et non par ton serveur (qui ne fais que les mettre à disposition avec le bon protocole).

    Deuxièmement : il existe une balise sur le forum permettant d'afficher du code source, c'est beaucoup plus propre quand on l'utilise : [cpp]... ton code ici ...[/cpp]

    Ce qui donne :
    1. ... ton code ici ...


    C'est quand même plus facile à lire :o 

    Maintenant, revenons à ton problème :
    Le CSS qu'on t'a filé défini une "class" qu'il faut ensuite utiliser dans ton html.

    1. .image {
    2. background: url(image_non_lumineuse.jpg) no-repeat;
    3. }
    4. .image:hover {
    5. background: url(image_lumineuse.jpg) no-repeat;
    6. }


    S'utilise donc avec un élément "block" en général, comme un "div", "td", etc.

    1. <div class="image"></div>


    C'est une version assez propre mais vue que tu n'as pas l'aire de connaitre grand chose au CSS et HTML, je te conseil de commencer par apprendre avec quelques tutoriels : un petit tuto du coté du SiteDuZero (< clic)

    Maintenant, tu sais qu'il est possible de voire le code HTML d'une page avec la plus part des navigateurs (ctrl+u en général) ?
    Donc avec le site que tu as données plus haut, tu aurais pu trouver tout seul comment les développeurs avaient mis ça en place :

    1. <img src="IMAGE_NORMAL.JPG" onmouseover="this.src='IMAGE_HIGHLIGHT.JPG';" onmouseout="this.src='IMAGE_NORMAL.JPG';" />


    Ça marche aussi, même si le passage par du JavaScript (OnMouseOver et OnMouseOut) n'est pas très propre, notamment si le JavaScript est désactivé sur le navigateur.

    Voila, maintenant vas chercher des tutos avec Google.
    • Commenter cette réponse |

    Ce n'est pas ce que vous cherchiez ?

    Tom's guide dans le monde
    • Allemagne
    • Italie
    • Irlande
    • Royaume Uni
    • Etats Unis
    Suivre Tom's Guide
    Inscrivez-vous à la Newsletter
    • ajouter à twitter
    • ajouter à facebook
    • ajouter un flux RSS