Tarkotus olisi saada backgroundkuvan päälle ilmestymään kuva kun hiiri siirretään tiettyjen (prosentti?)koordinaattien sisään, siten että kaikki tämä tapahtuu responsiivisesti välittämättä näytön koosta. Mielellään vielä html/CSS käyttäen. Minkälainen koodi voisi olla?
Tämä ainakin täyttää antamasi speksit:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Laatikkoesimerkki</title>
<style>
html {
height: 100%;
background: linear-gradient(135deg, #f00 0%, #0f0 50%, #00f 51%, #f0f 100%);
}
#alue {
background: transparent;
border: 1px solid red;
position: absolute;
left: 33%;
top: 33%;
right: 10%;
bottom: 10%;
}
#kuva {
position: fixed;
left: 10%;
top: 10%;
}
#alue:not(:hover) #kuva {
display: none;
}
</style>
</head>
<body>
<div id="alue">
<img id="kuva" src="data:image/gif;base64,R0lGODlhIAAgAPABAAAAAP///yH5BAAAAAAAIf8LSW1hZ2VNYWdpY2sHZ2FtbWE9MAAsAAAAACAAIAAAAmuMf4Chy45aApJKYyGjkWM/XRW4jVcZpp/ZsSrWxutyOrWr5fqz15r/IwWBECJth0wql8ymM/LsCaMyanGaM75+Ky0v67F4dZkQVooVM9XDM60MFsvn7hb9rszc5XkS/Pn3B0hnZSZIxddUAAA7">
</div>
</body>
</html>Toivottavasti et unohtanut vaatimuksista mitään olennaista.
Muokkasin metabolixin vastausta esimerkiksi, missä kuva tulee keskelle hoveroitua aluetta. Itse varmaan lähtisin rakentelemaan jotain Html map + javascript combolla jotta pääsisi helpommalla noiden alueiden luomisessa, riippuen vähän paljonko niitä on ja kuinka kompleksi itse alue on (onko alue esimerkiksi neliö, vai vaikka tähden muotoinen). Nopea github metsästys löysi ainakin Responsive image maps -plugarin, jonka esimerkissä on käytetty hyvinkin monimutkaisia alueita.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Laatikkoesimerkki</title>
<style>
html {
height: 100%;
background: linear-gradient(135deg, #f00 0%, #0f0 50%, #00f 51%, #f0f 100%);
}
#alue {
background: transparent;
border: 1px solid red;
position: absolute;
left: 33%;
top: 33%;
right: 10%;
bottom: 10%;
}
#kuva {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#alue:not(:hover) #kuva {
display: none;
position: relative;
}
</style>
</head>
<body>
<div id="alue">
<img id="kuva" src="data:image/gif;base64,R0lGODlhIAAgAPABAAAAAP///yH5BAAAAAAAIf8LSW1hZ2VNYWdpY2sHZ2FtbWE9MAAsAAAAACAAIAAAAmuMf4Chy45aApJKYyGjkWM/XRW4jVcZpp/ZsSrWxutyOrWr5fqz15r/IwWBECJth0wql8ymM/LsCaMyanGaM75+Ky0v67F4dZkQVooVM9XDM60MFsvn7hb9rszc5XkS/Pn3B0hnZSZIxddUAAA7">
</div>
</body>
</html>En antanut tarpeeksi hyviä speksejä, koska en saanut näillä onnistumaan.
Tarkennetaan hieman:
Jos ajatellaan että backgroundina on kuva kerrostalosta. Ja minulla kuva joka täyttää yhden kerrostalon ikkunan. Kuva on täsmälleen sen kokoinen että peittää näytölläni tietyn kerrostalon ikkunan. Kuvan tulisi myös skaalautua kerrostalon skaalautuessa, samassa suhteessa ja samalla paikalla asemoituna. Ikkunan oma kuva tulee esille ainoastaan jos hiiri tulee ikkunan päälle.
Onko tämä ylipäätään mahdollista toteuttaa? Ja jos on mahdollista, meneekö niin monimutkaiseksi, että pelkän "cool" efektin takia parempi pysyä yksinkertaisemmassa ratkaisussa?
Kiitokset vastauksista :)
Huomaathan, että mikäli kuvaa skaalataan samassa suhteessa kun koko muuttuu, aspect ratio muuttuu myös ja kuva "venyy" suhteessa parent -elementtiin.
Kouvostoliiton kerrostaloesimerkki
Parempi tapa olis joko a) cropata kuva parent elementin mukaan, säilyttäen aspect ration (kuva aina samankokoinen, mutta leikattu mahtumaan) tai b) asemoida aspect ration säilyttänyt responsiivinen kuva parent elementtiin (kuva pienenee tai suurenee parent elementin mukaan pitäen kuvasuhteensa ja vaikka keskitetään)
Suoratmutkiks kirjoitti:
Ikkunan oma kuva tulee esille ainoastaan jos hiiri tulee ikkunan päälle.
Eli ilmestyvän kuvan alue ja hover-alue ovatkin sama? Sittenhän tämä on vielä helpompaa: asettele vain kuva haluamaasi kohtaan absoluuttisella asettelulla ja laita se CSS:llä lähes täysin läpinäkyväksi, jos hiiri ei ole päällä.
<style>
#kerrostalo {
position: relative;
width: 40em;
height: 40em;
background: url('kerrostalo.png');
background-size: 100%;
}
#kerrostalo .ikkuna {
position: absolute;
}
#kerrostalo .ikkuna:not(:hover) {
opacity: 0.001; /* testausvaiheessa 0.5 on hyvä */
}
</style>
<div id="kerrostalo">
<img class="ikkuna" src="ikkuna.png" alt="" style="left: 20%; top: 20%;">
<img class="ikkuna" src="ikkuna.png" alt="" style="left: 70%; top: 50%;">
</div>Aihe on jo aika vanha, joten et voi enää vastata siihen.