Keskustelu: Nettisivujen teko: Kuvan näyttö ja piilotus

Eli olen miehelleni väsäämässä kotisivuja ja hän on jumiutunut ideaan että haluaa kuvien näkyvän niin että iso kuva näkyy vain sen aikaa kun kursori on pikku kuvan päällä. Ideana ilmeisesti hankaloittaa isojen kuvien kopioimista.

Onko mahdollista ja miten?
Saa vääntää ihan rautalangasta jotta tällainen vasta-alkajakin ymmärtää.

Kiitos jo etukäteen!

CSS:n visibility-ominaisuuden avulla voi näyttää tai piilottaa kuvan.

JavaScriptin onmouseover- ja onmouseout-tapahtumien avulla voi tunnistaa, milloin hiiri menee kuvan päälle tai sen ulkopuolelle.

Tässä on esimerkki asiasta:

<script>
function nayta(kuva) {
    kuva = document.getElementById(kuva);
    kuva.style.visibility = "visible";
}
function pois(kuva) {
    kuva = document.getElementById(kuva);
    kuva.style.visibility = "hidden";
}
</script>

<img id="pieni" src="pieni.png" onmouseover="nayta('suuri')" onmouseout="pois('suuri')">

<img id="suuri" src="suuri.png" style="visibility:hidden">

HopeaLilja kirjoitti:

Ideana ilmeisesti hankaloittaa isojen kuvien kopioimista.

Selaimet tarjoavat joko suoraan tai plug-innien avulla mahdollisuuden kopioida helposti mitä vain nettisivulta, joten kopiointia ei juuri voi vaikeuttaa, vaikka käyttäjällä ei olisi erityistaitoja. Ainoa keino estää tai edes merkittävästi vaikeuttaa kuvien kopiointia, on ettei laita niitä nettiin lainkaan tai suojaa sivuston.

Siinä mielessä on turha askarrella tuollaista, mutta voihan tuo olla muutenkin haluttu toiminto, että kuvat suurenevat ja pienenevät hiirtä siirtämällä. Se voi myös olla hyvin häiritsevää, riippuu sivustosta ja katsojasta. Huomauta nyt kuitenkin miehellesi, että jokainen nettiin pantu kuva on heti vapaassa maailmanlaajuisessa levityksessä, ja se on sitä myös sen jälkeen, kun olette poistaneet sen sivultanne. Se voi päätyä mihin tahansa käyttöön missä tahansa, eikä sille voi käytännössä mitään. Suomessa tapahtuvaan kaupalliseen käyttöön voi jotenkin vielä puuttua, siitä eteenpäin menee hankalaksi.

Kopionnin estämistä tehokkaampi keino on vesileiman lisääminen kuvan päälle. Eli kuvan voi edelleen kopioida, mutta sen jatkokäyttäminen hankaloituu jo sen verran, ettei kuvaa kannata käyttää. Myös kuvanlaatua kannattaa heikentää sen verran, ettei sitä voi kaupallisessa (esim. printtimediassa) käytössä käyttää.

Mies kyllä merkkaa kuvansa mutta on muutenkin mieltynyt tuohon ajatukseen yleisestikin. Lisäksi estää ainakin sen että kaikkein vähiten koneista tietävät eivät kopioi kuvia(monesti näkee näitä leimattuja kuvia jossain irc-galleriassa ja netlogissa jne. juurikin näiden juuri koneella selailunsa aloittaneiden toimesta ja sekään ei kauheasti kuulemma miestä houkuta).

Kiitos Antti Laaksonen tuosta koodista. Osaisiko kuvaan vielä neuvoa miten sen pikkukuvan saa pysymään paikallaan kun nyt tuntuu menevän sen ison kuvan alakulmaan. Eli siis miten sen pienen kuvan sijainnin sivulla saisi määritettyä kun sivulle olisi tulossa paljon kuvia eikä ole kovin kivan näköistä jos pikkukuvat ovat siellä hujan hajan ja pitkien välimatkojen päässä toisistaan.

Kuvien paikat voi valita CSS:n left- ja top-ominaisuuksien avulla, jotka tarkoittavat kuvan etäisyyttä sivun vasemmasta reunasta ja yläreunasta.

Tässä pieni kuva on kohdassa (100, 50) ja suuri kuva on kohdassa (300, 200):

<img style="position:absolute;left:100px;top:50px" id="pieni" src="pieni.png" onmouseover="nayta('suuri')" onmouseout="pois('suuri')">

<img style="position:absolute;left:300px;top:200px;visibility:hidden" id="suuri" src="suuri.png">