Build an AJAX Based Map Viewer in ASP.NET 2.0
page 2 of 7
by Xianzhong Zhu
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 32775/ 57

Achieving eagle-eye effect

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.


View Entire Article

User Comments

Title: ImageInfo   
Name: sliptnock
Date: 2008-10-08 10:45:34 AM
Comment:
In the listing 7 in public " ImageInfo [] " getmapinfo{} gives me a mistake " The type or the name of the space of names 'imageinfo' does not exist in the space of names 'MapViewer' (is reference absent of ensamblado?). To which it owes?






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-04-13 12:29:09 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search