/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
runding af billeder
Fra : Lasse Vestergaard


Dato : 26-07-06 15:47

Hej!

Jeg har inde på dr's hjemmeside set noget meget spændende. Jeg er
ikke sikker på det er css men jeg tror det.

Hvis man følger nedenstående link kommer man ind på en af dr's
undersider.

http://www.dr.dk/p3/kiosk

Jeg forstår ikke hvordan webmasteren har lavet trikket med
billedet af kanonkongen i toppen. billedet runder i venstre side,
men hvis man henter billedet af kanonkongen ned, så er det
firkantet. Jeg har ikke selv kunnet finde noget css der kan gøre
det trick. Det eneste jeg har set er hvordan man korter vertikalt
eller horisontalt af et billede.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Holst (26-07-2006)
Kommentar
Fra : Holst


Dato : 26-07-06 16:03


Lasse Vestergaard wrote:

> Jeg har inde på dr's hjemmeside set noget meget spændende. Jeg er
> ikke sikker på det er css men jeg tror det.
>
> Hvis man følger nedenstående link kommer man ind på en af dr's
> undersider.
>
> http://www.dr.dk/p3/kiosk
>
> Jeg forstår ikke hvordan webmasteren har lavet trikket med
> billedet af kanonkongen i toppen. billedet runder i venstre side,
> men hvis man henter billedet af kanonkongen ned, så er det
> firkantet. Jeg har ikke selv kunnet finde noget css der kan gøre
> det trick. Det eneste jeg har set er hvordan man korter vertikalt
> eller horisontalt af et billede.

Nu blev jeg absolut ikke klogere at at kigge på koden, for jeg er endnu
ikke rigtig nået så langt, at jeg fatter CSS, men sådan er der jo så meget.

Men vil dette trick ikke meget enkelt kunne laves sådan (i noget
pseudokode):

<td bagground="kononkongen.jpg"><img src="rundehjørner.jpg"></td>

hvor kanonkongen.jpg er det firkantede billede af kanonkongen, og
rundehjørner.jpg er et billede med hvid/grå runding og ellers er
transparent, hvor Kanonkongen skal titte frem.

rasmus carlsen (26-07-2006)
Kommentar
Fra : rasmus carlsen


Dato : 26-07-06 16:27


"Lasse Vestergaard" <ibbernik@wanadoo.dk> skrev i en meddelelse
news:44c7805a$0$15795$14726298@news.sunsite.dk...
> Hej!
>
> Jeg har inde på dr's hjemmeside set noget meget spændende. Jeg er
> ikke sikker på det er css men jeg tror det.
>
> Hvis man følger nedenstående link kommer man ind på en af dr's
> undersider.
>
> http://www.dr.dk/p3/kiosk
>
> Jeg forstår ikke hvordan webmasteren har lavet trikket med
> billedet af kanonkongen i toppen. billedet runder i venstre side,
> men hvis man henter billedet af kanonkongen ned, så er det
> firkantet. Jeg har ikke selv kunnet finde noget css der kan gøre
> det trick. Det eneste jeg har set er hvordan man korter vertikalt
> eller horisontalt af et billede.

- http://www.dr.dk/Design/www/p3/img/p3DetStoreMix/mask210.png

der er vel blot lagt et andet billede ovenpå??

ras



