Link Mappati [RISOLTO]

[benia108]

Ciao, vorrei chiederti dei consigli tecnici per myspace, in particolare mi servirebbe sapere come creare delle immagini mappate, cioè su una pagina html sono capace, ma non so come farlo su un'immagine, cioè posso salvare un'immagine contenente un link o devo per forza farla con flash (che tra l'altro myspace non rende funzionanti i link da .swf) o per altre vie?
Grazie

[ilnissardo]

Ciao!
Ho fatto un po di ricerche in giro, visto che non sono fortissimo su questo argomento.

In pratica le mappe sono di due tipo, client side map e server side map.

La cosa poco simpatica di Myspace e` che a causa di qualche bevanda troppo alcolica che gli sviluppatori avevano bevuto, hanno inserito una protezione che impedisce di usare le client side map. O meglio.. non le fa funzionare con IE.
Quindi sei costretto ad usare una server side map.

Di che cosa si tratta: una map e` una cosa del genere:

Codice:

<MAP name="clientmap">
<AREA shape="RECT" coords="237, 36, 325, 122" href="http://www.ilnissardo.com" alt="Il Nissardo Podcast" title="Il Nissardo Podcast">
<AREA shape="RECT" coords="207, 36, 295, 122" href="http://forum.ilnissardo.com" alt="Au Cafe forum" title="Au Cafe Forum">
</MAP>
<img src="URL_DELL_IMMAGINE" usemap="#clientmap">

Un casino giusto? Giusto. E' uno dei costrutti piu` complessi del html, ma e` molto potente.
Cosa ho fatto con quel codice, ho praticamente definito sull'immagine specificata in URL_DELL_IMMAGINE, due rettangoli di cui ho dato le cordinate di due vertici( alto a dx, basso a sx). Questi rettangoli definiscono una zona "cliccabile". Quando clicchi, ti rimanda al link che e` impostato nel codice.

Il problema con MySpace e` che il carattere # viene filtrato. Quindi il codice una volta salvato diventa:

Codice:

<img src="URL_DELL_IMMAGINE" usemap="clientmap">

Questo non funziona con IE.

Devi quindi ricorrere ad una server side map, che altro non e` che un file contenente la definizione della mappa con una sintassi leggermente diversa, e salvarla su un server che la esponga come CGI-BIN (non ti preoccupare se sto parlando arabo.. ci sono soluzioni di hosting gratuite per queste cose che non richiedono nessuna conoscenza tecnica).
La sintassi cambia da quella di prima:

Codice:

default LINK
rect LINK X1, Y1, X2, Y2
rect LINK2 X3, Y3, X4, Y4

Rispetto a prima c'e` un link in piu`, e` il default link, che in pratica dice quale link seguire quando si clicca fuori dalle aree definite.

Ora lo salvi in un file miamappa.map e lo metti su un server tipo File Lodge. Il servizio di dira` qual'e` l'URL della tua mappa. Segnatelo (lo riusiamo poi come URL_OF_MAPFILE)

Non rimane che mettere il codice nel profilo MySpace, dove la mappa e` semplicemente un immagine con un tipo particolare:

Codice:

<a href="URL_OF_MAPFILE"><img src="URL_OF_IMAGE" ismap></a>

Il processo e` in effetti un po complesso.. sopratutto trovare le buone zone. Ci sono un sacco di tool che ti aiutano a generare la mappa, editor html grafici per esempio, ma anche Adobe Image Ready (se ti serve un tutorial per questo fammi un fischio).
Qualche esempio:
HTML Map Designer Pro oppure Meracl ImageMap Generator entrambi per Windows. Sono sicuro che cercando ne trovi altri.

La cosa complessa e` proprio definire le zone.. ti viene in aiuto anche un estensione di Firefox che si chiama MeasureIt che ti permette di caricare l'immagine su cui vuoi definire la mappa e disegnare col mouse le zone per avere il valore dei vertici.

Spero di essere stato abbastanza chiaro, altrimenti non esitare a chiedere.

Ciao,
Andrea

[yoris00]

ciao! io le faccio direttamente con illustrator quando creo le immagini! mi sembra che si possa fare anche con photoshop ma non ci ho ancora provato!

[ilnissardo]

Ecco proprio yoris aspettavo!
Che ne dici, potrebbe essere una buona alternativa al tuo problema con flash no?!?!

[benia108]

Intanto grazie dell'aiuto, la prima soluzione già la conoscevo, della seconda invece non ho capito quasi nulla, proverò ora con gli editro che mi hai dato o al limite con il software adobe...

Avrei bisogno di un'altra info però, avevo messo un post ma mi è stato tolto in cui vchiedevo se c'era un modo di spostare i commenti o i la frind list o addirittura il player musicale all'interno della propia pagina, proprio spostare pixel per pixel, se poi i commenti e la friend list si muovono insieme non c'è nessun problema, non è il dividerli che mi interessa
Grazie
Benia

[benia108]

HO RISOLTO!!!
Image ready a vita!!! grazie della dritta ragazzi!
Benia

[ilnissardo]

Perfetto! Posso mettere il tag risolto quindi. Yaris00 aspetto una tua conferma per l'altra discussione.

Bernia108, se ti va di descrivere un po in dettaglio come hai fatto arricchiresti il post non di poco :-)

[benia108]

Allora vi spiego come si crea un'immagine mappata, almeno se serve basta guardare qua...
allora si apre l'immagine con image ready. dopodichè si taglia la parte interessata con il taglierino, che è quello strumento che sembra una penna, vi si aprirà una tabella dove dovrete mettere l'url il nome ecc.
intanto create una cartella apposita, fate "salva come" e selezionate "html e immagini", vedrete che salvandolo vi farà automaticamente una cartella con nome "immagini".
nella cartella che avete creato ci sarà un file html e nella cartella immagini i pezzi dell'immagine originale tagliuzzati.
Se aprite il file html con blocco note vi verrà fuori un tag di una tabella, lasciate perdere i metadati ecc prendete solo il tag da <table> a </table>. non vi resta che pubblicare i pezzi di immagini su un sito come imageshack.us e sostituire i link dei file pubblicati con quelli originali.
per esempio:

Da:
<tr>
   <td>
      <img src="immagine.jpeg" width="120" height="26" alt=""></td>

A:
<tr>
   <td>
      <img src="LINK FILE PUBBLICATO" width="120" height="26" alt=""></td>

Tutto il codice con i file pubblicati vi darà il vostro link mappato.
è un casotto, ma spero che questa spiegazione possa esservi utile
Benia

[benia108]

Una cosa però mi servirebbe ancora, qualcuno sa i link per add o per message?

[ilnissardo]

Una cosa però mi servirebbe ancora, qualcuno sa i link per add o per message?

Mi stava quasi sfuggendo questo messaggio. Ti consiglio ogni volta che hai una nuova domanda di aprire un nuovo topic.

Comunque ecco la soluzione:

Vai sulla tua pagina di profilo, e copia il link collegato alla funzione che ti interessa. Per esempio per "Add as friend" il link sara` una cosa del tipo

Codice:

http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=65XXXXXX&MyToken=94XXXXXX-XXXX-XXXX-XXXX-xxxxab3bb9e

Puoi tranquillamente ignorare l'ultima parte. Il link pulito quindi e`:

Codice:

http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=65XXXXXX

Visto che c'ero mi sono scritto il codice per un bottone:

Codice:

<form method="get" action="http://collect.myspace.com/index.cfm">
  <input type="hidden" name="fuseaction" value="invite.addfriend_verify" />
  <input type="hidden" name="friendID" value="XXXXXXXX" />
  <input type="submit" value="Aaggiungimi alla tua lista di Amici!!" />
</form>

Ovviamente la stessa cosa vale per le altre azioni, cambiera` solamente la fuseaction.
Il friendID e` il tuo ID su Myspace.

[benia108]

Grazie

[vademecum]

Ho fatto tutto il procedimento con Fireworks ed ho esportato l'immagine come "HTML ed immagini" dentro una cartella.
In questa cartella da me creata ho un file .html e una sottocartella in cui ci sono le porzioni da me selezionate.
Ho aperto il file .html con wordpad ed ho ottenuto questo tra <table> e </table>:

<table border="0" cellpadding="0" cellspacing="0" width="856">
<!-- fwtable fwsrc="topbannerbest (con trasparenze).png" fwbase="topbannerbest (con trasparenze).gif" fwstyle="Dreamweaver" fwdocid = "600467227" fwnested="0" -->
  <tr>
   <td><img src="immagini/spacer.gif" width="79" height="1" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="119" height="1" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="98" height="1" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="25" height="1" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="95" height="1" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="23" height="1" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="98" height="1" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="24" height="1" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="94" height="1" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="121" height="1" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="80" height="1" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td colspan="11"><img src="immagini/spacer.gif" width="856" height="460" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="1" height="460" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="6"><img src="immagini/spacer.gif" width="79" height="100" border="0" alt="" /></td>
   <td colspan="2"><a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=398970230&MyToken=1e96887c-fde2-444e-a912-6b43b6666ca8"><img name="topbannerbestcontrasparenze_r2_c2" src="immagini/topbannerbest%20(con%20trasparenze)_r2_c2.gif" width="217" height="18" border="0" id="topbannerbestcontrasparenze_r2_c2" alt="" /></a></td>
   <td rowspan="2"><img src="immagini/spacer.gif" width="25" height="33" border="0" alt="" /></td>
   <td colspan="3"><a href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=398970230"><img name="topbannerbestcontrasparenze_r2_c5" src="immagini/topbannerbest%20(con%20trasparenze)_r2_c5.gif" width="216" height="18" border="0" id="topbannerbestcontrasparenze_r2_c5" alt="" /></a></td>
   <td rowspan="2"><img src="immagini/spacer.gif" width="24" height="33" border="0" alt="" /></td>
   <td colspan="2"><a href="http://groups.myspace.com/index.cfm?fuseaction=groups.addtogroup&friendID=398970230"><img name="topbannerbestcontrasparenze_r2_c9" src="immagini/topbannerbest%20(con%20trasparenze)_r2_c9.gif" width="215" height="18" border="0" id="topbannerbestcontrasparenze_r2_c9" alt="" /></a></td>
   <td rowspan="6"><img src="immagini/spacer.gif" width="80" height="100" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="1" height="18" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2"><img src="immagini/spacer.gif" width="217" height="15" border="0" alt="" /></td>
   <td colspan="3"><img src="immagini/spacer.gif" width="216" height="15" border="0" alt="" /></td>
   <td colspan="2"><img src="immagini/spacer.gif" width="215" height="15" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="1" height="15" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2"><img src="immagini/spacer.gif" width="119" height="33" border="0" alt="" /></td>
   <td colspan="3"><a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.forward&friendID=398970230&f=forwardprofile"><img name="topbannerbestcontrasparenze_r4_c3" src="immagini/topbannerbest%20(con%20trasparenze)_r4_c3.gif" width="218" height="18" border="0" id="topbannerbestcontrasparenze_r4_c3" alt="" /></a></td>
   <td rowspan="2"><img src="immagini/spacer.gif" width="23" height="33" border="0" alt="" /></td>
   <td colspan="3"><a href="http://collect.myspace.com/index.cfm?fuseaction=user.addToFavorite&friendID=398970230&public=0"><img name="topbannerbestcontrasparenze_r4_c7" src="immagini/topbannerbest%20(con%20trasparenze)_r4_c7.gif" width="216" height="18" border="0" id="topbannerbestcontrasparenze_r4_c7" alt="" /></a></td>
   <td rowspan="4"><img src="immagini/spacer.gif" width="121" height="67" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="1" height="18" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="3"><img src="immagini/spacer.gif" width="218" height="15" border="0" alt="" /></td>
   <td colspan="3"><img src="immagini/spacer.gif" width="216" height="15" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="1" height="15" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2"><a href="http://home.myspace.com/index.cfm?fuseaction=user&MyToken=bf198fa4-dc7b-48d6-b588-38ae61c5f39d"><img name="topbannerbestcontrasparenze_r6_c2" src="immagini/topbannerbest%20(con%20trasparenze)_r6_c2.gif" width="217" height="21" border="0" id="topbannerbestcontrasparenze_r6_c2" alt="" /></a></td>
   <td rowspan="2"><img src="immagini/spacer.gif" width="25" height="34" border="0" alt="" /></td>
   <td colspan="3"><a href="http://friends.myspace.com/index.cfm?fuseaction=block.blockUser&userID=398970230"><img name="topbannerbestcontrasparenze_r6_c5" src="immagini/topbannerbest%20(con%20trasparenze)_r6_c5.gif" width="216" height="21" border="0" id="topbannerbestcontrasparenze_r6_c5" alt="" /></a></td>
   <td rowspan="2" colspan="2"><img src="immagini/spacer.gif" width="118" height="34" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="1" height="21" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2"><img src="immagini/spacer.gif" width="217" height="13" border="0" alt="" /></td>
   <td colspan="3"><img src="immagini/spacer.gif" width="216" height="13" border="0" alt="" /></td>
   <td><img src="immagini/spacer.gif" width="1" height="13" border="0" alt="" /></td>
  </tr>
</table>

Io ho sei pulsanti, di cui solo cinque sono funzionanti (non riesco a prendere, infatti, il collegamento a IM/Chiama).
A pubblicare le porzioni è roba veloce; ma come faccio a capire dove sostituire l'url??
Ci sono troppi <img sr> e non riesco a capire quali di essi corrispondono alle diverse porzioni...

[benia108]

non capisco dove sia il problema, cioè tu hai per esempio <img src"spacer.gif">
una volta pubblicato su imageshack spacerc.gif avrai metti caso www.imageshack.us/spacer.gif
Tu, tutte le volte che trovi spacer.gif all'interno della tabella lo sostituisci con il link dell'imagine pubblicata
Benia

[vademecum]

Se non sbaglio, avevi detto di uppare tutti i pulsanti che rimandano a link.
Una volta ottenuti gli url dei pulsanti uppati, sostituirli all'interno di <table>...</table>.
In sostanza io devo inserire sei urls di sei pulsanti uppati, ma dove??
Ci sono troppi <img src="spacer.gif"> e non riesco a capire.

[vademecum]

Cioè, non riesco a capire cosa devo associare a questo <img src="spacer.gif">.
Sempre la stessa immagine (quella generale, per intenderci)??
Oppure le porzioni una per una??