Online Image Mapping Tool

S

SportyNoob

Medlem
Har problemer med å legge linker til et bilde jeg skal ha på velkomstsiden min på Facebook.

Hva skal jeg gjøre med koden jeg får når jeg kjører bildet gjennom et såkalt "Image Mapping Tool" som man finner på internett?

Koden jeg får er følgende:

<map id="imgmap201222502352" name="imgmap201222502352"><area shape="rect" alt="" title="" coords="328,416,438,516" href="http://www.cometaalesund.no" target="" /><area shape="rect" alt="" title="" coords="74,415,177,520" href="http://blogg.cometaalesund.no" target="" /><!-- Created by Online Image Map Editor (maschek.hu - About) --></map>

Koden jeg har fra photobucket er følgende:

<target="_blank"><img src="http://i1241.photobucket.com/albums/gg508/marcuscgaaseide/FRSTESIDE3-1.jpg" border="0" alt="Photobucket"></a>


Hvordan skal jeg sammenkoble disse to?
 
picxx

picxx

WF 09
benytt en iframe app og iframe filen din inn på siden.
 
S

SportyNoob

Medlem
Jeg bruker "TabPress Hyperarts" og der kan jeg legge til HTML kode. Men skal jeg lime inn disse to kodene ovenfor hverandre eller?
 
picxx

picxx

WF 09
Lag en php fil som du legger på egen server, hvor du måkker inn det du vil ha på siden, maks 520px. bred.
Bruk en iframe og pøs den inn på den iframe tabben du bruker.
 
S

SportyNoob

Medlem
Har prøvd denne jeg og, men har slitt med hvordan jeg skal få limt inn koden i "TabPress Hyperarts" sin iframe app som jeg bruker.

Jeg får følgende HTML kode når jeg har brukt ditt forslag:

<div style="text-align:center; width:520px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_4201202251005428" src="http://i1241.photobucket.com/albums/gg508/marcuscgaaseide/FRSTESIDE3-1.jpg" usemap="#Image-Maps_4201202251005428" border="0" width="520" height="800" alt="" />
<map id="_Image-Maps_4201202251005428" name="Image-Maps_4201202251005428">
<area shape="rect" coords="71,414,179,520" href="http://cometaalesund.no" alt="" title="" />
<area shape="rect" coords="328,412,436,518" href="http://blogg.cometaalesund.no" alt="" title="" />
<area shape="rect" coords="518,798,520,800" href="http://www.image-maps.com/index.php?aff=mapped_users_4201202251005428" alt="Image Map" title="Image Map" />
</map>
<!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV -->
<div style="text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:520px;">
<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://cometaalesund.no" title="Untitled">Untitled</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://blogg.cometaalesund.no" title="Untitled">Untitled</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/index.php?aff=mapped_users_4201202251005428" title="Image Map">Image Map</a>
</div>
<!-- Image map text links - End - -->

</div>


--
Skal jeg bare lime inn dette i "Tabpress Hyperarts" iframe app?
 
adeneo

adeneo

Medlem
Jeg trodde faktisk image maps forsvant ut for en del år siden, men jeg tok tydeligvis feil, for her er de igjen?

For å bruke et map så må du linke det inn med usemap attributten, koden din bør se slik ut:


HTML: 
<img src="http://i1241.photobucket.com/albums/gg508/marcuscgaaseide/FRSTESIDE3-1.jpg" border="0" alt="FB-start" usemap="#comet" />

<map id="comet" name="comet">
    <area shape="rect" alt="Comets nettsider" title="Comets nettsider" coords="328,416,438,516" href="http://www.cometaalesund.no" target="_blank" />
    <area shape="rect" alt="Comets blogg" title="Comets blogg" coords="74,415,177,520" href="http://blogg.cometaalesund.no" target="_blank" />
</map>

Eksempel!

Personlig ville jeg heller lagt noen transparente <a> elementer rett over bildet, men up 2 u.

Enda et eksempel!
 
Sist redigert:
S

SportyNoob

Medlem
Jeg gjorde dette og det fungerte!!!

MEN på denne siden står det at de bare kan lagre bildet (eller koden...?) i to dager. Det vil si at bildet vil forsvinnne om 48 timer. Hvordan skal jeg uploade dette på photobucket uten at linkene blir ødelagt? Har nemlig prøvd men linkene slutter å fungere når jeg gjør det!
 
S

SportyNoob

Medlem
Hva er transparente <a> elementer over siden? Er dette for å skjule litt av teksten med en slags "folie"? Må vel lages i GIMP eller lignende programmer det?
 
adeneo

adeneo

Medlem
usemap er denne usemap="#comet", den må stemme med ID'en til map, som er : <map id="comet" name="comet">

et <a> element er en link, og at den er transparent betyr bare at det ikke er noen bakgrunn, se eksempel 2 ovenfor, men det kommer an på hva du kan legge inn av HTML og hvordan det virker på FB, har ikke gjort akkurat dette så vet i grunn ikke akkurat hva som virker.

Har ikke du egen nettside med webhotell, kan du ikke bare legge bildet ditt der så eksisterer det så lenge du vil ha det der?
 
Sist redigert:
S

SportyNoob

Medlem
Her er koden for det andre bildet mitt (for de som trykker liker):

<div style="text-align:center; width:520px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_4201202251005428" src="http://i1241.photobucket.com/albums/gg508/marcuscgaaseide/FRSTESIDE5-1.jpg" usemap="#Image-Maps_4201202251005428" border="0" width="520" height="800" alt="" />
<map id="_Image-Maps_4201202251005428" name="Image-Maps_4201202251005428">
<area shape="rect" coords="71,414,178,521" href="http://cometaalesund.no" alt="Comets nettside" title="Comets nettside" />
<area shape="rect" coords="329,412,436,519" href="http://www.image-maps.com/" alt="Comets blogg" title="Comets blogg" />
<area shape="rect" coords="518,798,520,800" href="http://www.image-maps.com/index.php?aff=mapped_users_4201202251005428" alt="Image Map" title="Image Map" />
</map>
<!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV -->
<div style="text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:520px;">
<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://cometaalesund.no" title="Comets nettside">Comets nettside</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/" title="Comets blogg">Comets blogg</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/index.php?aff=mapped_users_4201202251005428" title="Image Map">Image Map</a>
</div>
<!-- Image map text links - End - -->

</div>


Jeg gjorde om koden til dette slik som ble gjort av adeneo:
<img src="http://i1241.photobucket.com/albums/gg508/marcuscgaaseide/FRSTESIDE5-1.jpg" border="0" alt="FB-start" usemap="#comet" />

<map id="comet" name="comet">
<area shape="rect" alt="Comets nettsider" title="Comets nettsider" coords="71,414,178,521" href="http://www.cometaalesund.no" target="_blank" />
<area shape="rect" alt="Comets blogg" title="Comets blogg" coords="518,798,520,800" href="http://blogg.cometaalesund.no" target="_blank" />
</map>
 
S

SportyNoob

Medlem
Takk for hjelpen adeneo. Ser ut som det virker!

Har webhotell men synes det er greit å bruke photobucket. Skal sette meg litt mer inn i webhotellet etter hvert. Er litt n00b for å si det m1ldt. ;p 1337
 
Du må logge inn eller registrere deg for å svare her.
Topp