Jens Peter Karlsen [~ (27-07-2006)
Kommentar
Fra : Jens Peter Karlsen [~


Dato : 27-07-06 10:44

Enkelt nok, der er blot lagt et andet billede ovenpå hvor det meste
(bortset fra rundingen) er gennemsigtigt.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

On 26 Jul 2006 14:46:50 GMT, Lasse Vestergaard <ibbernik@wanadoo.dk>
wrote:

>Jeg forstår ikke hvordan webmasteren har lavet trikket med
>billedet af kanonkongen i toppen. billedet runder i venstre side,

Lindkold (27-07-2006)
Kommentar
Fra : Lindkold


Dato : 27-07-06 11:59


"Jens Peter Karlsen [FP-MVP]" <jpkarlsen@mvps.org> skrev i en meddelelse
news:gj2hc2pc8otrcmb0m5it07slt19n4khjid@4ax.com...
> Enkelt nok, der er blot lagt et andet billede ovenpå hvor det meste
> (bortset fra rundingen) er gennemsigtigt.
>
Simpelt nok - men jeg forstår til gengæld ikke hvorfor. Hvis man har lavet
billedet med rundingen i f.x. Photoshop er det jo bare et spørgsmål om at
udskifte billedet nedenunder - det tager ca. 10 sek. og så gemme billedet og
bruge som baggrund - hvorfor alt det besvær med PNG og medfølgende
transparens-problemer i IE ??

Lindkold
--
www.lindkold.dk



Lasse Vestergaard (28-07-2006)
Kommentar
Fra : Lasse Vestergaard


Dato : 28-07-06 16:32

Jens Peter Karlsen [FP-MVP] wrote in dk.edb.internet.webdesign.html:
> Enkelt nok, der er blot lagt et andet billede ovenpå hvor det meste
> (bortset fra rundingen) er gennemsigtigt.

hmm. Jeg er ikke helt sikker på der bare er lagt et andet billede
ovenpå. Man kan få musen til at pege på billedet og derefter holde
venstre musseknap nede. Når dette er gjort så kan man flytte musen op
i adresselinien(mens venstre musseknap stadig er holdt nede) og så
vises det billede man har valgt. Når jeg gør det inde på drs
hjemmeside så kommer der et firkantet billede af kanonkongen frem. Jeg
vil dermed mene at hvis der skulle ligge et andet billede ovenop det
firkantede, så må det da være det der kommer frem, når jeg følger
ovenstående metode eller hvad?

vh

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

René Lønstrup (28-07-2006)
Kommentar
Fra : René Lønstrup


Dato : 28-07-06 17:10

Lasse Vestergaard wrote:
> hmm. Jeg er ikke helt sikker på der bare er lagt et andet billede
> ovenpå.

Det er der, på sin vis.

> Man kan få musen til at pege på billedet og derefter holde
> venstre musseknap nede. Når dette er gjort så kan man flytte musen op
> i adresselinien(mens venstre musseknap stadig er holdt nede) og så
> vises det billede man har valgt. Når jeg gør det inde på drs
> hjemmeside så kommer der et firkantet billede af kanonkongen frem. Jeg
> vil dermed mene at hvis der skulle ligge et andet billede ovenop det
> firkantede, så må det da være det der kommer frem, når jeg følger
> ovenstående metode eller hvad?

Kig i kildekoden. Lige før billedet er der en span med klassen "mask" (<span
class="mask"></span>). Denne span er placeret henover billedet af
kanonkongen og har fået sat et baggrundsbillede i css (
http://www.dr.dk/Design/www/p3/img/p3DetStoreMix/mask210.png ) som derved
dækker over billedet.
Ikke meget anderledes end at placere et maske-billede direkte henover.

Dette er iøvrigt nemt at opdage i Firefox hvis du højreklikker på billedet
og vælger "vis baggrundsbillede".


--
Mvh René Lønstrup
web: http://rene.loenstrup.net?r=usenet
email: se om du kan regne den ud..



Jacob Ask (27-07-2006)
Kommentar
Fra : Jacob Ask


Dato : 27-07-06 12:24


Lindkold wrote:
> Simpelt nok - men jeg forstår til gengæld ikke hvorfor. Hvis man har lavet
> billedet med rundingen i f.x. Photoshop er det jo bare et spørgsmål om at
> udskifte billedet nedenunder - det tager ca. 10 sek. og så gemme billedet og
> bruge som baggrund - hvorfor alt det besvær med PNG og medfølgende
> transparens-problemer i IE ??
>
> Lindkold

Nu ved jeg ikke helt hvordan det fungerer på dr, men det kunne tænkes
at værterne / eller andre en dem som har lavet siden (mindre erfarne)
selv har mulighed for at opdatere siden. i denne henseende vil det
være nemmere om man bare kan finde et nyt billede og ligge det op.
Så vidt jeg har forstået er der heller ikke problemer med transperans
i PNG og IE sålænge det bare er 8 bit (i givet fald skulle det virke
som GIF).

Mvh
Jacob Ask


Søg
Reklame
Statistik
Spørgsmål : 177501
Tips : 31968
Nyheder : 719565
Indlæg : 6408527
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste