Forum de Graph, aide Html et Css
 
AccueilAccueil  FAQFAQ  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 PA Clicable sur Bazzart

Aller en bas 
AuteurMessage
Sweet Purple
Admin
avatar

Messages : 131
Date d'inscription : 12/07/2010
Age : 24

MessageSujet: PA Clicable sur Bazzart   Jeu 28 Avr - 19:49

    Bonjour.

    Pour ceux qui souhaitent créer une page d'accueil cliquable, il vous suffit de mettre ce code sur votre éditeur de page d'accueil en mode HTML

    Code:
    <IMG NAME="accueil0" SRC="http://i86.servimg.com/u/f86/13/16/02/55/page_d11.jpg" WIDTH="724" HEIGHT="515" BORDER="0" USEMAP="#accueil">

    <MAP NAME="accueil">
    <AREA SHAPE="rect" COORDS="47,33,116,54" HREF="http://fashion-universite.forumactif.org/reglement-contexte-f1/voici-le-contexte-t5.htm" ALT="Le contexte">
    </MAP>



    code donné par MIELPOPS HEROIN™


    Spoiler:




    Alors voilà comme promis un petit tuto pour faire plusieurs liens dans une seule image.
    Ex : Page d'accueil ici ou

    Alors avant de commencer, faites votre image. Une fois que vous avez votre image définitive vous allez pouvoir la rendre cliquable. Le code HTML rentre alors en jeu.
    Vous allez avoir besoin de ce code :

    Code:
    <IMG NAME="accueil0" SRC="url de votre image" WIDTH="largeur de votre image" HEIGHT="hauteur de votre image" BORDER="0" USEMAP="#accueil">

    <MAP NAME="accueil">
    <AREA SHAPE="rect" COORDS="X1,Y1,X2,Y2" HREF="url du lien" ALT="texte bref décrivant le lien">

    <AREA SHAPE="circle" COORDS="X3,Y3,R" HREF="url du lien" ALT="texte bref décrivant le lien">

    </MAP>


    Pour commencer ouvrez votre image dans votre photofiltre.


    • Si vous voulez créer une zone cliquable en forme de rectangle, procédez comme indiqué sur l'image suivante :
      Spoiler:
       


  • Si vous voulez créer une zone cliquable en forme de cercle, c'est un peu plus compliqué et il faut ruser :
    Spoiler:


  • Répétez ces étapes autant de fois que vous voulez créer de zones cliquables et compléter votre code.
    Ajoutez ça pour une zone rectangle :
    Code:
     <AREA SHAPE="rect" COORDS="X1,Y1,X2,Y2" HREF="url du lien" ALT="texte bref décrivant le lien">
    et ça pour une zone en cercle : [codetexte bref décrivant le lien[/code]
    Mais ces lignes supplémentaires doivent obligatoirement se trouver avant la balise finale
    Code:
    </MAP>


    Ensuite il vous faudra héberger votre image et copiez l'url dans le code et notez sa hauteur et sa largeur.

    Pensez à copiez l'url des liens de chaque zone cliquable que vous avez créé et copiez le code dans le code source de votre page d'accueil.

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://couleurs-en-folies.forumsactifs.net
Sweet Purple
Admin
avatar

Messages : 131
Date d'inscription : 12/07/2010
Age : 24

MessageSujet: Re: PA Clicable sur Bazzart   Jeu 28 Avr - 19:52

    Je me permets de mettre un tutorial pour faire des liens cliquables sur une image Smile (par exemple sur le forum , juste en dessous du titre "navigation" )

    J'utilise le logitiel photofiltre studio X, mais c'est la même chose pour photofiltre tout court (merci à RaniPyaar pour cette précision). Par contre, c'est pour photoshopp, je ne peux pas vous aider pour trouver les "coordonnées" de l'image, ne l'ayant pas. Le tutorial est tout de même semblable Wink

    Voici le code "brut" que l'on va utiliser
    Code:
    <IMG src="VOTRE IMAGE DE BASE QUE VOUS AVEZ HEBERGUE" width=SA LARGUEUR height=SA HAUTEUR useMap=#NOM DE LA CARTE> <MAP name=NOM DE LA CARTE><AREA href="LIENS ICI" shape=rect coords=A,B,C,D >
    <AREA href="LIENS ICI" shape=rect coords=A,B,C,D >
    <AREA href="LIENS ICI" shape=rect coords=A,B,C,D >
    <AREA href="LIENS ICI" shape=rect coords=A,B,C,D >
    <AREA href="LIENS ICI" shape=rect coords=A,B,C,D >
    ....
    </MAP>


    J'explique les différents champs.

  • "VOTRE IMAGE DE BASE QUE VOUS AVEZ HEBERGUE". ici, vous placez, à la place du texte, l'url de l'image sur laquelle vous voulez qu'apparaisse les liens

  • width=SA LARGUEUR height=SA HAUTEUR. Par exemple : width=100 height=100 . Vous devez mettre exactement la taille de votre image, faute de quoi, l'image sera déformée, et le code ne sera plus bon.

  • NOM DE LA CARTE : Il apparait deux fois. Il faut que donner LE MEME NOM aux deux endroits différents, faute de quoi, cela ne fonctionnera pas. Si vous voulez mettre deux images cliquables sur une page d'acceuil, vous devrez leur donner deux noms différentes, sinon les codes vont se croiser et "beuguer" Par exemple, une première image :
    Code:
    <IMG src="VOTRE IMAGE DE BASE QUE VOUS AVEZ HEBERGUE" width=SA LARGUEUR height=SA HAUTEUR useMap=#Map1> <MAP name=map1><AREA href="LIEN ICI" shape=rect coords=A,B,C,D >
    <AREA href="LIENS ICI" shape=rect coords=A,B,C,D >
    </MAP>


    et une deuxième, dans la même PA

    Code:
    <IMG src="VOTRE IMAGE DE BASE QUE VOUS AVEZ HEBERGUE" width=SA LARGUEUR height=SA HAUTEUR useMap=#Deuxièmeimage DE LA CARTE> <MAP name=Deuxièmeimage><AREA href="LIENS ICI" shape=rect coords=A,B,C,D >
    <AREA href="LIENS ICI" shape=rect coords=A,B,C,D >
    <AREA href="LIENS ICI" shape=rect coords=A,B,C,D >
    <AREA href="LIENS ICI" shape=rect coords=A,B,C,D >
    <AREA href="LIENS ICI" shape=rect coords=A,B,C,D >
    ....
    </MAP>



  • LIEN ICI : C'est le lien vers lequel tu veux que renvoit le texte de ta PA.

  • A,b,c,d sont les coordonnées de tes textes. >Vous les trouverez quand vous ouvrirez votre image sur photofiltre, en bas. Vous "encadrez" en sélection le texte qui doit renvoyer vers un lien et vous notez les coordonnées que donne le logitiel, à la base de ABCD dans le code brut, en laissant les virgule entre chaque coordonée. Voir mon image

    ==> ici, le code donnera donc, pour le champ "section partenariat" que j'ai sélectionné :
    Code:
    [...]
    <AREA href="LIENS ICI QUI MENE VERS LA SECTION PARTENARIAT" shape=rect coords=0,80,171,101 >
    [...]



    Code:
    <AREA href="LIENS ICI" shape=rect coords=A,B,C,D >
    Ce code est à renouveller autant de fois que necessaire. Si vous avez besoin de mettre dix liens sur une image, vous le copiez-collez dix fois en modifiant les champs Wink

    N'oubliez pas de bien fermer ta map ! Faute de quoi, les codes ne fonctionneront pas. S'il y as un problème dans votre code, n'hésitez pas à poster à la suite, et je vous aiderais à réparer l'erreur / montrerais où se trouve l'erreur ^^ Cela parrait plus compliqué que ça ne l'est. C'est un peu "long", mais une fois que l'on mets son nez dedant et qu'on l'utilise plusieurs fois, ça va vite Smile Bon courage !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://couleurs-en-folies.forumsactifs.net
 
PA Clicable sur Bazzart
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Couleurs En Folie :: Codage :: Astuce &' Aide :: Codes-
Sauter vers: