[Lauréa & Bequiem] Poops [Niveau 1]

Messages : 388 Date d'inscription : 22/07/2011

Coucou Poops ! Désolé pour les fautes de ton prénom, c'est tellement original xD
Je me présente Lauréa. j'ai 10 ans, je suis assez petite, mais maline et mature. Je connais un peu le codage pas plus. Mais Bequiem connais mieux que toi donc pourrais plus t'aider ^^
Tu veux commencer par quoi ?

Messages : 69 Date d'inscription : 04/09/2011

Merci d'avoir ouvert !

Alors, moi je m'appelle Cynthia ^^, mais sur les autres sites généralement, on me connait sous le pseudo de Pooop-s. J'ai 14 ans, je vais prendre 15 ans a la fin de l'année . Moi dans la vie j'aime .. Lady Gaga, le théâtre, le hip-hop, le piano.

Ben, je sais pas trop .. Je sais pas si c'est possible, mais j'aimerais apprendre a coder une PA ^^ Parce qu'a chaque fois mes co-admine le font, & ça les soul un peu x)
Si c'est pas possible, faire par exemple une fiche de présentation avec des codes ^^

Messages : 2289 Date d'inscription : 08/06/2011 Age : 27

Coucou !
Moi c'est Becky, 12 ans (oui oui, tu es avec des jeunes) et collégien, je vais passer en 4ème !
Je suis donc là pour t'aider avec l'aide de notre chère Laurie !
Sinon pas de problèmes pour la PA, on commence ?
Bisous,

Messages : 388 Date d'inscription : 22/07/2011

Jolie prézz vous deux ^^
[Bequiem = Chat please]
Alors alors, ok, on va commencer par la p-a, aurais-tu un schéma ou un screen de ce que tu veux faire en particulier ? ^^

Messages : 69 Date d'inscription : 04/09/2011

Eh bien, sur mon forum, il y a une PA, & puis, quand on passe la souris sur mon avatar ou ceux du staff, ça mène au lien, j'aimerais faire pareil moi-même xD
www.graph-perle.com

Messages : 388 Date d'inscription : 22/07/2011

Ahah ! Alors ça c'est un code, je te le donne par mp' ^^ il n'y a rien à apprendre, c'est très simple xD
Faut juste que tu aies photofiltre par contre ^^

Messages : 388 Date d'inscription : 22/07/2011

M*rde le tutoriel que j'ai est sous copyright \\^^// Po le droit, donc Bequiem va t'expliquer ^^

Messages : 2289 Date d'inscription : 08/06/2011 Age : 27

Coucou !
Je t'ai trouvé un tutoriels, qui je trouve très complet ^^'
Spoiler:
COMMENT FAIRE UNE IMAGE RÉACTIVE ~
SOURCE

Dans ce tutoriel, je vais vous expliquer comment insérer des liens sur une image, autrement dit faire une image map; par exemple comme l'image d'accueil du forum. Il y a déjà un tutoriel sur le forum, mais celui-ci est une méthode alternative que je trouve très pratique et légèrement moins compliquée.

1. Réalisation de l'image
Pour commencer, il faut créer une image où vous mettrez des liens. Celle-ci peut être faite à l'aide de photofiltre, photoshop ou un autre logiciel, soit celui que vous utilisez. J'ai vite fait un exemple d'image d'accueil :

Attention: vous devez enregistrer l'image au format BMP pour pouvoir utiliser le logiciel suivant.

2. Un logiciel très utile
Ensuite, je vous conseille de télécharger Imapic2 ici, car ce logiciel vous rendra la tâche beaucoup plus simple. Il vous permettra de sélectionner les parties de votre image où vous voulez insérer un lien.

3. Installation de Imapic2
Après avoir téléchargé le logiciel, il vous suffit de le décompresser (faire Clic droit > Extraire) et de double-cliquer sur l'icône Imapic2.exe.

4. Utilisation de Imapic2
Imapic vous demandera tout de suite de choisir une image, alors vous sélectionnez celle que vous avez faite. Si vous ne l'avez pas enregistrée en BMP, elle ne s'affichera pas dans vos fichiers.

