Come creare una mappa immagine con Maschek, on line e free, tutorial

lunedì, novembre 25, 2013

Maschek, on line e free, tutorial

Flò mi chiede come è possibile sistemare i pulsanti sociali più vicini l'uno all'altro.
La soluzione per disporli in assoluta libertà e con ognuno il proprio collegamento alla pagina web relativa consiste nel creare una mappa immagine, e di questo argomento avevo parlato →QUA.
Capisco comunque che non tutti dispongono di Dreamweaver, ed allora mi sono messa alla ricerca di un tool, un generatore di mappa immagine e l'ho trovato. è semplicissimo e gratuito, quindi per tutti gli interessati: seguitemi!


  • Preparare l'immagine con le icone sociali, dovrà essere una sola immagine e non un'immagine per ogni icona, quindi per esempio un'immagine tipo questa io ho addirittura leggermente messo l'una sopra l'altra le icone sociali
  • Maschek, on line e free, tutorial
  • una volta preparata (consiglio lo sfondo trasparente) salvarla sul computer e appoggiarla ad un sito di hosting
  • Entrare in http://www.maschek.hu/imagemap/imgmap
  • cliccare Scegli file
  • cercare l'immagine sul nostro computer e quindi semplicemente cliccarla per aprila in maschek
  • cliccare upload
  • cliccare il pulsantino verde accanto

Maschek, on line e free, tutorial


  • l'immagine comparirà sotto
  • cliccare per scegliere la forma più adatta (in questo esempio sarà circolare)

Maschek, on line e free, tutorial
  • Cliccare il segno più (quello con lo sfondo verde per intenderci) tante volte quante sono le icone (e quindi i collegamenti) tenendo presente che si parte con lo zero, quindi se lavoriamo su tre immagini, queste saranno il n° 0, 1 e 2.
  • Posizionarsi con il cursore sopra la prima icona (vedrete che il cursore cambia forma) e trascinandolo selezionatela, vedrete comparire un perimetro in base alla forma da voi selezionata
  • incollare il link della pagina
  • inserire una breve descrizione
  • scegliere dove volete che si apra la nuova pagina (in questo caso il social network)

Maschek, on line e free, tutorial

  • In fondo alla pagina vedrete il codice della mappa

Maschek, on line e free, tutorial
  • Non potete utilizzare questo codice così, occorre l'immagine, io uso questo codice (dove dovrete sostituire l'URL IMMAGINE con l'indirizzo della vostra immagine, e dovrete sostituire le dimensioni con le dimensioni della vostra immagine)


Codice per l'immagine by Grafic Scribbles

<img src="URL DELL'IMMAGINE" width="165" height="68" border="0" usemap="#Map" />
<map name="Map" id="Map">


  • Si tratta quindi di unire i due codici e il codice finale sarà quindi questo:


Codice completo per mappa immagine by Grafic Scribbles

<img src="
URL DELL'IMMAGINE" width="165" height="68" border="0" usemap="#Map" />

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

<map id="imgmap20131125163848" name="imgmap20131125163848"><area shape="circle" alt="twitter" title="" coords="30,35,22" href="https://twitter.com/" target="_blank" /><area shape="circle" alt="facebook" title="" coords="83,35,23" href="https://www.facebook.com/" target="_blank" /><area shape="circle" alt="pinterest" title="" coords="133,33,22" href="http://www.pinterest.com/" target="_blank" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map></map>


  • adesso che il codice della mappa immagine è completo non rimane che inserirlo in un box htlm/javascrip, ed avrete un risultato simile a quello sotto (provate a cliccare le icone)




Cara Flo,
 spero di essere stata chiara e d'aiuto, potrai disporre le immagini come vuoi, cerchio, fila, piramide....insomma come ti pare.
Per qualsiasi domanda scrivimi










→Potrebbe esserti d'aiuto leggere:
  • Tutorial all'uso dei servizi-hosting


twitterfacebookpinterest

You Might Also Like

6 scarabocchi

  1. Ciao carissima, mi ha fatto tanto piacere vederti in fiera! è stato un attimo ma sono le cose che prediligo quando partecipo a questi eventi. Baci

    RispondiElimina
    Risposte
    1. Ciao Elena,
      ha fatto molto piacere anche a me e sì...
      è stato un attimo...mannaggia....
      solo che c'era mio marito che mi aspettava....
      :)
      ma che belli i Mostracci dal vivo!
      ahahahhhahha!
      un abbarccione e...ma sei Toscana?

      Elimina
  2. Ciao Lu lu bellissimo il tuo blog, raffinato, intrigante e originale, mi piace proprio molto.
    Da un po' sto pensando di farmi confezionare un template tutto e solo per me :-) ma non avevo ancora visto qualcosa che mi "fulminasse" eheheh ecco forse oggi è arrivato quel momento.
    Appena ho un attimo di calma ti scrivo per capire un po' il tuo onorario e per dirti cosa avrei in mente, per ora ti saluto e ti auguro una bella serata
    batù

    RispondiElimina
    Risposte
    1. Grazie Batù!
      :)
      buonissima serata anche a te!
      :)

      Elimina
  3. Ciao Lu, buon pomeriggio! Devo farti i complimenti perchè hai un sito favoloso che ho sempre apprezzato tanto..bravissima! Anche io per un po' mi sono occupata di grafica web ma ora sto dedicando spazio alla mia passione per la poesia e i piccoli testi ...ispirati da una nota serie animata,anche se, a richiesta, esaudisco richieste grafiche (tipo template per blogger/ wordpress.. ) :)) Bando alle ciance, ti invito nel mio sito,se ti va, ti aspetto e ti rinnovo i complimenti ♥ bacioni!! ps: scambio link??

    RispondiElimina
    Risposte
    1. Salve Usagi,
      molto bello anche il tuo blog...veramente, e grazie per la visita!

      Elimina

Grazie della visita e del tuo commento...♥♥♥
è un piacere leggervi!
Sorrisone!
:)

Nota. Solo i membri di questo blog possono postare un commento.

Circa Grafic Scribbles








modificare foto

Paperblog : le migliori informazioni in diretta dai blog

Mr.Webmaster


Motori ricerca

SEO


BlogItalia.it - La directory italiana dei blog

siti
sito internetBlog d'argento



Ebuzzing - Top dei blog - Blog creativi


Visite

eXTReMe Tracker

Views

© 2011 - 2016 Grafic Scribbles, AllRightsReserved.. Powered by Blogger.

on line