This is a very typical application of a background-position-x. The technical content is not high, but the idea is worth thinking about, proving that there are many things that can be adapted to DHTML. With the background map, if done more complex, with Ajax dynamic loading the background of the picture, but also a small map. I am not going to delve into this, because there are bottlenecks in the speed and efficiency of the script.
Preliminary knowledge:
Background-position-x-------------The X coordinate of the background image.
Background-position-y-------------the y-coordinate of the background image.
Event.clientx------------------------The X coordinate of the mouse.
Event.clienty------------------------The y-coordinate of the mouse.
JSON---------------------------------seems to be a popular word now, since the Ajax in action comes out, it's a lot more fire, and in a broad sense the role is a JavaScript associative array. JSON (JavaScript Object notation) is similar to this var o={name: "Never-online", Web: "Http://www.never-online.net", blog: "http:// Blog.never-online.net "} so that you can use an array relationship form such as O.name, O.web, or o[' name '],o[' Web '.
Problem Solving Ideas:
The main difficulty of this map is the accuracy of the coordinates, that is, the coordinates of the background-position when the mouse is moving.
If we solve the problem above, we have succeeded in half.
I used the usual method
coordinates = The coordinates that are moved with the mouse-the coordinates we have stored in the original.
The original coordinate method is: Neveronlinemap._wrapper. X = Event.clientx-parseint (X.backgroundpositionx);
That is, the current position of the mouse-the x-coordinate of the image background
Picture background coordinates = mouse position-original position
The y-coordinate is similar to the X coordinate and is not repeated. Neveronlinemap._wrapper. Y = Event.clienty-parseint (x.backgroundpositiony);
The source code is as follows:
<?xml version= "1.0" encoding= "UTF-8"?> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <ptml xmlns= "http://www . w3.org/1999/xhtml "> <pead> <title> neveronlinemap-http://www.never-online.net </title> ; Meta http-equiv= "Imagetoolbar" content= "no"/> <meta name= "Author" content= "Never-online" Bluedestiny "/>" Lt;meta name= "keywords" content= "never modules, Mozilla CSS, C #,. NET, Refercence, Bluedestiny, never-online"/> < Meta name= "description" content= "Bluedestiny, never-online"/> <meta "title" Name= "-content= Line.net "/> <meta name=" creator.name "content=" Kaiyuanlau, Never-online, bluedestiny "/> <style type=" t Ext/css "media=" All "title=" Default "> </style> <script type=" Text/javascript ">//<! [cdata[/** using JavaScript implement map Drag-neveronlinemap power By-never-online, BlueDestiny * web-http://www.never-online.net * email-bluedestiny ### 126.com ### Replace @ * Permission given to Use this script with any kind of the applications if * header lines are left unchanged. * * var neveronlinemap = {_wrapper:null, _viewer:null, _x:0, _y:0, _width: "100px", _height: " 100px ", _moved:false, _mapimage:" Yun_qi_img/20050420002401.jpg ", Init:function (o) {This._wrapper=o.wra Pper; This._width=o.width; This._height=o.height; this._x=o.x; THIS._Y=O.Y; This._mapimage=o.map; This._viewer=o.viewer; var X=this._wrapper.style; X.height=this._height; X.width=this._width; X.cursor= "Move"; x.backgroundimage= "url (" +this._mapimage+ ")"; x.backgroundpositionx=this._x; x.backgroundpositiony=this._y; x.backgroundrepeat= "No-repeat"; This._wrapper.onmousedown=this.start; This._wrapper.onmousemove=this.move; This._wrapper.onmouseup=this.end; }, Start:function (o) {var x=Neveronlinemap._wrapper.style; Neveronlinemap._moved=true; Neveronlinemap._wrapper. X = Event.clientx-parseint (X.backgroundpositionx); Neveronlinemap._wrapper. Y = Event.clienty-parseint (x.backgroundpositiony); Neveronlinemap.view_coordinate ({x:x.backgroundpositionx,y:x.backgroundpositiony}); }, Move:function () {if (!neveronlinemap._moved) return; var X=neveronlinemap._wrapper.style; X.backgroundpositionx=event.clientx-neveronlinemap._wrapper. X X.backgroundpositiony=event.clienty-neveronlinemap._wrapper. Y Neveronlinemap.view_coordinate ({x:x.backgroundpositionx,y:x.backgroundpositiony}); Neveronlinemap._wrapper.setcapture (); }, End:function () {neveronlinemap._wrapper.releasecapture (); Neveronlinemap._moved=false; }, View_coordinate:function (o) {neveronlinemap._viewer.innerhtml= "coordinates-x:" +o.x+ ", y:" +O.Y; } onload=function foo () {function Getelbyid (idstr) {return document.getElementById (IdSTR); } neveronlinemap.init ({Viewer:getelbyid ("Coordinateviewer"), Wrapper:getelbyid ("Mapwrapper"), X:0,y:0,width: "150px", Height: "200px", Map: "Yun_qi_img/20050420002604.jpg"})}//]]> </script> <body i d= "Www.never-online.net" > <div id= "mapwrapper" ></div> <div id= "Coordinateviewer" ></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
