Forside med css. Hva tror du?

[284naiz]

Jeg skal lage en forside for en nettbutikk. På forsiden skal det kun vises et bilde som er tegnet for hånd. På bildet vises forskjellige objekter ex: bil. Og når muspekeren er over bilen, så skal det skje noe css style aka finn.no (sett inn annonse) slik at når muspekeren er over objektet skal det fargen på bilen forandres e.l. Det er totalt 7 objekter på bildet som skal linkes.

 

Da lurer jeg på hva jeg trenger utenom det store bildet jeg får tegnet. Trenger jeg flere bilder? Eller vil css kodingen gjøre alt jeg trenger?

 

Samtidig lurer jeg på om det finnes noen som kan hjelpe til med csskodingen. Krev sum du ønsker for hjelpen.

Jeg har forskjellige testbilder(3 stk) som kan lekes på om noen vil prøve seg. Er du flink får du gå løs på hovedbildet.

 

Ting jeg ikke skal bruke: flash eller vanlig imagemapping (det får jeg til selv).

 

Tony

[ilpostino]

første jeg kommer på er å bruke hover i CSS eller onMouseOver eventen i JavaScript.

[284naiz]

første jeg kommer på er å bruke hover i CSS eller onMouseOver eventen i JavaScript.

 

Blir det ikke stor lasting på mouseover hvis jeg skal ta utgangspunkt i et stort bilde. Hvis muspekeren skal over en av ikonene på det store bildet så skal et nytt stort bilde kommer over det forrige bare med endring på det ene ikonet?

 

Tony

[ilpostino]

ved hjelp av JavaScript og AJAX kan du laste bildene i bakgrunnen slik at du får et raskt skifte når du tar bildet over ikonene.

[plakatmannen]

Du kan også legge begge ikon-staddiene (hover og ikke hover) i samme bilde, og bruke CSS:

.ikon{
 background: url(ikon.png) top;
}
.ikon:hover{
 background: url(ikon.png) bottom;
}

 

Du lar da det som skal vises uten at man holder over bildet, i toppen av bildet, og det som skal vises når man holder musen over, i bunnen. To bilder i ett, hvis du skjønner. Da vil du ikke trenge å vente på at bildet lastes.

[284naiz]

Du kan også legge begge ikon-staddiene (hover og ikke hover) i samme bilde, og bruke CSS:

.ikon{
 background: url(ikon.png) top;
}
.ikon:hover{
 background: url(ikon.png) bottom;
}

 

Du lar da det som skal vises uten at man holder over bildet, i toppen av bildet, og det som skal vises når man holder musen over, i bunnen. To bilder i ett, hvis du skjønner. Da vil du ikke trenge å vente på at bildet lastes.

 

Noen som skrev dette til meg: Ikke bruk imagemapping til en navigasjon. Bruk heller HTML som markup (gjerne lister <li>) og style dette med CSS. Det er denne måten som er riktig med tanke på semantikk og oppbygning av siden. Hvis du i tillegg ønsker gode søkeresultater fra søkemotorer - som gir flere besøkende - er HTML/CSS riktig vei å gå med tanke på SEO

 

Hva mener han med dette? Og kan dette gjøres i sammenslåing av ditt forslag, og vet du hvordan du gjør dette?

 

Tony

[plakatmannen]

Han har rett. Har sendt deg PM.

[ilpostino]

Han har rett. Har sendt deg PM.

 

hva med å dele det?

[plakatmannen]

Han sa han hadde eksempelbilder, og derfor sendte jeg ham eposten min på PM, så han kunne sende det til meg. Kan legge ut løsningen her, når jeg får orndet det

[ilpostino]

Han sa han hadde eksempelbilder, og derfor sendte jeg ham eposten min på PM, så han kunne sende det til meg. Kan legge ut løsningen her, når jeg får orndet det

 

silkestrøkent.