Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Bästa sättet att gör en bild interaktiv

1
Skriv svar
Permalänk
Medlem
●

Bästa sättet att gör en bild interaktiv

Hej!
Jag har inte tidigare jobbat mycket med hemsidor, men har istället mycket goda kunskaper inom design. Det jag nu vill göra är en hemsida till mina kompisars band. Det jag tänkte är att man tar en grupp bild på all bildmedlemmar där man kan t ex klicka på en medlem i bilden för att veta mer om den medlemmen.

Meningen är att man ska kunna klicka på de olika elementen i bilden. T ex om jag vill veta mer om sångaren, vill jag kunna klicka på på honom i bilden.

Vilket är det smidigaste sättet att göra detta? Jag testade lite smått i html (dreamveaver), då gjorde jag en bakgrund bild som alltid är i fullskärm, sedan placerade jag en kopia av en del i bilden och la den över stora bilden på samma ställe så att det inte syndes. Sedan länkade jag den till något. Detta fungerar, dock bara på min skärm. Eftersom bakgrundbilden alltid är i max upplösningen av webbläsaren, dock ändrar ju sig den separata bilden(eftersom uplösningen är konstant).

Hur ska jag göra för att den ska vara på samma ställe oberoende skärm? Eller finns det något att sätt, kanske någon php tjänst som kan göra det bättre?

Otroligt tacksam för svar!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Det finns nån uråldrig html-funktion som ska kunna göra jobbet. För ca 5-8 år sedan så var det väldigt vanligt på internet med sådana bild-länkar som du beskriver, men de verkar ha minskat betydligt i antal den senaste tiden. Så jag måste varna dig att om du använder dig av sådana länkar så kan din sida uppfattas som gammalmodig.

Och med tanke på att funktionen är så uråldrig så har jag föstås glömt vad den hette, så kan inte ge dig nåt tips på vad du ska googla på

EDIT: image map heter det!

Redigera
Citera flera Citera
Permalänk
Medlem
●

En javascript lösning där du har en bildpunkt lagrad per "länk". Dessa bildpunkter kan du sedan när användaren drar i fönstret räkna ut var de ska sitta i förhållande till hur mycket bilden krymper eller växer.
Sedan kan du från denna bildpunkt skapa valfritt stora klickbara "rutor" som då länkar dig vidare. Rutor som de i facebook när man taggar en person.

Visa signatur

"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." - Brian W. Kernighan

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Man använder sig av en "map"

Typ så här jag jag gjort det på hemsidan till vår spelförening:

<map id="timeline_map" name="timeline">
<area shape="rect" coords="10,10,108,45" onmouseout="HideContent('everquest'); return true;" onmouseover="ShowContent('everquest'); return true;" nohref="" alt="everquest" title="everquest">
<area shape="rect" coords="109,10,266,45" onmouseout="HideContent('daoc'); return true;" onmouseover="ShowContent('daoc'); return true;" nohref="" alt="Dark Age of Camelot" title="Dark Age of Camelot">
<area shape="rect" coords="267,10,461,56" onmouseout="HideContent('l2'); return true;" onmouseover="ShowContent('l2'); return true;" nohref="" alt="Lineage II" title="Lineage II">
<area shape="rect" coords="373,71,456,83" onmouseout="HideContent('blood'); return true;" onmouseover="ShowContent('blood'); return true;" nohref="" alt="Bloodhoof" title="Bloodhoof">
<area shape="rect" coords="558,14,610,28" onmouseout="HideContent('aion'); return true;" onmouseover="ShowContent('aion'); return true;" nohref="" alt="Aion" title="Aion">
<area shape="rect" coords="504,28,567,41" onmouseout="HideContent('war'); return true;" onmouseover="ShowContent('war'); return true;" nohref="" alt="Warhammer" title="Warhammer">
<area shape="rect" coords="473,44,700,54" onmouseout="HideContent('nord'); return true;" onmouseover="ShowContent('nord'); return true;" nohref="" alt="Nordrassil" title="Nordrassil">
<area shape="rect" coords="294,57,690,69" onmouseout="HideContent('storm'); return true;" onmouseover="ShowContent('storm'); return true;" nohref="" alt="Stormreaver" title="Stormreaver">
<area shape="rect" coords="662,74,701,83" onmouseout="HideContent('rift'); return true;" onmouseover="ShowContent('rift'); return true;" nohref="" alt="Rift" title="Rift">
</map>
Redigera
Citera flera Citera
Permalänk
Medlem
●

