CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

hoplaringen Nybegynder

21. februar 2012 - 15:55 Der er 4 kommentarer og
1 løsning

Body background med link hotspots

Hej Eksperter.

Håber I kan hjælpe.
Jeg har et stort baggrundsbillede som hentes via:
body{
background-image:url(images/baggrund.jpg);
background-repeat:no-repeat;
background-position:top center;
background-attachment:fixed;
}
Det ligger helt fast og alt hvad der ligger over det scroller selvstændig.

I grafikken på baggrundsbilledet er der to knapper, som jeg meget gerne vil have til at linke.
Jeg kan ikke sætte dem ind som billeder for så scroller de med det andet indhold.

Kan jeg på en eller anden måde indsætte links i det baggrundsbillede?

På forhånd tak.

Mvh
Peder

Synes godt om

MartinLohse-ElDesign Nybegynder

21. februar 2012 - 16:09 #1

Hej Peder,

Jeg ville bruge ccs, noget i den stil som beskrevet her.

http://bluedogwebservices.com/css-trick-turning-a-background-image-into-a-clickable-link/

håber det hjælper lidt på vej.

mvh.
Martin

Synes godt om

olsensweb.dk Ekspert

21. februar 2012 - 16:11 #2

kunne imagemap være en mulighed ??
et eks http://www.htmlcodetutorial.com/images/images_famsupp_220.html

Synes godt om

olsensweb.dk Ekspert

21. februar 2012 - 16:35 #3

nogle flere link

læs denne tråd dk.edb.internet.webdesign.html
Lave et billede valgbar på forskellige positioner Crazy 11 Jul. 2011, 17:25

http://www.w3.org/TR/html401/struct/objects.html#edef-AREA

tool
http://www.image-maps.com/
http://www.carlosag.net/Tools/XMap/

Synes godt om

madslundholm Novice

21. februar 2012 - 16:45 #4

Jeg vil gøre det sådan her:

<html>
<head>
<title>Sidens Titel</title>
<style type="text/css">
body {
background-image: url('bagggrund.jpg');
background-repeat: no-repeat
background-position: top center;
background-attachment: fixed;
}
a.link1,
a.link1:link,
a.link1:active,
a.link1:visited {
position: fixed;
top: 100px;
left: 100px;
}
a.link2,
a.link2:link,
a.link2:active,
a.link2:visited {
position: fixed;
top: 100px;
left: 200px;
}
</style>
</head>
<body>
<a href="#" class="link1">Link 1</a>
<a href="#" class="link2">Link 1</a>
</body>
</html>

Og så ændre du bare top og left i css'en til det kordinatsæt linket skal starte på.

//Mads

Synes godt om

hoplaringen Nybegynder

22. februar 2012 - 12:58 #5

Tak for jeres interesse :-)
Dejligt.

#martin: Jeg havde set og afprøvet dit link inden du skrev det.
#ronols: Image maps virker som jeg kan se det ikke på baggrundsbilleder.
#mads: Kan ikke få links til at følge den faste centrerede baggrund når browser vinduet ændre størrelse.

Løsningen fandt jeg da jeg engenligt havde prøvet både at indsætte billedet som baggrund på en anden div end body, jeg prøvede at indsætte billedet i en absolute div, hvor jeg så ville lave et imagemap.
Til sidst droppede jeg det og ville ligge knapperne ind, således at de fulgte de foranliggende elementer når de scrollede.
Men da jeg lagde dem som absolute, så følger de sørme med. Ihvertflad indtil at jeg vinduet er mindre end wrapperen.
Men så skal man jo også scrolle vertikalt....
Så jeg giver mig selv points :-p

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS