22. september 2007 - 08:17
Der er
1 kommentar
onmouseover write.document
Jeg har en liste af billeder. Når man fører musen over et af billederne skal der vises et preview af billedet, dog skal alle billederne ikke loades fra start, men loades i øjeblikket hvor musen føres over.
Der skal sikkert være en lille timeout så billedet kan nås at blive hentet?
22. september 2007 - 09:47
#1
Selve preview-tingen lægger du i en div, der ikke vises fra start:
<div id="preview" style="position:absolute;z-index:999;display:none;" onmouseout="this.style.display='none';"><img id="imgPre" style="width:400px;height:300px;"></div>
Billederne sætter du så noget mouseover på:
<img src="pic01_thumb.gif" onmouseover="showPic(this);">
Og så laver du noget script, der kan håndtere dine kald:
<script type="text/javascript">
function getPos(elm) {//jumper
for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
return {x:zx,y:zy}
}
function showPic(src){
//Indsæt kilde til billedet, der skal vises
//Her udskiftes _thumb.gif med .jpg fra oprindelig kilde
document.getElementById("imgPre").setAttribute("src", src.getAttribute("src").replace(/_thumb\.gif/,".jpg"));
//Sæt positionen til billedets position
var picPos = getPos(src);
var st = document.getElementById("preview").style;
st.top = picPos.y + "px";
st.left = picPos.x + "px";
st.display = "block";
}
</script>
-- og timeout kommer helt af sig selv, men man kunne jo sætte siden til at hente billederne, når alt ellers er loadet !-)