Hogy leeht azt megcsinálni, ha egy képre rámutatok, akkor jelenjen meg teljes méretben és közben az oldalam ne csússzon el?
<img src="http://OLDALAMCIME/foto.png" style="width: 100px; height: 100px;" onmouseover="this.style.width=783 + 'px'; this.style.height=554 + 'px';" onmouseout="this.style.width=180 + 'px'; this.style.height=127 + 'px';">
Ez nem lenne rossz, de sajna az egész oldal elcsúszik.
Olyasmi kellene, mint ez http://www.digitalia.be/demo/slimbox/ csak ne kattintásra, hanem ha ráviszem a kurzort.
Célszerűbb lenne onmouseoverre újra meghívni a képet, vagyis inkább egy blokk-képességű elemben meghívni, mondjuk div-ben, ami absolute pozicionálású.
pl:
<div id="bigpic" style="position: absolute; display: hidden;" onmouseout="this.style.display = 'none';"></div>
<img src="http://OLDALAMCIME/foto.png" style="width: 100px; height: 100px;" onmouseover="open('http://OLDALAMCIME/foto.png');">
javascript:
function open(image) {
imgcontainer = document.getElementById("bigpic");
imgcontainer.innerHTML = "<img src=\""+image+"\" alt=\"kép\" />";
imgcontainer.style.display = "block";
};
Persze ezt lehet fokozni bármilyen egyéb trükkel, például jquery használata erősen megkönnyíti az ilyen trükköket, és lehetővé teszi különféle animációk használatát is.
A rejtett divet ne felejtsd pozícionálni, és egyéb css "szépítkezés" is elfér rajta. A beszúrt kép-tartalmon is lehet fokozni persze.
Ez csak egy alap.
Sok sikert!
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!