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

smasherdk Novice

23. december 2010 - 01:44 Der er 33 kommentarer og
1 løsning

Fade mellem 2 billeder.

Kan nogen hjælpe en nybegynder med et javascript ;)

Jeg har fundet dette script på : http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){

$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});
</script>
<style>
div.fadehover {
position: relative;
}

img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

img.b {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>

<body>
<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>
</body>
</html>

Det fungerer perfekt. Men vil gerne have hjælp til at centrere billederne på siden. Så uanset folks skærmopløsning, så er de centreret på siden.

Samt hvordan jeg skal ændre/kopiere i scriptet, så jeg kan indsætte så mange billeder jeg har lyst til. Det drejer sig nok om 15-25 billeder.

01.jpg fader til 02.jpg, 03 til 04 osv osv.

Jeg har prøvet og prøvet mig frem, og googlet, men det ikke lykkedes mig endnu :)

Håber på svar en amatør kan forstå :D

På forhånd tak.

Synes godt om

webweaver Praktikant

23. december 2010 - 02:15 #1

Du kan centrere dine billeder ved at give din <div> en width og margin: auto;

Synes godt om

webweaver Praktikant

23. december 2010 - 02:20 #2

Du kan centrere dine billeder ved at give din <div> en width og margin: auto;

Synes godt om

smasherdk Novice

23. december 2010 - 11:34 #3

Tak for svaret.

Kan du hjælpe mig med hvordan det præcist skal sættes ind, og hvad der evt skal ændres? :)

Har googlet lidt på width margin auto, og prøvet 10 forskellige løsninger med at sætte det ind, og ændre lidt i bla :
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

Synes godt om

webweaver Praktikant

23. december 2010 - 14:09 #4

Du skal lave det på din fadeover style på <div>.

div.fadehover {
width: 250px;
margin: auto;
}

Og så fjern img.a og img.b stylen i første omgang.
Med position: absolute og left og top til 0px, så beder du den om at placere billedet oppe i det øverste hjørne.

Det burde gøre forskellen.

Synes godt om

smasherdk Novice

23. december 2010 - 14:51 #5

Kan ikke få det til at virke, hvis jeg ændrer noget som helst i img.a osv.

Så nu ser det sådan ud.

<style>
div.fadehover {
position: relative;
width: 600px;
margin: auto;
}

img.a {
position: absolute;
z-index: 10;
}
img.b {
position: absolute;
}
</style>
</head>

<body>
<div class="fadehover">
<img src="01.jpg" alt="" class="a" />
<img src="02.jpg" alt="" class="b" />
</div>

Og det virker... men ikke auto i bredden.

Synes godt om

webweaver Praktikant

23. december 2010 - 16:45 #6

Det virker nu altså fint her.

<style>

div.fadehover {
position: relative;
width: 500px;
margin: auto;
}

img.a {
position: absolute;
z-index: 10;
}

img.b {
position: absolute;
}

</style>

Det viser billedet midt på siden. Altså det vil sige med lige meget luft i højre og venstre side. Vertikalt ændrer den ikke på noget.

http://www.lasse-jensen.dk/eksperten/fade.html

Synes godt om

heinzdmx Nybegynder

23. december 2010 - 17:02 #7

Jeg vil anbefale dig at gå væk fra den løsning der hvis du skal bruge flere billeder. Det du er tvunget til at gøre her er at sætte den absolutte position for alle billeder samt lave css til hver gruppe af billederne..

En ændring der kan løse det er at sætte baggrunden som det almindelige og så sætte den indholdet som sort/hvid

Altså:

og så følgende kode:

Muligvis kan du lave en anden form for animate.

Synes godt om

heinzdmx Nybegynder

23. december 2010 - 17:03 #8

Glemte lige et link til kilden -.-

http://wsmithdesign.wordpress.com/2010/06/25/friday-freebies-a-jquery-transform-image-from-black-and-white-to-color/

Synes godt om

smasherdk Novice

23. december 2010 - 17:34 #9

Lasse :
Jeg har været inde på din side, og der virker det perfekt.
Kopierede hele teksten fra source og ændrede bare jpg navnene til 01 og 02. Og så er det ikke lige så pænt centreret som dit eksempel.

Mystisk.

Synes godt om

smasherdk Novice

23. december 2010 - 17:39 #10

heinzdmx :

Problemet er at det ikke bare en "fade" jeg vil lave, mellem sorthvid og farve. Men 2 helt forskellige billeder.
En slags før/efter billeder.

Samme størrelse, men 2 vidt forskellige billeder.

Jeg startede med :
<A HREF="index.htm" onMouseOver="imgfan1.src='02.jpg'" onMouseOut="imgfan1.src='01.jpg'" onclick="return false;">
<IMG NAME="imgfan1" SRC="01.jpg"BORDER=0></A>

Som jeg kan finde ud af ;)
Det er bare at kopiere og sætte ind, og lave en lang række billeder ned af på siden.

Men så så jeg fade effekt og synes det så pisse godt ud.

Men er der andre måder at lave fade effekt på, mellem 2 billeder? :)

Synes godt om

heinzdmx Nybegynder

23. december 2010 - 17:59 #11

Det er jo i princippet ligemeget om det er sort hvid eller andet der ligger der. Bare det der skal vises først er i img-tag og det andet er i background stylen.

Synes godt om

smasherdk Novice

23. december 2010 - 18:44 #12

Så ser det sådan ud :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>

<div style="background: url(01.jpg); width:600px; height:400px;">
<img src="02.jpg" width="600" height="400" class="fade" />
</div>

<script type="text/javascript" src="jquery.js"></script>

<script>
$(document).ready(function(){

$(‘.fade').fadeTo(2000, 1.0).fadeTo(4000, 0.0);

});
</script>

</body>
</html>

Men den viser kun 02.jpg

Synes godt om

heinzdmx Nybegynder

23. december 2010 - 18:50 #13

Din html er ikke helt i orden.

husk at script ofte skal stå i head og indhold skal stå i body. Så tag lige og få rettet op på det. Desuden skal du nok prøve hover effekten.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".fade img").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
<style>
</style>
</head>
<body>
<div style="background: url(01.jpg); width:600px; height:400px;">
<img src="02.jpg" width="600" height="400" class="fade" />
</div>
</body>
</html>

Husk at din width / height skal sættes til det rigtige.
Sig til hvis det ikke virker

Synes godt om

smasherdk Novice

23. december 2010 - 18:59 #14

Det du lige skrev kan jeg ikke få til at virke.

Det eneste jeg ændrede var bredde og højde til 640 og 480

Synes godt om

webweaver Praktikant

23. december 2010 - 20:46 #15

smasherdk jeg kan ikke forstå at du ike får det centreret.
Stylen centrerer efter det bagerste billede.
Hvis de ikke er lige store (bredde), vil det første billede du ser, ikke være i midten af siden.

Har du ellers andre elementer liggende som kan have indflydelse på positioneringen?

Synes godt om

smasherdk Novice

23. december 2010 - 22:04 #16

Lasse :
Jeg har kopieret det nøjagtig fra din test side, ændret det til 01.jpg og 02.jpg, begge billeder er 640x480.

Der ligger kun test.htm, 01.jpg, 02.jpg og jquery.js i mappen. Og tester i google chrome og IE.

Ændrer jeg det til width: 600px; passer det ca.
Men det er vel kun til den opløsning som jeg kører med på denne bærbare computer.

Synes godt om

smasherdk Novice

23. december 2010 - 22:13 #17

heinzdmx :

Jeg ændrede lidt i det du havde skrevet, og fik det til at virke.

$(".fade img").hover(

ændrede jeg til $("img").hover(

Er det så muligt med det du har skrevet, at sætte flere billeder ind på siden, derned af? :)

Synes godt om

webweaver Praktikant

23. december 2010 - 23:16 #18

Hvis dit billede er 640px, skal din div også være det. At lave den mindre, giver ingen mening. Hvis du sætter den til 640px i bredde, skal den meget gerne være centreret. Og ikke kun i din opløsning :) Prøv at skalere vinduet. Den er stadig i midten ...

Synes godt om

smasherdk Novice

24. december 2010 - 00:24 #19

Lasse :

Så virker det ;)

Jeg har brugt heinzdmx's løsning, hvor jeg kan indsætte flere billeder derned af. Har ændret charset, så den forstår dansk.
Lavet baggrunden til sølvgrå.

Det eneste den mangler nu, er at centrere billederne med den løsning.

Så scriptet ser sådan ud nu :

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("img").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
<style>
</style>
</head>
<body>
<div style="background: url(02.jpg); width:640px; height:480px;">
<img src="01.jpg" width="640" height="480" class="fade" />
</div>
<br>
<div style="background: url(02.jpg); width:640px; height:480px;">
<img src="01.jpg" width="640" height="480" class="fade" />
</div>

Testede bare med de 2 samme billeder for at se om det virkede.

Synes godt om

webweaver Praktikant

24. december 2010 - 00:44 #20

Blev ikke helt klar over om det virker eller ej?

Du siger at det virker, men du siger også at du mangler at centrere billederne? Hvad er det så som virker?

Du har stadig en div omkring billederne, så den style jeg har vist på hver div, og det vil blive centreret derned af ...

En anden ting, du siger du har ændret charset så den kan forstå dansk. Du havde den så vidt jeg kan se til UTF-8 før, og den bør du beholde! Det er typisk den som benyttes nu om dage, og den forstår ganske udemærket dansk. Hvis du får sjove tegn istedet for æ, ø og å, så er det fordi du ikke har gemt det som UTF-8 hele vejen igennem.

Synes godt om

webweaver Praktikant

24. december 2010 - 00:49 #21

Som dit script ser ud, er det bare at tilføje en smule CSS for at centrere det.

<style>
div {
margin: auto;
}
</style>

og så får du følgende,
http://www.lasse-jensen.dk/eksperten/fade2.html

Synes godt om

smasherdk Novice

24. december 2010 - 08:44 #22

Det jeg kopierede fra din side af fik jeg til at virke til sidst ved at indtaste 640 px.

Men jeg brugte det Heinz skrev, pga jeg skal have mange billeder lagt ind. Og det manglede jeg at få centreret.
Men det virker nu med dit :
div {
margin: auto;
}

Så det er perfekt nu :)

Det med UTF-8 forstår jeg ikke helt. Hvis jeg bruger det, så skriver den et ? i stedet for ø f.eks.
Så har sat den til ISO-8859-1

Har det stor betydning? Det virker perfekt i chrome og IE lige nu.

Det er jo en amatør side jeg har i forvejen ;)

Synes godt om

webweaver Praktikant

24. december 2010 - 11:51 #23

Well det kan have stor betydning. Afhænhig af hvem dit "publikum" er. Du kan risikere at der er folk som ikke kan se æ, ø og å tegnene. Men hvis det ikke er noget seriøst projekt, er det nok ikke en katastrofe for dig at benytte den gamle ISO. Dog vil jeg stadig anbefale UTF-8 altid.

Nå, men nu hvor det virker, så kan vi lukke tråden.
Jeg smider et svar, og det gør heinzdmx også vil jeg tro :)

Glædelig jul og godt nytår :-)

Synes godt om

smasherdk Novice

24. december 2010 - 12:15 #24

Prøver at lige sætte hele teksten ind igen, så du kan se hvad der evt er galt med UTF-8 siden den ikke viser æ,ø,å.
Jeg startede med først bare at ændre title, for at teste, men det kunne den ikke vise.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Før/efter billeder af huset.</title>
<body bgcolor="silver">
</body>
<p align="center"><font color="#0000FF">Kør musen over billederne for at se "efter" billedet :)</font></p>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("img").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
<style>
div {
margin: auto;
}
</style>
</head>
<body>
<div style="background: url(02.jpg); width:640px; height:480px;">
<img src="01.jpg" width="640" height="480" class="fade" />
</div>
<br>
<div style="background: url(02.jpg); width:640px; height:480px;">
<img src="01.jpg" width="640" height="480" class="fade" />
</div>
</body>
</html>

Og ellers siger jeg rigtig mange tak for hjælpen til jer begge. Det var rigtig dejligt i gad hjælpe, det ser pisse godt ud med det fade :)

Og glædelig jul og godt nytår til jer også :)

Synes godt om

heinzdmx Nybegynder

24. december 2010 - 12:18 #25

Så er det næsten færdig. Du har da du ændrede ".fade img" til "img" gjort at alle billeder på siden vil få fade funktionen, hvilket ikke er helt hensigstmæssigt ;)

Derfor skal du ændre "img" til ".fade"

Det vil vælge alle billeder der har class="fade"
Så skal du bare sikre dig at alle billeder der skal kunne fades er sat til class="fade"

Glædelig jul og godt nytår til den tid :)

Synes godt om

heinzdmx Nybegynder

24. december 2010 - 12:22 #26

Det var da vist ikke efter bogen?

Nu valgte du jo så at give alle pointene til lasse??

Synes godt om

smasherdk Novice

24. december 2010 - 12:24 #27

Bare skriv et svar, så får du også point :)

Synes godt om

heinzdmx Nybegynder

24. december 2010 - 12:27 #28

Sådan fungere det ikke.. Du har udlovet 200 point. Når du så vælger at trykke acceptere til kun en vil alle pointene gå til den ene.

Kig på det svar han lagde der er gået 200 point til ham..
Så jeg kan faktisk slet ikke ligge et svar.

For at kunne splitte point op skal du vente til alle du vil give point har lagt et svar.

Synes godt om

smasherdk Novice

24. december 2010 - 12:28 #29

Kan du ikke afgive et svar nu så?

Det vidste jeg ikke.
Skal jeg oprette en ny tråd med et eller andet spørgsmål, og så give dig point der?

Synes godt om

heinzdmx Nybegynder

24. december 2010 - 13:16 #30

Hvis Lasse er flink kan han lave et nyt spørgsmål så vi kan dele pointene :)
Så hvis Lasse vil lave et spørgsmål på 100 point er det fint.

Men så véd du jo det til en anden gang ;)

Synes godt om

webweaver Praktikant

24. december 2010 - 14:29 #31

Jeg opretter en tråd med point til dig heinzdmx :)

smasherdk, når du arbejder med UTF-8, skal du huske at det ikke er nok at sætte charset til UTF-8. Filen skal også gemmes som UTF-8. Åbn den op i Notesblok og vælg "gem som" og så istedet for ANSI vælges UTF-8. Gør det en forskel? Hvis du har data fra en database, skal disse også gemmes som UTF-8 i databasen.

Synes godt om

smasherdk Novice

25. december 2010 - 15:57 #32

Lasse : Ja, det virker når jeg gemmer filen som utf-8, var jeg jo ikke engang klar over man kunne i notepad ;)

Og kan se du har delt point ud, tak for det :)

Og rigtig mange tak for hjælpen til jer begge :-)
Vil også gerne oprette en ny point tråd hvor i kan få 100 point mere hver. Betyder ingenting for mig, er bare klar for det virker nu :)

Og fortsat god jul til jer begge.

Synes godt om

smasherdk Novice

25. december 2010 - 15:58 #33

*klar = GLAD

Synes godt om

heinzdmx Nybegynder

25. december 2010 - 16:17 #34

Ekspertens regler er at hjælp til en ting ikke må give mere end 200 point i alt. Men godt det virker
Forsat god jul

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 JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

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