Comment Insérer des liens dans une image?

Insérer des liens dans une image est un vieux truc de codeur html. Comme je n’y connais rien en code, car ce n’est pas mon métier, je préfère externaliser le code avec des services en ligne. Exemple :  ce service que j’ai testé il y a bien longtemps : html-map.com et que je viens de le réutiliser pour mon dernier billet sur le pdf.

Ce service est on ne peut plus simple d’utilisation.  Il  permet d’insérer des liens dans une image et tout ça sans bien connaître du tout en code html.  A titre d’exemple voilà l’image suivante qui  possède 4 liens. Il suffit de cliquer sur les icones et bien sûr sur le gros roget.biz inscrit sur ma tablette. Pratique non?

thierry roget et roget.biz

Sympa non?

Mode d’emploi

  • Envoyer une image sur votre blog et récupérez l’url. Vous pouvez également héberger votre photo sur des sites comme dropbox, tumblr ou blogger…
  • Rendez-vous sur le site :  html-map.com et coller le lien url de la photo (1) et appuyez sur start (2).
  • Sélectionner une zone de l’image (3)
  • Entrer l’url qui correspond à la zone sélectionnée (4) : dans mon exemple j’ai mis en lien vers twitter.
  • Entrer optionnellement une balise Alt (5) : quand la souris va passer sur le lien on aura une petite info qui va apparaître.
  • Informer si le lien doit s’ouvrir une nouvelle fenêtre ou rester dans la même fenêtre (same window, new window) (6).
  • Répéter les opérations sur d’autres zone (3) (4), (5) (6), pour autant de liens que vous voulez mettre dans l’image.
  • Et récupérer le code. « click here to finish ».
  • Récupérer le code (7) : « html map code » et colle le à l’endroit qui va bien dans votre blogue. (sélectionner le mode html).
  • Si vous êtes puriste: ajouter le code CSS Map dans votre fueille CSS, mais ce n’est pas obligatoire.

Voilà c’est fini. Je trouve cet outil plutôt pratique. De plus, tout est hébergé sur votre propre blogue, il n’y a pas donc pas à se soucier de voir le code disparaître.

A quoi ça sert? 

Quelques exemples :

  • Créer une carte géographique avec un lien vers les photos du lieu en question.
  • Créer une carte de visite originale numérique avec seulement une photo et les icones comme j’ai fait pour l’exemple.
  • Faire des modes d’emplois avec des aides sur la photo qui renvoi à un texte explicatif…
  • Faire mumuse.
  • Comprendre le code html pour faire la même chose sans l’outil.
A vous de voir l’usage! En tout cas, j’ai gardé ce lien dans mes nombreux favoris.
Vous n’avez pas bien compris? Et bien voici une démonstration en videogif qui explique comment insérer les liens dans l’image. Sachez qu’il faut répéter l’opération (3) et (4)  à chaque cadre, c’est-à-dire, qu’il faut entre un lien url (différent ou pas) pour chaque cadre inséré.
Dans l’exemple qui suit, j’ai mis 3 cadres pointant vers le même lien (roget.biz).

html-map.com

 

HTML Map

Créer votre propre flappy bird

Flappybird disparu depuis peu sur les smartphones continue à être très très  populaire pour les heureux qui ont téléchargé l’application avant qu’elle disparaisse. D’ailleurs si vous avez un téléphone android, il est facile d’installer le jeu, même s’il n’est plus disponible sur googleplay.  En effet, il suffit de vous faire envoyer le fichier .apk pour que vous puissiez installer le jeu.

Maintenant si vous voulez apprendre à programmer vous même un jeu flappybird, vous pouvez le faire sur le site learn.code.org . J’y ai jeté un coup d’oeil est vraiment ce n’est pas compliqué. J’ai pu fabriquer mon jeu sans problème.

Cliquez déjà sur ce lien :  learn.code.org/s/6/level/148.  Dans la première partie de la programmation, on vous propose de lancer une action quand on clique sur l’écran pour commencer le jeu. A titre d’exemple, l’animation qui suit montre a  première phase de la programmation du jeu. When click (quand on clique), lancer un battement d’ailes (flap)….  Une fois qu’on a posé les événements (glissé déposé) on va tester le résultat sur le jeu lui-même. Si on a compris et réussi le test, on passe à la phase suivante.

La programmation se  fait  phase par phase et la deuxième phase consiste à programmer ce que va faire l’oiseau quand il touche le sol (ça finit le jeu : end game).

Phase par phase, vous allez  bien comprendre comment l’outil marche et  vous allez pouvoir créer votre propre flappybird qui n’aura plus rien à voir avec l’original. Toutefois, si vous voulez reproduire exactement le jeu original : libre à vous.

Ainsi vous pourrez modifier, les sons, la forme des obstacles, la forme de l’oiseau (qui pourra devenir un poisson) .  La figure suivante est la version finale du jeu que j’ai « programmée ».  qui se trouve sur http://learn.code.org/sh/14059728

Evidemment, cette programmation est juste la pointe de l’iceberg en terme de code, il s’agit en fait de la partie la plus facile, car derrière tout ça, un code java script sera lancé. et celui là est un peu plus compliqué.

Histoire ne dit pas comment on peut faire pour mettre le jeu qu’on a créé sur le playstore, mais ce n’est pas le but de la manip;

En tout cas, si vous avez des ados qui n’arrêtent pas de jouer à flappy bird, c’est le moment de leur faire passer à un niveau supérieur.

 

 

online-toolz.com boîte à outil pour webmaster ou pas.

Il existe sur le net des tas d’outils plutôt utiles et qui rendent la vie un peu plus facile.  Online-toolz.com en est un qui semble relativement récent et qui offre un tas de petits utilitaires pour geek informatique ou non.

La liste des outils est impressionnante et j’en ai compté 38 au total, la plupart des outils sont plutôt dédié au design web, mais on pourra apprécier la calculatrice scientifique, le convertisseur d’unité, la convertisseur de change….

  1. Notepad
  2. WYSIWYG/HTML Editor
  3. Character Map
  4. Scientific Calculator
  5. Unit Converter
  6. Currency Converter
  7. Random Text Generator
  8. CSS Compressor
  9. Javascript Minifier
  10. Javascript Obfuscator
  11. MD5 Generator
  12. SHA1 Generator
  13. SHA-256 Generator
  14. PHP URL Encoder- Decoder
  15. JS Escape Functions
  16. Text – Base64 Conversion
  17. Text – Hex Conversion
  18. Text – Binary Conversion
  19. Hex – Binary Conversion
  20. Text – HTML Entites Conversion
  21. Unicode Escaping
  22. Unicode – HTML Entites Conversion
  23. String Functions
  24. Character Functions
  25. Date Functions
  26. Text Encryption – Decryption
  27. XPATH Tester
  28. XSLT Transformation
  29. XML Validator
  30. XML Formatter
  31. HTML Validator
  32. HTML Formatter
  33. RegExp Editor
  34. JSON Editor
  35. JSON to XML Conversion
  36. Color Chooser
  37. Password Generator
  38. Web Grep

 

http://online-toolz.com/ à mettre dans vos bookmarks

via feedmyapp.com

Pin It on Pinterest