...

View Full Version : On the moving of the mouse preview should other way



asamaiya
12-17-2009, 11:02 PM
area of an image on which the mouse is positioned should only show in the preview, not the full image .. is this posible if yes how ??


Plz suggest me something ...........:confused:

Samaiya

hdewantara
12-23-2009, 08:00 PM
Something like below?

<html>
<head>

<style type="text/css">
#page{
float: left;
margin: 32px;
}

#guide{
float: left;
width: 128px;
height: 128px;
border: 1px dashed black;
text-align: center;
}

#arrow{
float: left;
font-family: monospace;
}

#preview{
float: left;
width: 320px;
border: 1px solid black;
}

#viewport{
width: 256px;
height: 256px;
margin-top: 32px;
margin-left: 32px;
overflow: hidden;
}

#image1{
position: relative;
top: 0px;
left: 0px;
}

#preview p{
margin-left: 32px;
margin-right: 32px;
}
</style>

<script type="text/javascript">
var
zom=4;

function onmousemovef(ev){
var
a=ev;
b=document.getElementById("image1");
c="("+a.clientX+","+a.clientY+")";
with (b.style){
left=-Math.round((a.clientX-32)*zom)+"px";
top=-Math.round((a.clientY-32)*zom)+"px";
}
}

function initf(){
var
a=document.getElementById("guide");
b=document.getElementById("image1");
with (a){
addEventListener("mousemove",onmousemovef,true);
style.width=Math.round((b.clientWidth-256)/zom)+"px"; //adjust guide dimension to image1.
style.height=Math.round((b.clientHeight-256)/zom)+"px";
}
}

function donef(){
document.getElementById("guide").removeEventListener("mousemove",onmousemovef,true);
}

</script>
</head>

<body onload="javascript:initf();" onunload="javascript:donef();">
<div id="page">
<div id="guide"></div>
<div id="arrow">----------&gt;</div>
<div id="preview">
<div id="viewport">
<img id="image1" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/800px-Starry_Night_Over_the_Rhone.jpg"
alt="Vincent van Gogh's Starry Night Over the Rhone, painted in September 1888 at Arles, depicts the Rhône River at night."
title="Vincent van Gogh's Starry Night Over the Rhone, painted in September 1888 at Arles, depicts the Rhône River at night."
/>
</div>
<p>Vincent van Gogh's Starry Night Over the Rhone, painted in September 1888 at Arles, depicts the Rhône River at night.
Source: <a href="http://en.wikipedia.org/wiki/File:Starry_Night_Over_the_Rhone.jpg">en.wikipedia.org</a>
</p>
</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum