Partage
  • Partager sur Facebook
  • Partager sur Twitter

Image réactive

Sujet résolu
Ulruc
  • HTML / CSS
    29 décembre 2005 à 2:00:22

    Bonjour tout le monde. Je suis un nouveau zéro et fier de l'être. Je suis actuellement en train d'actualiser le code de mon site web afin de passer du HTML au XHTML et CSS. Je viens tout juste de terminer une recherche sur les forums ainsi que dans les annexes et je suis revenu bredouille.

    Le problème, en tant que tel, vient du fait que mon image est de type réactive. Je l'ai crée grâce au logiciel Paint Shop Pro 10.01 afin que chaque rayon (c'est une image de bibliothèque) amène mes visiteurs vers une nouvelle page. Un coup la création de l'image complète terminée, Paint Shop Pro m'a donné le code HTML que je devais copié facilement dans mon code source.

    Je me demandais donc si je devais ou pouvais créer cette image en code CSS ou si je dois laisser le code tel qu'il l'est en ce moment. Je souhaite rester conforme aux normes de Web et j'ignore comment je dois m'y prendre pour le faire.

    Voici une image relantant le code source de mon image en HTML :



    <p><img name="library0" src="http://ulruc.tripod.com/Images/library.jpg" width="640" height="480" border="0" usemap="#library" alt="Bibliothèque" />

    <map name="library">

    <area shape="poly" coords="0, 66, 142, 134, 142, 60, 74, 5, 1, 4" href="http://ulruc.tripod.com/accueil/nouveautes.htm" alt="Nouveautés : Section décrivant les dernières mises à jour de ce site pour ceux qui ne les ont pas lu" onMouseOver="if(document.images) document.library0.src='http://ulruc.tripod.com/Images/library.jpg';" >

    <area shape="poly" coords="1, 220, 142, 220, 142, 139, 4, 69" href="http://ulruc.tripod.com/accueil/mystera.htm" alt="Mystera : Section sur le monde de Mystera, ses particularités ainsi que ses unicités" onMouseOver="if(document.images) document.library0.src='http://ulruc.tripod.com/Images/library.jpg';" >

    <area shape="poly" coords="2, 336, 144, 284, 144, 221, 4, 221" href="http://ulruc.tripod.com/accueil/classes.htm" alt="Classes : Section sur les nouvelles classes de personnages" onMouseOver="if(document.images) document.library0.src='http://ulruc.tripod.com/Images/library.jpg';" >

    <area shape="poly" coords="4, 426, 144, 342, 144, 285, 0, 340" href="http://ulruc.tripod.com/accueil/monstres.htm" alt="Monstres : Section consacrée aux nouveaux monstres et aux adaptations des anciens" onMouseOver="if(document.images) document.library0.src='http://ulruc.tripod.com/Images/library.jpg';" >

    <area shape="poly" coords="639, 71, 508, 135, 508, 61, 589, 2, 639, 2" href="http://ulruc.tripod.com/accueil/download.htm" alt="Downloads : Section présentant des aides de jeux et tous les fichiers qui n'ont pas de place ailleurs" onMouseOver="if(document.images) document.library0.src='http://ulruc.tripod.com/Images/library.jpg';" >

    <area shape="poly" coords="639, 223, 508, 220, 509, 137, 639, 76" href="http://ulruc.tripod.com/accueil/sorts.htm" alt="Sorts : Section présentant les nouveaux sortilèges utilisés récemment dans le monde de Mystera" onMouseOver="if(document.images) document.library0.src='http://ulruc.tripod.com/Images/library.jpg';" >

    <area shape="poly" coords="639, 335, 503, 284, 509, 222, 639, 228" href="http://ulruc.tripod.com/accueil/personnages.htm" alt="Personnages : Section décrivant les personnages joués durant mes parties sur table et en grandeur nature" onMouseOver="if(document.images) document.library0.src='http://ulruc.tripod.com/Images/library.jpg';" >

    <area shape="poly" coords="638, 420, 505, 339, 505, 288, 639, 338" href="http://ulruc.tripod.com/accueil/liens.htm" alt="Liens : Section présentant des liens vers d'autres sources bien intéressantes en dehors de mon site" onMouseOver="if(document.images) document.library0.src='http://ulruc.tripod.com/Images/library.jpg';" >

    <area shape="rect" coords="263, 133, 390, 357" href="http://w2.webreseau.com/fr/services/guestbook/messages.asp?id=648679" alt="Livre d'or : Pour ceux qui ont des commentaires à me faire" onMouseOver="if(document.images) document.library0.src='http://ulruc.tripod.com/Images/library.jpg';" >

    </map>

    </p>


    Je me doute bien que je peux m'occuper du "mouseover" via un peu de code CSS mais j'ignore comment faire en ce qui concerne les balises "area shape" et "map area".

    Merci à l'avance pour toutes les personnes qui liront ceci et qui pourront peut-être m'aider dans ma nouvelle oeuvre.
    • Partager sur Facebook
    • Partager sur Twitter
    AurelFreaky
    • HTML / CSS
      29 décembre 2005 à 5:08:00

      Les area shape comme tu les appelles m'on plutôt l'air d'être en fait une balise (area) suivi d'un attribut (shape) puisqu'il y a un espace entre les deux. Concernant le CSS, tu peux donc définir du CSS pour la balise area. Concernant map area, c'est pareil, mais j'en voit pas dans ton code :)
      • Partager sur Facebook
      • Partager sur Twitter
      Ulruc
      • HTML / CSS
        29 décembre 2005 à 19:46:02

        Je vois. J'y ai travaillé en me fiant aux nombreuses aides de ce site ainsi que des aides venant de ce lien que j'ai obtenu lors d'un tutoriel di ste du zéro : <lien url="http://css.alsacreations.com/Plan-du-site"></lien>

        En voyant cela, je me suis donc rendu compte que la balise area possédait plusieurs attribut possibles (shape, coords, etc.) en html et en xhtml. Par contre, rien de concluant en CSS. J'ai essayé d'inclure les liens et les coordonnés de mes zones réactives dans la feuille de style directement sans succès. J'ai aussi essayé d'inclure l'attribut shape dans ce fichier. Rien de totu cela a fonctionné ou alors j'ai fait une erreur dans le code, ce qui est toujours possible.

        Voilà pourquoi je met ici le code XHTML suivi du code CSS sur lequel je travaille. Peut-être qu'en voyant le code cela permettra à quelqu'un de mieux m'aidé.



        <p><img id="library" name="library" src="http://ulruc.tripod.com/Images/library.jpg" alt="Bibliothèque" />

        <map name="library">
        <a id="zone_1"  href="http://ulruc.tripod.com/accueil/nouveautes.htm" alt="Nouveautés : Section décrivant les dernières mises à jour de ce site pour ceux qui ne les ont pas lu" />

        <a id="zone_2" href="http://ulruc.tripod.com/accueil/mystera.htm" alt="Mystera : Section sur le monde de Mystera, ses particularités ainsi que ses unicités" />

        <a id="zone_3" href="http://ulruc.tripod.com/accueil/classes.htm" alt="Classes : Section sur les nouvelles classes de personnages" />

        <a id="zone_4" href="http://ulruc.tripod.com/accueil/monstres.htm" alt="Monstres : Section consacrée aux nouveaux monstres et aux adaptations des anciens" />

        <a id="zone_5" href="http://ulruc.tripod.com/accueil/download.htm" alt="Downloads : Section présentant des aides de jeux et tous les fichiers qui n'ont pas de place ailleurs" />

        <a id="zone_6" href="http://ulruc.tripod.com/accueil/sorts.htm" alt="Sorts : Section présentant les nouveaux sortilèges utilisés récemment dans le monde de Mystera" />

        <a id="zone_7" href="http://ulruc.tripod.com/accueil/personnages.htm" alt="Personnages : Section décrivant les personnages joués durant mes parties sur table et en grandeur nature" />

        <a id="zone_8" href="http://ulruc.tripod.com/accueil/liens.htm" alt="Liens : Section présentant des liens vers d'autres sources bien intéressantes en dehors de mon site" />

        <a id="zone_9" href="http://w2.webreseau.com/fr/services/guestbook/messages.asp?id=648679" alt="Livre d'or : Pour ceux qui ont des commentaires à me faire" />
        </map></p>





        #zone_1
        {
                shape: "poly";
                coords: "0, 66, 142, 134, 142, 60, 74, 0, 0, 0, 0, 66";
        }

        #zone_2
        {
                shape: "poly";
                coords: "0, 220, 142, 220, 142, 134, 0, 66, 0, 220";
        }

        #zone_3
        {
                shape: "poly";
                coords: "0, 336, 142, 284, 142, 220, 0, 220, 0, 336";
        }

        #zone_4
        {
                shape: "poly";
                coords: "0, 420, 142, 336, 142, 284, 0, 336, 0, 420";
        }

        #zone_5
        {
                shape: "poly";
                coords: "640, 71, 508, 135, 508, 61, 589, 0, 640, 0, 640, 71";
        }

        #zone_6
        {
                shape: "poly";
                coords: "640, 223, 508, 223, 508, 135, 640, 71, 640, 223";
        }

        #zone_7
        {
                shape: "poly";
                coords: "640, 335, 508, 284, 508, 223, 640, 223, 640, 335";
        }

        #zone_8
        {
                shape: "poly";
                coords: "640, 420, 508, 335, 508, 284, 640, 335, 640, 420";
        }

        #zone_9
        {
                shape: "rect";
                coords: "263, 133, 390, 357";
        }



        Espérons que cela vous aider afin que vous puissiez m'aider en retour.
        • Partager sur Facebook
        • Partager sur Twitter
        AurelFreaky
        • HTML / CSS
          29 décembre 2005 à 23:47:00

          Heureusement que Notepad++ colore les balises et autres pour que tu puisse t'apercevoir que les ATTRIBUTS de BALISES n'ont rien à faire dans un fichier CSS !
          • Partager sur Facebook
          • Partager sur Twitter

          Image réactive

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown