|
|
 | Image transition
Fra : Martin |
Dato : 02-01-08 13:48 |
|
Hej!
Sidder og roder med noget billede transformering (1 billede skal
transformeres til et andet)
Jeg har kigget lidt rundt omkring, men det eneste jeg har set var muligt
er at der kun kan ændres imellem css klasser, og ikke direkte billeder.
Så fandt jeg en der kunne transformerer 2 billeder - problemet med denne
er bare at den bruger javascripts timer funktion, så derfor så kan man
ikke køre 2 elementer adgangen.
Er der nogle der har en løsning på dette, eller måske en helt andet
funktion som jeg måske ikke lige har tænkt på?
http://aarhof.eu/newsgroup/clientside/imagetransition/
| |
 Bertel Lund Hansen (02-01-2008)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 02-01-08 13:54 |
|
Martin skrev:
> Sidder og roder med noget billede transformering (1 billede skal
> transformeres til et andet)
Er fidusen at der skal komme et nyt billede ved hover der
forsvinder når pilen igen flyttes væk?
Det er nemt at lave i CSS. Jeg har et eksempel her:
http://lundhansen.dk/
Peg på Zakarias.
Både HTML- og CSS-fil er ret små. Dem kan du bare kikke efter.
--
Bertel
http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/
| |
Martin (02-01-2008)
| Kommentar
Fra : Martin |
Dato : 02-01-08 19:45 |
|
Bertel Lund Hansen wrote:
> Martin skrev:
>
>> Sidder og roder med noget billede transformering (1 billede skal
>> transformeres til et andet)
>
> Er fidusen at der skal komme et nyt billede ved hover der
> forsvinder når pilen igen flyttes væk?
>
> Det er nemt at lave i CSS. Jeg har et eksempel her:
>
> http://lundhansen.dk/
>
> Peg på Zakarias.
Jep, det kan jeg se... men ville nu se endnu bedre ud hvis der kom en
flydende overgang imellem de 2 billeder - og det er netop det jeg gerne
vil have :)
Et eksempel kan ses her
http://smoothgallery.jondesign.net/
Ligeunder "What is it ?" kører der nogle billeder i et galleri...
Jeg har også prøvet at kæmpe med at lave samme effekt med mouseover, men
det virkede desværre ikke
| |
 Erik Ginnerskov (02-01-2008)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 02-01-08 23:29 |
| | |
Martin (03-01-2008)
| Kommentar
Fra : Martin |
Dato : 03-01-08 10:54 |
|
Erik Ginnerskov wrote:
> Martin wrote:
>
>> Et eksempel kan ses her
>> http://smoothgallery.jondesign.net/
>> Ligeunder "What is it ?" kører der nogle billeder i et galleri...
>
> Ikke noget at efterstræbe efter min ringe mening. Det kører med en masse
> javascript-halløj. Siden er en evighed om at loade, så mange potentielle
> brugere smutter nok inden da.
>
Iflg firebug - 2.67 sek.
(PS - så html-faq.dk tager 1.82 sek)
| |
Martin (03-01-2008)
| Kommentar
Fra : Martin |
Dato : 03-01-08 10:54 |
|
Martin wrote:
> (PS - så html-faq.dk tager 1.82 sek)
Undskyld, det var ginnerskov.dk jeg testede
| |
Erik Ginnerskov (03-01-2008)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 03-01-08 23:33 |
| | |
Allan Vebel (02-01-2008)
| Kommentar
Fra : Allan Vebel |
Dato : 02-01-08 15:10 |
|
Martin skrev:
> var muligt er at der kun kan ændres imellem
> css klasser, og ikke direkte billeder.
Det er nemt at lave med baggrundsbilleder, jeg
lavede lige et hurtigt eksempel:
http://vebel.dk/test/aarhof/
Så er der bare spørgsmålet om det kloge i at lave
links med billeder - og søgemaskinevenlighed.
--
Allan Vebel
http://html-faq.dk
http://vebel.dk
| |
Martin (02-01-2008)
| Kommentar
Fra : Martin |
Dato : 02-01-08 19:37 |
|
Allan Vebel wrote:
> Martin skrev:
>
>> var muligt er at der kun kan ændres imellem
>> css klasser, og ikke direkte billeder.
>
> Det er nemt at lave med baggrundsbilleder, jeg
> lavede lige et hurtigt eksempel:
>
> http://vebel.dk/test/aarhof/
>
> Så er der bare spørgsmålet om det kloge i at lave
> links med billeder - og søgemaskinevenlighed.
>
Ved godt det er nemt at skifte imellem 2 billeder via CSS - men hvis man
ligger mærke til på min side, så er der "transition" imellem de 2
billeder, altså de formeres ind i hinanden... Altså meningen er det skal
se mere flydende ud end med "alm. css mouseover"
| |
Allan Vebel (02-01-2008)
| Kommentar
Fra : Allan Vebel |
Dato : 02-01-08 20:45 |
|
Martin skrev:
> meningen er det skal se mere flydende ud end
> med "alm. css mouseover"
Så er det nok noget Flash du skal over i, eller også
lege lidt med en animeret gif.
Er du sikker på at dine brugere vil have det på den
måde?
Selv kan jeg ikke fordrage den slags effekter - der
skal ske noget med det samme, jeg gider ikke at
vente i flere sekunder på at noget bliver
transformeret til noget andet 
--
Allan Vebel
http://html-faq.dk
http://vebel.dk
| |
Martin (03-01-2008)
| Kommentar
Fra : Martin |
Dato : 03-01-08 10:56 |
|
Allan Vebel wrote:
> Martin skrev:
>
>> meningen er det skal se mere flydende ud end
>> med "alm. css mouseover"
>
> Så er det nok noget Flash du skal over i, eller også
> lege lidt med en animeret gif.
Nu kan jeg ikke finde ud af flash :/
>
> Er du sikker på at dine brugere vil have det på den
> måde?
Nææ... men det vil designerne
>
> Selv kan jeg ikke fordrage den slags effekter - der
> skal ske noget med det samme, jeg gider ikke at
> vente i flere sekunder på at noget bliver
> transformeret til noget andet
Tildels enig - men lidt fading, dog ikke noget som ændrer et helt design
eller 2 billeder som ikke passer sammen ser ikke godt ud.
| |
Erik Ginnerskov (03-01-2008)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 03-01-08 23:34 |
| | |
Martin (04-01-2008)
| Kommentar
Fra : Martin |
Dato : 04-01-08 00:33 |
|
Erik Ginnerskov wrote:
> Martin wrote:
>
>>> Er du sikker på at dine brugere vil have det på den
>>> måde?
>> Nææ... men det vil designerne
>
> Er det da ikke brugerne, du laver siden til?
Nix.. jeg laver tingene ud fra designernes specifikation, og de laver
den til kunden - som i dette tilfælde er os selv :)
| |
Erik Ginnerskov (04-01-2008)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 04-01-08 00:47 |
|
Martin wrote:
>> Er det da ikke brugerne, du laver siden til?
>
> Nix.. jeg laver tingene ud fra designernes specifikation, og de laver
> den til kunden - som i dette tilfælde er os selv :)
Så er du da som kunde i din gode ret til at kassere designerens
specifikationer og forlange dine specifikationskrav overholdt.
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk
| |
Allan Vebel (04-01-2008)
| Kommentar
Fra : Allan Vebel |
Dato : 04-01-08 00:50 |
|
Martin skrev:
> Nix.. jeg laver tingene ud fra designernes specifikation,
> og de laver den til kunden - som i dette tilfælde er os
> selv :)
Det er også fint nok i sig selv, jeg ville bare have dig
til at tænke over tingene, inden du lukker for meget
billedtransformation ud til brugeren.
Tænk igen igennem at billeder som links ikke er spor
søgemaskinevenlige.
Det ser sikkert pissegodt ud, men hvad hjælper det,
hvis ingen finder siden?
--
Allan Vebel
http://html-faq.dk
http://vebel.dk
| |
Martin (04-01-2008)
| Kommentar
Fra : Martin |
Dato : 04-01-08 09:39 |
|
Allan Vebel wrote:
> Martin skrev:
>
>> Nix.. jeg laver tingene ud fra designernes specifikation,
>> og de laver den til kunden - som i dette tilfælde er os
>> selv :)
>
> Det er også fint nok i sig selv, jeg ville bare have dig
> til at tænke over tingene, inden du lukker for meget
> billedtransformation ud til brugeren.
>
> Tænk igen igennem at billeder som links ikke er spor
> søgemaskinevenlige.
Enig, men der kommer også en dropdown menu (som er lavet via ul liste)
som egentlig har de mest relavante links.
>
> Det ser sikkert pissegodt ud, men hvad hjælper det,
> hvis ingen finder siden?
>
Det kan kun blive bedre end det flash site som eksisterer i dag :)
| |
Jørgen Farum Jensen (02-01-2008)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 02-01-08 21:27 |
|
Martin skrev:
> Ved godt det er nemt at skifte imellem 2 billeder via CSS - men hvis man
> ligger mærke til på min side, så er der "transition" imellem de 2
> billeder, altså de formeres ind i hinanden... Altså meningen er det skal
> se mere flydende ud end med "alm. css mouseover"
Det laves med et et JavaScript, der
varierer opaciteten fra 0 til 1
på den ene bilede og fra 1 til 0
på det andet billede og lade den
samme timeout styre begge processer.
Jeg kan desværre ikke komme med noget
link, men hvis du søger på Google med
ordene
opacity fade filter css
finder du en del henvisninger.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Martin (03-01-2008)
| Kommentar
Fra : Martin |
Dato : 03-01-08 11:02 |
|
Jørgen Farum Jensen wrote:
> Jeg kan desværre ikke komme med noget
> link, men hvis du søger på Google med
> ordene
> opacity fade filter css
> finder du en del henvisninger.
>
Det hjalp... bare bruge de rigtige søgeord :)
| |
|
|