Permalänk

Image map på fullskärms bild?

Hej!
Jag vet hur jag med jquery kan kombinera mouseover och image map, och jag vet hur jag med css eller jquery kan göra fullskärms bilder, men jag kan inte kombinera dessa två.

Jag måste på något sätt konvertera attribut img bilden till fullskärm, alla sätt som jag har hittat behandlar bilden seperat och gör den till fullskärm.

Är det möjligt att göra detta eller vet ni om de skulle gå i flash? (vill helst inte göra det i flash)

Tack i förhand!

Permalänk
Medlem
Permalänk
Skrivet av Ernesto:

Jo, men när jag fick den tråden besvarad uppstog nya problem, så hoppades jag på att de var större chans att få problemet löst om jag gjorde en ny rubrik till det specifika nya problemet.

Permalänk
Medlem
Visa signatur

as far as we can tell, the massacre went well...

Permalänk

Det såg väldigt komplicerat ut men ska försöka. Dock vill jag testa ett annat sätt. Genom att göra fotot lika stort som t ex en retina display på macbook pro, och sedan centrera fotot i hemsidan. Där man anpassar så att innehållet får plats på en lägre upplösning, dvs på högre upplösning kommer det att vara delar av fotot som inte har något innehåll.

Dock problement med detta är att jag inte har hittat något sätt att centrera ett foto så att dess anchor point är liksom i mitten. Så att när man laddar hemsidan hamnar man i mitten av fotot. Vet någon hur man gör detta?

Permalänk
Medlem

Ja, sätt negativ marin till hälften av bredd och höjd.

Skickades från m.sweclockers.com

Permalänk
Skrivet av Ernesto:

Ja, sätt negativ marin till hälften av bredd och höjd.

Skickades från m.sweclockers.com

Vad är marin? eller menar du margin

Permalänk
Medlem

Jo jag menade margin.

Permalänk
Skrivet av Ernesto:

Jo jag menade margin.

Jag lyckas inte få det att funegra, skulle du kunna skriva hur det ska se ut för en bild.

Dessutom vet du om man kan genom css bestämma image source. T ex: genom att använda detta http://www.maxdesign.com.au/articles/resolution/
så är det olika bilder och image map beroende på upplösning på skärmen. Detta skulle vara ett enkelt och smidigt sätt

Permalänk
Medlem

image.klass {
position:relative;
left: 50%;
top: 50%;
margin-left: -150px; /* bilden är 300 bred */
margin-top: -100px; /* bilden är 200 hög */

}

Permalänk
Skrivet av Ernesto:

image.klass {
position:relative;
left: 50%;
top: 50%;
margin-left: -150px; /* bilden är 300 bred */
margin-top: -100px; /* bilden är 200 hög */

}

Tackså mycket, det fungerade dock nästan :P. Grejen är att det är ett ganska så stort foto, allstå 5000x2500, dvs fotot kommer att täcka hela skrämen.

Istället för att placera vyn ifrån mitten scalar detta endast av bilden så att mitten visas. Det jag vill är att man som tittare placeras i mitten av fotot, dvs så att scrollen är i mitten. Nu hamnar scrollen åt vänster sida.

Otroligt tacksam för att du hjälper mig

Permalänk
Medlem

<style type="text/css">
#body-image-background
{
background-image:url('bildTest.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
width:100%;
height:100%;
zoom:1;
}
</style>

<div id="body-image-background">

</div>

Permalänk
Skrivet av Ernesto:

<style type="text/css">
#body-image-background
{
background-image:url('bildTest.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
width:100%;
height:100%;
zoom:1;
}
</style>

<div id="body-image-background">

</div>

Problemet med background är att det inte går att göra image map på dem, vet du hur man kan göra detta på en vanlig image