Hei taas !
Sivulla on paljon tekstiä ja seassa boldattuja sanoja joiden päälle viedessä hiiren aukeaa kuva. OnMouseOver ja OnMouseOut. Kuvien vasen reuna pitäisi saada 300px vasemmalta ja korkeus niin että kuvan alareuna olisi tekstin yläpuolella. Onnistuisi helposti jos leveyden voisi laittaa absolute ja korkeuden relative. Ja kaikki kuvat ovat eri korkuisia.
kysymys, täytyykö säätaa joka kuva erikseen vai saisiko jotenkin fiksummin?
Kun kerran JS:ää käytät, niin asettele ensin kuvan yläreuna tekstin tasalle ja vähennä siitä sitten kuva.offsetHeight eli korkeus.
Jos linkkiin on määritetty position: relative; ja kuvaelementti on sijoitettu linkin sisälle, niin sitten kuvalle voi määrittää position: absolute; lisäksi bottom: 100%;, jolloin kuva sijoitetaan linkkitekstin yläpuolelle. Sinänsä kaikki tämä onnistuu kokonaan ilman JavaScriptiä.
testaillaan. Kiitos.
Tässä on vielä esimerkki, kokeiltava sivu ja sorsan kopio:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Kuvan sijoittaminen linkin yläpuolelle</title>
<style type="text/css">/*<![CDATA[*/
p {
margin-top: 500px;
}
a {
display: inline-block;
overflow: hidden;
position: relative;
vertical-align: text-bottom;
}
a:hover {
overflow: visible;
}
a img {
bottom: 100%;
left: 0;
position: absolute;
}
/*]]>*/</style>
</head>
<body>
<div id="dokumentti">
<p>
Olipa kerran
<a href="">Putka<img alt="" src="putka3.png" /></a>
ja myös
<a href="">Kissa<img alt="" src="kissa.jpg" /></a>
sekä eräs
<a href="">Lehmä<img alt="" src="lehma.jpg" /></a>
</p>
</div>
</body>
</html>Vertical-align piti lisätä inline-blockin vuoksi, inline-block piti lisätä relativen takia. Näin sitten saatiin toimiva lopputulos.
Muoks!
Jahas, Opera, Safari ja Chrome ei tykänneet tästä, tahtoisivat ilmeisesti eri vertical-align -asetuksen. No, piilottamisen voi tehdä onneksi muullakin kuin overflowilla :)
Muoks #2!
Nyt linkin koodi on päivitetty käyttämään left: -20000em
Korkeus asettuu Merrin mallissa oikein, mutta miten saisi kikkailtua nuo kuvat
aukeamaan vasempaan reunaan Olipa sanan O:n tasalle.
tässä vielä esimerkkiä tilanteesta.
http://veijola.net/testi/absrel.html
Eikö olisi hyvä, että kuva ei menisi vaakasuunnassa yli reunan? Eli, jos kuva ei mahdu ruutuun ilman vierityspalkkia, kuva käännettäisiin vasemmalle puolelle?
Nyt noi kuvat aukeaa niinkuin pitääkin, mutta joka kuva on määritetty
yksitellen vaakasuunnassa omalle paikalleen.
http://veijola.net/testi/absrel.html
Jos sivu ei ole ylipitkä eli ei sivua tartte vierittää alaspäin sivupalkista, eikö olisi kätevämpi että kaikki kuvat avautuisi täsmälleen samaan kohtaan ruutua?
Osa sivuista on todella pitkiä.
Nykyinen ratkaisusi ei todellakaan toimi kovin hyvin, jos selainikkunan kokoa muuttaa. Kokeilepa.
totta, mutta lopulliset sivut ei ole skaalautuvia.
Tuli vaan mieleen itunen...
Minkä tyyppisiä kuvia niistä tulee sitten aukenemaan?
Voisiko javascriptin jokin valmispaketti olla hyvä.... vaikka lightbox tai jokin vastaava? Tai siinä muistaakseni on pienoiskuva, eikä teksti, josta avataan kuva...mutta kai tekstiversiokin siitä ehkä löytyy?
Jos sitä hiukan muttaa, niin että klikkauksen sijaan hiiren vieminen tekstin päälle näyttää kuvan?
Kunhan vaan mietin... vaikuttaisi ulkoasuun mukavammin ;)
Aihe on jo aika vanha, joten et voi enää vastata siihen.