Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Photos

tomtitou

Par tomtitou
dans Programmation

 Partager

Messages recommandés

tomtitou Extrem Member

tomtitou

Posté(e)
Posté(e)

Bonjour,

 

Voilà mon souci, j'ai récupéré des photos d'école ( groupe)et je souhaiterai faire ceci: en cliquant sur un personnage de la photo, j'aimerai voir apparaître son nom et prénom, mais je ne sais pas comment faire. Est-ce qu'il existe un logiciel prévu pour ce genre de manip , sinon comment dois-je opérer. Merci

J'ai envoyé ce message sur le forum Harware de Zebulon et j'ai eu la réponse suivante de leminou membre du forum qui m'a répondu ceci:

 

Je ne connais pas de logiciel qui fasse cela, mais si personne ne te donne d'indication, la chose doit-être possible en programmant en visual basic ou autre,

si clic (souris) est sur x,y (le visage d'untel) afficher nom$

Si tu programme un peu, vas demander les directives à suivre dans la section programmation.

 

Ne sachant pas programmer, est-ce que quelqu'un pourrait m'expliquer, afin de faire cette maniq. Merci

  • Modérateurs
Gof Devil Member !

Gof

Posté(e)
  • Modérateurs
Posté(e)

Bonsoir Tomtitou :P

 

Sous un format HTML (page web) aussi, cela pourrait être possible. Ainsi au survol de la souris sur un personnage apparaîtrait dans une bulle les éléments que tu aurais défini. Je ne sais pas si tu as des notions HTML.

 

Les balises pour cela sont à regarder du côté de MAP.

  • Modérateurs
Gof Devil Member !

Gof

Posté(e)
  • Modérateurs
Posté(e)

Re :P

 

Ca va être compliqué sans notions du tout. Je vais fouiller voir si je ne peux pas trouver quelque chose pour faciliter tout ça, ou une alternative.

  • Modérateurs
Gof Devil Member !

Gof

Posté(e)
  • Modérateurs
Posté(e)

Re :P

 

Alors, je t'ai fait un petit exemple, je ne sais pas si ça va être clair, surtout sans aucune notion (d'autant que je ne suis pas un pro non plus, loin de là ^^).

 

Par exemple, la première rangée en haut sur cette page (je n'ai fait que la première rangée du haut) : http://pagesperso-orange.fr/-Gof/EXP/a.html

 

A chaque fois que tu survoles une "tête" tu as le nom du personnage qui apparaît (Monsieur 1, Monsieur 2, etc jusqu'à Monsieur 8.)

 

Le fichier ici se nomme A et a pour extension HTML (a.html). Le code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<title>Exemple</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

</head>

<body>

<h1>Exemple</h1>

 

<img class="img" src="photo.png" width="1001" height="686" alt="photo groupe" usemap="#Map"/>

<map name="Map" id="Map">

<area shape="rect" coords="10,20,90,80" href="a.html" alt="monsieur 1" />

<area shape="rect" coords="150,20,230,80" href="a.html" alt="monsieur 2" />

<area shape="rect" coords="290,20,370,80" href="a.html" alt="monsieur 3" />

<area shape="rect" coords="400,20,480,80" href="a.html" alt="monsieur 4" />

<area shape="rect" coords="510,20,600,80" href="a.html" alt="monsieur 5" />

<area shape="rect" coords="630,20,720,80" href="a.html" alt="monsieur 6" />

<area shape="rect" coords="760,20,850,80" href="a.html" alt="monsieur 7" />

<area shape="rect" coords="880,20,1000,80" href="a.html" alt="monsieur 8" />

</map>

 

En bleu, ily a de défini le nom de la photo et son extension (ici dans l'exemple "photo.png") et les dimensions de celle-ci.

Après on retrouve des zones définies par des coordonnées. Exemple avec la zone "monsieur 6" (en rouge) :

971fc9d818191c69d10769da46e9ct.jpg

 

J'ai tout mis dans un ZIP :

  • -le fichier a.html
    -le fichier "photo"
    -et le fichier exemple pour les coordonnées (photo1).

=> http://pagesperso-orange.fr/-Gof/EXP/a.zip

 

~~~~

 

C'est du vite fait et pas très élégant, il y a surement possibilité de mieux faire, mais bon. :P

  • Modérateurs
Gof Devil Member !

Gof

Posté(e)
  • Modérateurs
Posté(e)

Re :P

 

Encore plus simple que précédemment.

 

En s'y mettant à plusieurs, on a trouvé un petit soft gratuit (merci Pitcat :P )

  • =>
Handy ImageMapper 1.01

Crée un document avec le bloc notes (menu démarrer>exécuter et tape : notepad

  • Copie colle les éléments suivants dedans :
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">'>http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"'>http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <title>Exemple</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    </head>
    <body>
     
     
    </body>
    </html>
  • Et sauvegarde sous b.html sur ton bureau.
  • Copie-colle une photo de groupe que tu veux annoter sur le bureau également.
  • Télécharge le et installe le. Puis lance le.
  • Ouvre ta photo avec l'icône ae7ffd9250275d61d06723d7a7492.jpg.
  • Elle va alors apparaître dans le cadre. Tu peux définir des zones circulaires, rectangulaires ou "libres" à ta convenance. La petite flêche permet de sélectionner une zone précédemment crée afin de la déplacer ou de la supprimer (avec la petite croix rouge).
  • Quand tu as défini ta zone, remplis le champ "Tooltip" avec les termes que tu veux voir apparaître lorsque tu survoles avecla souris (ici "monsieur 1" sur l'exemple) :
    2357710066b8cae06a4243e673666tt.jpg
  • Quand tu as défini toutes tes zones, clique sur "Place on Clipboard", et ouvre à nouveau le bloc-notes sur le fichier b.html que tu as créé au départ, et colle entre les 2 body.
    Dans l'exemple, ça donnera ceci :
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <title>Exemple</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    </head>
    <body>
    <MAP NAME="map1">
    <AREA SHAPE="CIRCLE" COORDS="48,48,41" HREF="" TITLE="monsieur 1">
    <AREA SHAPE="CIRCLE" COORDS="191,53,39" HREF="" TITLE="monsieur 2">
    <AREA SHAPE="CIRCLE" COORDS="324,48,42" HREF="" TITLE="monsieur 3">
    <AREA SHAPE="CIRCLE" COORDS="445,56,43" HREF="" TITLE="monsieur 4">
    <AREA SHAPE="CIRCLE" COORDS="560,62,42" HREF="" TITLE="monsieur 5">
    <AREA SHAPE="CIRCLE" COORDS="688,57,44" HREF="" TITLE="monsieur 6">
    <AREA SHAPE="CIRCLE" COORDS="818,61,42" HREF="" TITLE="monsieur 7">
    <AREA SHAPE="CIRCLE" COORDS="944,61,41" HREF="" TITLE="monsieur 8">
    </MAP>
    <IMG SRC="C:\Documents and Settings\Admin\Bureau\photo.png" USEMAP="#map1" BORDER="0">
     
    </body>
    </html>
  • Corrige le nom de fichier comportant la photo de sorte de ne conserver que le nom et l'extension, pas tout le chemin complet.
    Exemple :
    de C:\Documents and Settings\Admin\Bureau\photo.png, tu raccourcis à photo.png.
    Tu dois donc te retrouver avec cette ligne :
    <IMG SRC="photo.png" USEMAP="#map1" BORDER="0">
  • Puis sauvegarde ton document.
  • Double-clique sur b.html, ton navigateur internet va ouvrir la page, et tu auras sur chacune des zones que tu as définies les champs "tooltips" au survol de la souris.
  • Si tu veux pouvoir montrer et donner la photo ainsi commentée, il te faudra avoir le document html (ici "b") et la photo tous 2 dans le même répertoire.

:P

tomtitou Extrem Member

tomtitou

Posté(e)
  • Auteur
Posté(e)

Bonjour Gof, :P

 

Je viens de lire ton message; je vais essayer me lancer dans la procédure que tu me communique(je ferai çà dimanche car je serai absent aujourd'hui), je risque de patiner un peu car peu de connaissance, si j'ai des soucis je risque de faire appel à toi. Merci pour ton aide, bonne journée et bon week-end :P

Greywolf Tera Power Extrem Member

Greywolf

Posté(e)
Posté(e)

note: Avec cette méthode, la photo et ses info-bulles ne pourront être visibles que via un navigateur web (IE, Firefox, Opera et consorts)

tomtitou Extrem Member

tomtitou

Posté(e)
  • Auteur
Posté(e)
Et sauvegarde sous b.html sur ton bureau.

Bonjour Gof

 

J'ai un problème quand je crée le document (citation) dans Notepad. Quand je veux l'enregistrer et sauvegarder sur le bureau sous b.html, je n'ai que les types de formats RTF. Texte, Texte MS-DOS ? Texte unicode. Que dois-je faire ? Merci

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...