Men om jag nu skulle använda Image Map, hur ska jag gå till väg för att den delen av fotot som går att klicka på blir markerat på något sätt (en färg, eller liknande) när man håller musen över den?

Förresten, är det möjligt att skapa en box i html (dreamveaver) som alltid är fullskärm. Eftersom då skulle man kunna göra allting väldigt simpelt och endast använda bilder. Det känns om att det borde vara möjligt. Denna box skulle då anpassa allt till upplösningen av läsarens datorskärm.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av tobi.paul-2013:

Men om jag nu skulle använda Image Map, hur ska jag gå till väg för att den delen av fotot som går att klicka på blir markerat på något sätt (en färg, eller liknande) när man håller musen över den?

Förresten, är det möjligt att skapa en box i html (dreamveaver) som alltid är fullskärm. Eftersom då skulle man kunna göra allting väldigt simpelt och endast använda bilder. Det känns om att det borde vara möjligt. Denna box skulle då anpassa allt till upplösningen av läsarens datorskärm.

Gå till inlägget

Det finns ingen sådan funktion i HTML i sig. Du måste trolla lite med javascript som hela tiden ändrar om storlekar i din HTML.
Jag kan dela med mig av ett bokmärke: http://srobbin.com/jquery-plugins/backstretch/
Det är en jQuery-funktion som skalar om en bild för att anpassa till din skärmstorlek.

Visa signatur

"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." - Brian W. Kernighan

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av ePoint:

Det finns ingen sådan funktion i HTML i sig. Du måste trolla lite med javascript som hela tiden ändrar om storlekar i din HTML.
Jag kan dela med mig av ett bokmärke: http://srobbin.com/jquery-plugins/backstretch/
Det är en jQuery-funktion som skalar om en bild för att anpassa till din skärmstorlek.

Gå till inlägget

Tack så mycket! Exakt det jag sökte. Hoppas bara att den fungerar bra ihop med image map.

Här är en guide som jag hittade för att kombinera mouseover med imagemap. Antar att man måste använda jQuery funktionen på alla mouseover gif fotona också för att allt ska fungera.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av ePoint:

Det finns ingen sådan funktion i HTML i sig. Du måste trolla lite med javascript som hela tiden ändrar om storlekar i din HTML.
Jag kan dela med mig av ett bokmärke: http://srobbin.com/jquery-plugins/backstretch/
Det är en jQuery-funktion som skalar om en bild för att anpassa till din skärmstorlek.

Gå till inlägget

Jag har nu testat backstretch. Den har samma begränsning som css fullscreen cover background, det går inte inte att lägga till image map eller andra saker.

Fotot är liksom inte en img attribute, ut en del av pluginen eller css. Det är om det skulle finnas något som förändrar img attributen

Om du/ni har något tips skulle det vara väldigt uppskattat

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av tobi.paul-2013:

Jag har nu testat backstretch. Den har samma begränsning som css fullscreen cover background, det går inte inte att lägga till image map eller andra saker.

Fotot är liksom inte en img attribute, ut en del av pluginen eller css. Det är om det skulle finnas något som förändrar img attributen

Om du/ni har något tips skulle det vara väldigt uppskattat

Gå till inlägget

Synd att det inte gick att anpassa. Hade jag varit du hade jag skrivit en function som fungerar i stil med backstretch och sedan anpassat denna funktion för att även skala om den länkade områden du vill ha.
Absolut bäst är nog att undvika imagemap helt och köra på en html5 - Canvas - lösning. Det kommer se absolut bäst ut och det är snabbare för användaren. Enda nackdelen är väl att folk med dåliga(gamla) webbläsare inte kan se sidan som de ska. Men då får man göra någon specialare för dessa.

Visa signatur

"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." - Brian W. Kernighan

Redigera
Citera flera Citera
1
Skriv svar