In this demo we use a .jpg image (image/big.jpg) and a small
picture of the original image with a scale of 1:5 (image/small.jpg) is shown in
the eagle-eye area. Careful readers may have noticed from Figure 1 that most of
the thumbnail image is translucen, and only in the middle box can the real
image be seen. You can drag the box area so as to change the visible area of
the thumbnail image. Listing 1 shows the code for the map viewing page.
Listing 1 –Maps.aspx
-<%@ Page language="c#" Codebehind="Maps.aspx.cs" AutoEventWireup="false" Inherits="MapViewer.Maps" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Maps</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript" src="javascript/dom-drag.js"></script>
<script language="javascript" src="javascript/JSBalloon.js"></script>
<script language="javascript">
var oThang, oHandle;
window.onload = function()
{
if (document.all || document.getElementById)
{
oThang = document.all ? document.all["thang"] : document.getElementById("thang")
oHandle = document.all ? document.all["handle"] : document.getElementById("handle")
Drag.init(oHandle, oThang, -250, -105, -250, -158);
oThang.onDragEnd = function(x, y)
{
refreshMap(x + 250, y + 250);
};
}
…//omitted
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<div id="banner"></div>
<h1>Ajax Map Viewer</h1>
<div style="LEFT:20px; OVERFLOW:hidden; WIDTH:245px; TOP:20px; HEIGHT:192px">
<img src="image/small.jpg">
<div id="thang" style="LEFT:-250px; POSITION:absolute; TOP:-250px">
<img
style="FILTER:alpha(opacity=50); LEFT:60px; POSITION:absolute;
TOP:8px" src="image/edge.gif">
<img
id="handle" style="LEFT:250px; WIDTH:100px; POSITION:absolute;
TOP:250px; HEIGHT:100px"
src="image/hole.gif">
</div>
</div>
<div id="map" style="WIDTH: 500px; HEIGHT: 500px">
</div>
</form>
</body>
</HTML>Here, please pay attention to the div object with id "thang"
whose left corner is at point (-250px,-250px), inside which there are two
pictures named edge.gif and hole.gif, respectively. The left corners of the two
pictures, edge.gif and hole.gif, lie in point (0,0) and (250px,250px),
respectively (relative to thang). Here, we especially design the two pictures
with the size of edge.gif being 600*600 whose center is an empty transparent
hole with size of 100*100. Here, image hole.gif is a picture of one-pixel and
is transparent with its position just beneath the middle part of image edge.gif
in the corresponding HTML code. Figure 2 illustrates the relative position of
each object in the web page.
Figure 2 –The relative position of each object
inside the maps.aspx page.
As seen from the figure above, we simulate the effect of a
piece of translucent glass by combinating edge.gif with hole.gif—the whole area
of the thumbnail image is completely visible while the other areas covered by
edge.gif are translucent. In this way, we succeeded in imitating the eagle-eye
effect by dragging the two images (i.e. edge.gif and hole.gif) with clearly
visible area changing correspondingly.
