Notifikationer

Markér alle som læst Log ud

doodoo Novice

13. juni 2006 - 14:07 Der er 13 kommentarer og
1 løsning

Billede der følger scroller

Hey guys

Jeg faldt lige over denne:
http://www.lombergar.com/v6/advanced-batch-processing-video-tutorial-191.html

Det billede i højre side der følger én, når man scroller er jo top nice og kunne godt tænke mig at vide hvordan det laves..

Nogle der ved/kan det
eller kender en side der forklarer?

Tak

Synes godt om

mr_bula Nybegynder

13. juni 2006 - 20:10 #1

Her er der et link: http://www.html.dk/tutorials/css/lektion3.asp#background-attachment

Synes godt om

doodoo Novice

13. juni 2006 - 22:32 #2

Ikke sådan...

Jeg vil gerne have et billede, så jeg kan lave det til et link ;]

Synes godt om

mr_bula Nybegynder

13. juni 2006 - 23:09 #3

Okay, så et andet link: http://www.faqts.com/knowledge_base/view.phtml/aid/8894/fid/53

Her skal du så bare koble et link til billedet

Synes godt om

doodoo Novice

14. juni 2006 - 09:21 #4

Ja, jo

Jeg får den kun til at virke som en alm. div box der bliver stående et sted...
Har du prøvet den?

Synes godt om

mclemens Nybegynder

14. juni 2006 - 18:44 #5

Det med javascript er nok ikke helt nødvendigt
... der kan sagtens css fuskes ... - placeringen kan
også placeres præcis som man ønskes - med en ekstra
inner div i followit kan ... placeringen også tilpasses med sidens bredde så det hjælper i højere oplysning med centrering på siden ... jeg er elendig til det med forklaringer kommer lige med det eksempel...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{
padding:0px;
margin:0px;
height:100%;
overflow:hidden;
}

#obody{
position:absolute;
top:0px;left:0px;
width:100%;
height:100%;
overflow:auto;
background:#fff
}

#ibody{
position:relative;
}

#followit{
position:absolute;
top:100px;right:50px;
z-index:999;
}

</style>

<script type="text/javascript">

</script>

</head><body>

<div id="obody"><div id="ibody">

Indholdet her...<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.

</div></div>

<div id="followit"><a href="#">Indsæt billede</a></div>

</body></html>

Synes godt om

mclemens Nybegynder

14. juni 2006 - 18:48 #6

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{
padding:0px;
margin:0px;
height:100%;
overflow:hidden;
}

#obody{
position:absolute;
top:0px;left:0px;
width:100%;
height:100%;
overflow:auto;
background:#fff
}

#ibody{
position:relative;
}

#content{
width:700px;
margin:0px auto;
background:#aaa;
}

#followito{
position:relative;
width:700px;
margin:0px auto;
background:#aaa;
}

#followit{
position:absolute;
top:100px;right:50px;
z-index:999;
}

</style>

<script type="text/javascript">

</script>

</head><body>

<div id="obody"><div id="ibody">

<div id="content">
Indholdet her...<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</div>

</div></div>

<div id="followito"><div id="followit"><a href="#">Indsæt billede</a></div></div>

</body></html>

Synes godt om

mr_bula Nybegynder

14. juni 2006 - 23:21 #7

Hvis du vil have det ligesom linket du henviser til kommer du ikke udenom JS. Du kan se deres script her: http://www.lombergar.com/v6/custom_hoverwindow.js

Ligeledes bruger de også map til at definere billedes link som en cirkel

Synes godt om

doodoo Novice

15. juni 2006 - 09:10 #8

Ey clemens

Det virker lidt som jeg vil have det - kan man sætte positions til nederste højre hjørne?

Synes godt om

doodoo Novice

15. juni 2006 - 09:10 #9

og måske fjerne alt andet så den er lige til at smide ind på min side?

Synes godt om

mclemens Nybegynder

15. juni 2006 - 09:44 #10

Afhænger lidt af placeringen ... du skal dog bruge den
"nye" body sektion til at placere dit indhold i...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{
padding:0px;
margin:0px;
height:100%;
overflow:hidden;
}

#body{
position:relative;
width:100%;
height:100%;
overflow:auto;
}

#followit{
position:absolute;
bottom:50px;right:70px;
z-index:999;
}

</style>

<script type="text/javascript">

</script>

</head><body>
<div id="body">

Dette er din nye body...

</div>

<div id="followit"><a href="#"><img src="ditbillede-width-og-height-defineringer-behoves-selvfølgelig-ikke.jpg" width="200" height="100"></a></div>

</body></html>

Synes godt om

mclemens Nybegynder

15. juni 2006 - 09:51 #11

Hvis den skal centreres samtidig så:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{
padding:0px;
margin:0px;
height:100%;
overflow:hidden;
}

#bodyo{
position:absolute;
width:100%;
height:100%;
overflow:auto;
z-index:10;
}

#bodyi{
position:relative;
width:770px;
margin:0px auto;
}

#followito{
position:relative;
width:770px;
height:100%;
margin:0px auto;
}

#followiti{
position:absolute;
bottom:50px;right:70px;
z-index:999;
}

</style>

<script type="text/javascript">

</script>

</head><body>
<div id="bodyo"><div id="bodyi">

Dette er din nye body...

</div></div>

<div id="followito"><div id="followiti"><a href="#"><img src="ditbillede-width-og-height-defineringer-behoves-selvfølgelig-ikke.jpg" width="200" height="100"></a></div></div>

</body></html>

Synes godt om

mclemens Nybegynder

15. juni 2006 - 09:54 #12

z-index:10; i #bodyo er overflødig ...
- Hvilken du evt. kan bruge afhænger af placeringen af billedet (første er altid nederste højre hjørne ... sidste er centreret

Synes godt om

mclemens Nybegynder

15. juni 2006 - 10:58 #13

Hvis du bruger 15/06-2006 09:44:43 skal id="body" nok lige rettes id="bodyen" og i css #body rettes til #bodyen ... ellers kan du nok få problemer med javascripts...

Synes godt om

mclemens Nybegynder

26. oktober 2006 - 22:11 #14

Tak for point :)

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
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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