Konradjustimagine Posted May 15, 2008 Share Posted May 15, 2008 I am creating a web site and need a grab and scroll method of navigation for one of the sub-pages because it is a large mapped image with links to different pages of the website. I have seen this way of navigation in Google map and programs like Photoshop when an image to too large to fit within the window. Is there a html or javascript code to emulate the grab and scroll tool? After some lengthy searching on the web I haven't found anything on the subject... Any ideas? Link to comment Share on other sites More sharing options...
Jesdisciple Posted May 15, 2008 Share Posted May 15, 2008 I think Google probably does that by listening to the mouse with JavaScript, using AJAX to contact the server, and returning a certain area of the map at a certain resolution from the server script to AJAX. I'm pretty sure that would be something like this (in PHP): <?phpheader('Content-Type: image/jpeg');$latitude = $_GET['latitude'];$longitude = $_GET['longitude'];$resolution = $_GET['resolution'];/* find that area of the map and output however much will fit in the IMG at the specified resolution - lots of complex math and API that I don't know the first of */?> Photoshop probably has a much more straightforward implementation, because it probably has a full programming language (like C++) to work with, and it doesn't have to mess with the server at all, since the image is local. Link to comment Share on other sites More sharing options...
justsomeguy Posted May 15, 2008 Share Posted May 15, 2008 That's right, Google maps sends the center coordinates and zoom level of the map to the server and receives the images back, and whatever overlays there are (streets, boundaries, etc). If your map is a small enough size where you don't have zooming, just one large image, then you can put the image in a div with overflow: hidden, size the div to whatever size you want the "window" to be where you look through to the image, and then have some Javascript to handle dragging. This might give you a start to the dragging: <html> <head> <title>drag test</title> <script type="text/javascript"> var dragging = false; var drag_el = null; var el_start_x = 0; var el_start_y = 0; var mouse_start_x = 0; var mouse_start_y = 0; </script> </head> <body> <div style="width: 300px; height: 300px; border: 1px solid black; overflow: hidden;"> <img style="position: relative; top: 0px; left: 0px;" src="http://www.google.com/intl/en_ALL/images/logo.gif" id="drag_image"> </div> <script type="text/javascript"> document.getElementById("drag_image").onmousedown = function(e) { dragging = true; drag_el = document.getElementById("drag_image"); el_start_x = parseInt(drag_el.style.left.substr(0, drag_el.style.left.length - 2)); el_start_y = parseInt(drag_el.style.top.substr(0, drag_el.style.top.length - 2)); if (!e) var e = window.event; mouse_start_x = e.screenX; mouse_start_y = e.screenY; return true; } document.getElementById("drag_image").onmouseup = function(e) { dragging = false; return true; } document.onmousemove = function(e) { if (dragging) { if (!e) var e = window.event; drag_el.style.left = (el_start_x + (e.screenX - mouse_start_x)) + "px"; drag_el.style.top = (el_start_y + (e.screenY - mouse_start_y)) + "px"; } return true; } </script> </body></html> That has a few problems, it doesn't work exactly right in IE or Firefox, it starts to drag then stops and drags after you release. I'm not sure why, maybe someone else can figure it out. It works as expected in Opera. Link to comment Share on other sites More sharing options...
Jesdisciple Posted May 16, 2008 Share Posted May 16, 2008 Firefox and IE are thinking that you want to drag the image *to* something, like the location bar or an image editor. I figured out how to circumvent that by making it look like it's not an image (to the browser). (I was making it object-oriented to help me debug it, but the bug persisted until I changed the IMG to a DIV and put the image URL as its background-image.) <html> <head> <title>drag test</title> <script type="text/javascript"> function ImageScroller(image, testing){ var that = this; if(typeof(image) == "string"){ image = document.getElementById(image); } image.onmousedown = function(e){ ImageScroller.drag_obj = that; that.el_start_x = this.offsetLeft; that.el_start_y = this.offsetTop; if (!e) var e = window.event; that.mouse_start_x = e.screenX; that.mouse_start_y = e.screenY; return true; } image.onmouseup = function(e){ ImageScroller.drag_obj = null; return true; } this.image = image; this.testing = testing; this.el_start_x = 0; this.el_start_y = 0; this.mouse_start_x = 0; this.mouse_start_y = 0; } ImageScroller.prototype = { drag_obj: null } window.onload = function(){ document.onmousemove = function(e){ if (ImageScroller.drag_obj){ if (!e) var e = window.event; ImageScroller.drag_obj.image.style.left = (ImageScroller.drag_obj.el_start_x + (e.screenX - ImageScroller.drag_obj.mouse_start_x)) + "px"; ImageScroller.drag_obj.image.style.top = (ImageScroller.drag_obj.el_start_y + (e.screenY - ImageScroller.drag_obj.mouse_start_y)) + "px"; } return true; } var scroller = new ImageScroller('drag_image'); } </script> </head> <body> <div style="width: 300px; height: 300px; border: 1px solid black; overflow: hidden;"> <div style="width: 100%; height: 100%; position: relative; top: 0px; left: 0px; background-image: url('http://www.google.com/intl/en_ALL/images/logo.gif');" id="drag_image"> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
Konradjustimagine Posted May 17, 2008 Author Share Posted May 17, 2008 Thank you very much! The Code given by 'justsomeguy' gives the result I need. I attached image mapping links associated with the different sections of the image without any problems. However, the way in which the image must be grabbed in Firefox and IE posses a problem. The code given by 'Jesdisciple' works flawlessly in the grabbing action but crops the any part of the image outside of the set <div> coordinates and I don't have enough javascript experience to figure out how I can create links similar to ones created through image mapping on a movable background. Thanks again to anyone looking into this problem, I appreciate it greatly:) Link to comment Share on other sites More sharing options...
justsomeguy Posted May 19, 2008 Share Posted May 19, 2008 Ahh, good catch Jesdisciple, I didn't think of that. I wonder if we can have the function return false to disable image dragging and just run the Javascript code. I could test it out and see, but I guess I'll just sit here wondering instead.Konrad: if you're working with one specific image, you should be able to set the width and height of the div to the exact pixel size of the image to stop the cropping. That would be this part:<div style="width: XXXpx; height: YYYpx; position:... Link to comment Share on other sites More sharing options...
Konradjustimagine Posted May 20, 2008 Author Share Posted May 20, 2008 I figured that much but its only the fact that the image is not linkable that troubles me. Thanks though Link to comment Share on other sites More sharing options...
Jesdisciple Posted May 20, 2008 Share Posted May 20, 2008 You're right, JSG; that works! (I went back to the original because mine had a new bug.) <html> <head> <title>drag test</title> <script type="text/javascript"> var dragging = false; var drag_el = null; var el_start_x = 0; var el_start_y = 0; var mouse_start_x = 0; var mouse_start_y = 0; </script> </head> <body> <div style="width: 300px; height: 300px; border: 1px solid black; overflow: hidden;"> <img style="position: relative; top: 0px; left: 0px;" src="http://www.google.com/intl/en_ALL/images/logo.gif" id="drag_image"> </div> <script type="text/javascript"> document.getElementById("drag_image").onmousedown = function(e) { dragging = true; drag_el = document.getElementById("drag_image"); el_start_x = parseInt(drag_el.style.left.substr(0, drag_el.style.left.length - 2)); el_start_y = parseInt(drag_el.style.top.substr(0, drag_el.style.top.length - 2)); if (!e) var e = window.event; mouse_start_x = e.screenX; mouse_start_y = e.screenY; return false; } document.getElementById("drag_image").onmouseup = function(e) { dragging = false; return true; } document.onmousemove = function(e) { if (dragging) { if (!e) var e = window.event; drag_el.style.left = (el_start_x + (e.screenX - mouse_start_x)) + "px"; drag_el.style.top = (el_start_y + (e.screenY - mouse_start_y)) + "px"; } return true; } </script> </body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted May 20, 2008 Share Posted May 20, 2008 That's ###### TEAMWORK! Link to comment Share on other sites More sharing options...
Konradjustimagine Posted May 20, 2008 Author Share Posted May 20, 2008 Whoa! You two are the bomb! Have any suggested reading to get me on my way to this type of higher level javascripting? I know I'll be doing lots of research on how exactly the code you two have made works! Thanks again for all your help. I probably would be stumbling around in the dark for a good number of months trying to figure a half hazardous solution! Link to comment Share on other sites More sharing options...
justsomeguy Posted May 20, 2008 Share Posted May 20, 2008 As far as books go, I like O'Reilly as a publisher.http://www.oreilly.com/pub/topic/webdev?page=bestselling Link to comment Share on other sites More sharing options...
Guest CCVegita Posted June 5, 2008 Share Posted June 5, 2008 This thread was great! It was exactly what I was looking for to do basically the same thing.I have a question though. I tried to impliment this code with a "seating chart" for work and I am running into issues. Before, the map was displayed in a DIV with a scroll bar to move the map side to side. After searching the internet and running across this thread, I tried your drag and drop method. Everything worked fine for me in my test instance (just my maps and a div to move them around in), but when I dropped the test code into my page nothing works properly. I think the issue may be my other java code not playing well with the new code.I was able to upload it to a server for another project I am working on here.Here is the main code: @charset "utf-8";body { background-image: url(images/Spacer.gif); background-repeat: repeat-x; background-position: left top; margin-top: 0px; padding-top: 0px; background-color: #FFFFFF;}#HeaderImage { position:absolute; left:10px; top:2px; width:405px; height:95px; z-index:1;}#NavBar { position: absolute; left: 200px; top: 68px; width: 664px; z-index: 997;}#sideBar { width:157px; margin-top: 0px; background-color: #CBDCED; float: left; border: 1px solid #CCCCCC; padding: 0px;}#sideBar h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #333333; padding-left: 7px; color: #000000; background-color: #336699; margin: 0px; padding-top: 0.2px; padding-right: 0px; padding-bottom: 0px; text-align: left; border-top-width: 1.5px; border-top-style: solid; border-top-color: #999999; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCCCCC; border-left-color: #333333;}#sideBar ul { margin: 0px; padding: 0px;}#sideBar ul a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; color: #000000; margin: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; text-align: left; text-decoration: none; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #CCCCCC; display: block; padding-left: 12px;}#sideBar ul a:hover { color: #000000; background-color: #6699CC;}#mainContainer { width: 980px; margin-right: auto; margin-left: auto; position: relative;}#mainContent { margin-top: 0px; margin-left: 167px; font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.2; border: 1px solid #CCCCCC; z-index: 500; background-color: #E6E6E6;}#mainContent #ZoomButtons { position: absolute; margin-right: auto; margin-left: auto; width: 447px; top: 551px; left: 269px;}#mainContent p { padding: 0px; margin: 0px;}#mainContent h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #333333; padding-left: 50px; color: #000000; background-color: #336699; margin: 0px; padding-top: 0.2px; padding-right: 0px; padding-bottom: 0px; text-align: left; border-top-width: 1.5px; border-top-style: solid; border-top-color: #999999; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCCCCC; border-left-color: #333333;}#Image_Map { background-repeat: no-repeat; overflow: hidden; height: 410px; width: 809px; cursor: move;}.clearFloat { font-size: 1px; line-height: 0px; clear: both;}#footer { background-color: #003399; border-top-style: solid; border-top-width: thin; text-align: center; color: #FFFFFF; border-top-color: #000000; font-size: 12px; margin-top: 5px;} I am thinking that the jave libraries (not 100% sure if that is the correct word to use?) are messing things up. If I comment out the first two lines, it picture displays properly but will not scroll and the Spry menus are messed up.Any ideas on what my issue is? Thanks in advance for any input!! :)Andrew Link to comment Share on other sites More sharing options...
justsomeguy Posted June 5, 2008 Share Posted June 5, 2008 It will be best to install something like Firebug for Firefox and use that to help you debug. Using that to find error messages will be quicker then trying to look through the code. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.