Hei,
olen joskus käynyt nettisivuilla missä on linkkejä kuviin. Kun linkkiä klikkaa niin kuva avautuu ja kuvan päälle tulee painike josta kuvan saa zoomattua selainikkunan kokoiseksi. Miten tämä on tehty?
olen joskus käynyt nettisivuilla missä on linkkejä kuviin. Kun linkkiä klikkaa niin kuva avautuu ja kuvan päälle tulee painike josta kuvan saa zoomattua selainikkunan kokoiseksi. Miten tämä on tehty?
Vastaukset 5
Vanhimmat
En nyt ole ihan varma millaista ajat takaa, mutta tässä olisi yksi mahdollisuus:
teet painikkeesta linkin uudelle sivulle. Tällä uudella sivulla on sitten pelkästään tuo kuva. Ja se sivu voisi olla vaikka seuraavanlainen
Kuva
*{margin:0;padding:0;}
img {height:100%; width:100%}
Hyvin toimii, skaalautuu ikkunan kokoiseksi hienosti.
Ajattelin laittaa jollekin sivulle pikkukuvat joita klikkaamalla, juuri niin kuten sanoit, avautuu uusi sivu jolla on vain yksi kuva.
Aiemmin olin tehnyt kuvaesityksen SlideShowna PowerPointin .PPS-esityksenä, mutta tuosta SlideShowsta täytyy luopua kun kone aivan välttämättä haluaa ladata tiedoston kokonaan palvelimelta ennen kuin näyttää ensimmäistäkään kuvaa eikä tätä kukaan jaksa odottaa. Ladattavan tiedoston koko kun on melkein seitsemän megaa.
Kiitos koodistasi!
Mikähän tässä on vikana, kuva skaalautuu kyllä oikean levyiseksi muttei oikean korkuiseksi. Kuvasta tulee aina liian korkea.
SlideShow
var num = 0
kuvat = new Array()
kuvat[0] = "Maisema001.jpg"
kuvat[1] = "Maisema002.jpg"
kuvat[2] = "Maisema003.jpg"
function slideshow()
{
document.mypic.src = kuvat[num]
if(++num >= kuvat.length)
{num=0}
{ self.setTimeout("slideshow()", 4000) }
}
Olen kokeillut tuon "height=100% width=100%" tilalla "height:100%; width:100%" eikä toimi sekään.
samoin kokeilin head-osiossa tuota:
*{margin:0;padding:0;}
img {height:100%; width:100%}
mutta ei toimi. Alun perin antamasi toimii oikein hyvin mutta muun koodin yhteydessä ei?
html:ssä ei ole sellaista attribuuttia kuin height (vaikka se välillä toimiikin), css:ssä sen sijaan löytyy sellainenkin määrite.
Ja html:ssä muuten kaikki attribuutit pitäisi pistää lainausmerkkeihin.
Miten yritit tuon "height:100%; width:100%"? et kai vaan näin:
Tuo nimittäin on css:llä käytettävä tapa ja jos sen haluaa laittaa siihen htmltagiin se pitäisi tehdä näin:
No mutta oli miten oli, hyvinhän tuo antamasi esimerkki toimii, kunhan poistaa nuo html-attribuutit ja määrittelee tuon koon siellä css-osiossa. Niin, toimii paitsi IE-ressukassa joka on taaskin vähän pihalla. Mut ei hätää, senkin saa näköjään kierrettyä antamalla vielä bodylle määrityksen overflow: hidden; (eli ei vieritetä vaikka kuva olisi isompi kuin sivu).
Kokonaisuudessaan siis näin:
SlideShow
*{margin:0;padding:0;}
img {
height: 100%;
width: 100%;
}
body{overflow: hidden;}
var num = 0
kuvat = new Array()
kuvat[0] = "Maisema001.jpg"
kuvat[1] = "Maisema002.jpg"
kuvat[2] = "Maisema003.jpg"
function slideshow()
{
document.mypic.src = kuvat[num]
if(++num >= kuvat.length)
{num=0}
{ self.setTimeout("slideshow()", 4000) }
}
P.S. Huomasin muuten yhden hauskan jutun. Jos tuon koodin esittelee strictinä niin IE ja FF säilyttävät kuvassa aikeat mittasuhteet (tosin silloin ei kai kai toimi niinkuin haluat), Opera taitaa tässä kohtaa bugata sillä versiossa 8.6 näytetään kuvat vääristyneinä (eli ei pidä mittasuhteita oikeana vaan esim. leveässä ja matalassa selainikkunassa kuva on lättänä) ja versio 9 beta taas ei suostu näyttämään koko sivua. Nämä siis silloin kun dtd:ksi on valittu Strict. Ilman dtd:tä ja looseridtd:llä kaikissa näkyy vääristyneenä koko ikkunan kokoisena.
"Miten yritit tuon "height:100%; width:100%"? et kai vaan näin:
"
Tietenkin laiton juuri tuolla tavalla... Sain kuitenkin toimimaan, kiitos