Hvordan legge 2 bilder oppå hverandre i HTML

[DJViking]

Er det mulig å legge 2 bilder oppå hverandre i HTML. Det øverste bildet inneholder små elementer og er transparent slik at de elementene blir liggende oppå det underliggende bildet.

 

Men er det mulig å lage noe HTMLkode som kan gjøre dette? <img src=""> tar jo bare inn et bilde. Kanskje jeg må bruke Javascript til dette?

[Equerm]

Det finnes nok noe javascript greier du kan bruke til dette, dessuten har CSS en funksjon for å gjøre ting gjennomsiktige, men dette er ikke skikkelig implementert i alle nettlesere, er det ikke like greit å bare gjøre de om til et enkelt bilde da?

[DJViking]

Det finnes nok noe javascript greier du kan bruke til dette, dessuten har CSS en funksjon for å gjøre ting gjennomsiktige, men dette er ikke skikkelig implementert i alle nettlesere, er det ikke like greit å bare gjøre de om til et enkelt bilde da?

8210689[/snapback]

 

Jeg har ikke fysisk tilgang til det ene bildet. Det er hentet fra en Web Map Service.

[Ozwald]

Dette går an ved bruk av CSS der du legger hvert bilde i sin egen DIV, også plasserer du DIVene oppå hverandre.

[Matsemann]

Dette går an ved bruk av CSS der du legger hvert bilde i sin egen DIV, også plasserer du DIVene oppå hverandre.

8211708[/snapback]

Eller bare ha en DIV, og det bildet som skal forrest inni. Slik som dette:

<div class="bilde"><img src="stiltilfil.filtype" /></div>

Så legger du det bildet som skal bakerst inn som bakgrunnsbilde i DIVen, slik:

.bilde {

background-image:url(stitilfil.filtype);

}

 

Om det ikke trengs av en spesiell grunn pleier jeg å bruke den metoden.

[Equerm]

Men det funker ikke om han skal ha bildet gjennomsiktig

[Matsemann]

Er det mulig å legge 2 bilder oppå hverandre i HTML. Det øverste bildet inneholder små elementer og er transparent slik at de elementene blir liggende oppå det underliggende bildet.

Jeg tolker det som at bildet allerede er gjennomsiktig, jeg.

[Equerm]

Men det er ikke alle nettlesere som støtter denne funksjonen da, husker at jeg så en javascript greie som fikset det da

[Matsemann]

Hva er det de ikke støtter da? Et bakgrunnsbilde i en DIV går fint, og så er det bare et vanlig bilde foran. Ser ikke helt problemet

Å gå veien gjennom JS når det kan gjøres uten er unødvendig.

[attach]

Gjennomsiktig png må fikses for IE6. Bare google png fix/hack.

[Matsemann]

Gjennomsiktig png må fikses for IE6. Bare google png fix/hack.

8212599[/snapback]

Kun halv-transparente PNG-bilder. Om de er helt eller ikke transparente eller er GIF går det greit.

[attach]

Alle skjønner vel at jeg ikke mente helt gjennomsiktige png-er

[Matsemann]

Alle skjønner vel at jeg ikke mente helt gjennomsiktige png-er

8212674[/snapback]

Kun de som visste det fra før av, tenkte jeg da

[DJViking]

Jeg har gått over til PNG nå, det ene er transparent. Jeg forstår det slikt at det transparente bildet må ligge oppå det andre bildet.

 

Det er viktig at det støttes i alle nettlesere

[Matsemann]

Så lenge det ikke er halvtransparente områder i bildet duger det fint. Internet Explorer 6 sliter nemlig med det, men da er det bare å trå til med javascript. Du kan eventuelt be en av oss teste om du ikke har IE6 selv.

[Equerm]

http://homepage.ntlworld.com/bobosola/

[DJViking]

Løste problemet med å legge hovedbildet som bakgrunn i en tabell og overleggsbildet i en <img> i tabellen.

 

Men pga. at hovedbildet tar ca20-30 sekunder å hente ned blir overleggsbildet vist alene i den tidsperioden. Skulle hatt en metode for å vente med overleggsbildet til hovedbildet var klart.

[Matsemann]

Du kunne ikke komprimert bildet litt da? 20-30 sekunder er grådig mye, og de færreste gidder å vente så lenge på et enkelt bilde.

[DJViking]

Du kunne ikke komprimert bildet litt da? 20-30 sekunder er grådig mye, og de færreste gidder å vente så lenge på et enkelt bilde.

8219820[/snapback]

 

Har ikke noe valg. Bildet kommer fra en Web Map Service i 1700*850 og er over 2MB i størrelse. For at målestokken skal være riktig og innenfor et gitt område må det være så stor oppløsning.