Mun pitäisi luoda yksinkertainen sivu kahden kuvan avulla. Eli toinen kuva olisi taustalla ja toinen kuva tulisi siihen keskitettynä päälle. Sitten siinä keskitetyssä kuvassa olevia tekstien päältä (jotka myös osa kuvaa) kun klikkaa niin sivu vaihtuu. Miten tämä kaikki toteutettaisiin?
Ei pitäisi olla vaikea juttu, mutta kun en vielä kaikkea tajua :)
Nyt olen saanut toimimaan vaan niin, että tämä toinen kuva on vain tietyssä paikassa, mutta eri näyttöresoluutioilla se ei tietenkään näytä keskitetyltä.
Entä miten saisin siis jotkin kuvan osiot toimimaan linkkeinä? Onko tämä ylipäätään mahdollista vai pitääkö minun luoda uudet kuvat noista teksti-kohdista kuvassa ja sitten sovittaa ne samoihin kohtiin(toimimaan linkkeinä)?
Tässä css-koodiani:
html, body {
position: absolute;
background-color: #000000;
background-image:url(tausta.jpg);
background-repeat:no-repeat;
}
#runko {
position: absolute;
top: 100px ;
left: 200px ;
width: 830px;
height: 545px;
background-image:url(kuva.jpg);
background-repeat:no-repeat;
}
Ei pitäisi olla vaikea juttu, mutta kun en vielä kaikkea tajua :)
Nyt olen saanut toimimaan vaan niin, että tämä toinen kuva on vain tietyssä paikassa, mutta eri näyttöresoluutioilla se ei tietenkään näytä keskitetyltä.
Entä miten saisin siis jotkin kuvan osiot toimimaan linkkeinä? Onko tämä ylipäätään mahdollista vai pitääkö minun luoda uudet kuvat noista teksti-kohdista kuvassa ja sitten sovittaa ne samoihin kohtiin(toimimaan linkkeinä)?
Tässä css-koodiani:
html, body {
position: absolute;
background-color: #000000;
background-image:url(tausta.jpg);
background-repeat:no-repeat;
}
#runko {
position: absolute;
top: 100px ;
left: 200px ;
width: 830px;
height: 545px;
background-image:url(kuva.jpg);
background-repeat:no-repeat;
}
Vastaukset 5
Vanhimmat
yrität hommaa nyt turhan monimutkaisesti
(2 taustakuvaa).
Laita se pikkukuva paikalleen ihan suoraan
vaan html-koodissa "tavallisena" kuvana ja
määrittele paikka prosentteina, ei pikseleinä.
Kuvan osiin saat linkin ns. kuvakarttatekniikalla
tässä ohjeita:
http://www.google.fi/search?hl=fi&q=kuvakartta&btnG=Google-haku&meta=cr=countryFI
Niin se unohtui mainita, että tämän pienemmän kuvan päälle pitäisi saada vielä teksti asemoitua. Eli onnistuuko se silti vaikka laitan kuvan ihan "tavallisena" kuvana?
HTML:llä asetetun kuvan päälle et saa tekstiä.
Niin, eli sama ongelma on siis edelleen :) Eli miten tämä siis pitäisi toteuttaa?
tapaa tulee heti mieleen (on niitä varmaan enemmänkin).
-laitat kuvankäsittelyohjelmalla sen tekstin
siihen kuvaan suoraan "osaksi" kuvaa ja sitten
kuvakartalla tekstin paikat linkeiksi.
-Kerrokset (layer) -menetelmä. Kuvat ja teksti eri
kerroksiin.
kts. http://virtuaaliyliopisto.jyu.fi/etusivu/tyopakki/oppimateriaalintuottaminen/wwwtuotanto/fp_ohje2005.doc
etsi kohta
"Sisällön asemointi Kerrosten avulla"
En ole erikoisesti FrontPagen ystävä mutta
ohjettahan voi soveltaa.