Lorsque votre image est ouverte, il ne reste plus qu'à sélectionner les parties de l'image sur lesquelles vous voulez mettre un lien. Pour ce faire, vous n'avez pas à choisir un outil, simplement laisser enfoncé le clic gauche de la souris au bon endroit, sélectionner, puis relâcher.

Il apparaît alors une sélection jaune:

Attention, vous ne pouvez pas déplacer la sélection, vous pouvez seulement recommencer en faisant Clic droit sur la sélection > Delete Shape.

5. Mettre un lien sur la sélection
Une fois la partie sélectionnée, vous pouvez déjà y insérer un lien en faisant Clic droit sur la sélection > Edit Properties...

Ensuite, vous écrivez le lien auquel le texte réfère:

et vous faites OK.
Faites de même pour les autres liens.

6. Utilisation de la map générée
Lorsque vous avez mis un lien sur chaque sélection, il vous faut générer le code html que vous mettrez par la suite sur votre forum.

Pour ce faire, cliquez sur ce bouton:

Ensuite il vous apparaît ceci:

Vous devez copier tout le contenu du rectangle du haut.

7. Mettre la map sur votre forum
Après avoir copié le code, allez sur votre forum. Sur votre panneau d'administration, faites Affichage > Page d'accueil > Généralités. Assurez-vous que l'éditeur html est désactivé (donc que vous voyez ce bouton: . Sinon, cliquez sur ), puis collez le code dans le message de la page d'accueil.
Vous avez alors quelque chose comme ça :

Code:

<a href=""><img src="tutoimage1.bmp" alt="tutoimage1.bmp" usemap="#tutoimage1.bmp" style="border: 0;" /></a>

<map name="tutoimage1.bmp">
<area shape="rect" coords="258,94,322,107" href="http://transcend.1fr1.net/o-o-ouo-ryglement-f1" target="" alt="" />
<area shape="rect" coords="250,113,329,127" href="http://transcend.1fr1.net/o-o-ouo-dyvoilement-f3" target="" alt="" />
<area shape="rect" coords="262,132,317,145" href="http://transcend.1fr1.net/expositions-c2" target="" alt="" />
<area shape="rect" coords="262,151,317,163" href="http://transcend.1fr1.net/o-o-ouo-tutoriels-f12" target="" alt="" />
<area shape="rect" coords="269,169,309,182" href="http://transcend.1fr1.net/o-o-ouo-causerie-f39" target="" alt="" />
<area shape="rect" coords="255,187,325,200" href="http://transcend.1fr1.net/o-o-ouo-partenariat-f6" target="" alt="" />

</map>

La balise target="" fait en sorte que le lien s'ouvre dans la même page. Si vous voulez qu'il s'ouvre dans une nouvelle page ou un nouvel onglet, vous pouvez mettre target="blank"
Personnellement, je ne garde pas les balises target="" et alt="".
Il faut également enlever les balises

Code:

<a href="">
</a>

8. Dernière étape!
Vous avez presque terminé !
Après avoir enlevé les balises que vous ne voulez pas, vous avez ça :

Code:

<img src="URL DE L'IMAGE" alt="tutoimage1.bmp" usemap="#tutoimage1.bmp" style="border: 0;" />

<map name="tutoimage1.bmp">
<area shape="rect" coords="258,94,322,107" href="http://transcend.1fr1.net/o-o-ouo-ryglement-f1" />
<area shape="rect" coords="250,113,329,127" href="http://transcend.1fr1.net/o-o-ouo-dyvoilement-f3"/>
<area shape="rect" coords="262,132,317,145" href="http://transcend.1fr1.net/expositions-c2" />
<area shape="rect" coords="262,151,317,163" href="http://transcend.1fr1.net/o-o-ouo-tutoriels-f12" />
<area shape="rect" coords="269,169,309,182" href="http://transcend.1fr1.net/o-o-ouo-causerie-f39" />
<area shape="rect" coords="255,187,325,200" href="http://transcend.1fr1.net/o-o-ouo-partenariat-f6" />

</map>

Pour que la map fonctionne, vous devez héberger l'image de base sur un site hébergeur d'images, comme ImageShack ou HostingPics, et coller le lien direct obtenu à la place de "URL DE L'IMAGE".
Maintenant, votre image fonctionne! Voilà ce que ça donne:
J'espère que tu comprendra, si tu as des problèmes nous sommes là ^^'

Messages : 388 Date d'inscription : 22/07/2011

^^ Je le connaissais mais le je trouvais plus xD
Bon as-tu des questions sur le cours etc... Car la on va démarrer étape par étape ^^

Messages : 69 Date d'inscription : 04/09/2011

J'ai déjà vu, mais malheuresement, comme c'est un ordi du 20ème siècle que j'ai, ça veut pas télécharger imapic :/

Messages : 388 Date d'inscription : 22/07/2011

Je l'ai lue, mais moi j'ai pas eu besoin de imagepic xD
Bon je vais te faire mon tuto: Il te faut juste photofiltre, tu l'as ?

Messages : 69 Date d'inscription : 04/09/2011

Oui je l'ai ! :)

Messages : 388 Date d'inscription : 22/07/2011

Super :D
Alors ouvre ta p-a sur photofiltre ^^
Et encadre les parties que tu veux transformée en lien, tout sa avec la flèche.

Ensuite voici un code ^^

Code:: <img src="[color=red]ADRESSE DE L'IMAGE A CODER[/color]" alt="1003" usemap="1003" style="border: 0;" />

<map name="1003">
<area shape="rect" coords="[color=red]40,324,208,337[/color]" href="[color=red]ADRESSE DU LIEN[/color]" />

Alors voila tu dois remplir ce qui est en rouge ^^

Donc tu demandes ce que c'est les numéros en rouge. Et bien ça va être ce qui est entouré en rouge :

http://bildberg.eu/zO7YraRg.png

Donc tu vas les remplacers par tes numéros que toi tu voies en bas de ton photofiltre ^^ Puis tu ajoutes l'adresse du lien que tu veux ^^

S'il y'a d'autres liens à coder tu rajoutes sa :

Code:: <area shape="rect" coords="[color=red]40,324,208,337[/color]" href="[color=red]ADRESSE DU LIEN[/color]" />

Enlève les codes couleurs hein :P

Bisous!

Messages : 69 Date d'inscription : 04/09/2011

Ok, j'essaye ! :)
Merci ^^

Messages : 388 Date d'inscription : 22/07/2011

De rien, bon on va commencer les divs ^^ Tu es d'accord ?
Bequiem et moi t'allons aider à faire des messages un peu personnalisés et tout ^^ Bequiem, la j'aurais un peu besoin de toi, car je vais m'absenter du coup..

Messages : 2289 Date d'inscription : 08/06/2011 Age : 27

Pas de soucies, attendons qu'il est fini sa PA, et on pourra faire les divs.

Messages : 69 Date d'inscription : 04/09/2011

Ok ^^

Sinon, pour la PA, Ca marche pas ..

Code:: <img src="<img src="http://nimga.fr/m/G3c2t.png" border="0" alt="" />" alt="1003" usemap="1003" style="border: 0;" />

<map name="1003">
<area shape="rect" coords="385,248,445,330" href="http://www.graph-perle.com/u1" />

Messages : 388 Date d'inscription : 22/07/2011

Pourrais-je avoir le lien ou tu as mis la p-a please :)

Messages : 69 Date d'inscription : 04/09/2011

http://pooop-s.forumgratuit.org/

Messages : 388 Date d'inscription : 22/07/2011

Je ne peux pas voir, ils m'obligent à me connecter ^^

Messages : 69 Date d'inscription : 04/09/2011

Co toi sur ce compte :
Pseudo : Test
MDP : Test111

Messages : 388 Date d'inscription : 22/07/2011

ça ne marche pas.

Messages : 69 Date d'inscription : 04/09/2011

Pas "Test111" mais "test111" oui oui, ça fait une différence, j'ai testé x)

Messages : 388 Date d'inscription : 22/07/2011

Bah t'a rien mis !
Bon je dois y'aller! A ce soir

Messages : 69 Date d'inscription : 04/09/2011

Si si, j'ai mis quelque chose, mais il se voit pas ^^

» [Lauréa & Bequiem] Cours de Oohle [Niveau 2]
» Lauréa. is here :D
» Lauréa. graphiste et prof' 8D
» Codage de profil pour Lauréa. [Annulé]

[Lauréa & Bequiem] Poops [Niveau 1]

[Lauréa & Bequiem] Poops [Niveau 1]

Sujets similaires

Sujets similaires