|
JavaScript - Map Zooming
Hello everybody,
I need to write a javascript program that shows a map (.png image) on the web, and when the mouse moves over the map, it zooms the area around the pointer. (the zoomed part comes from a high resolution large image which actually should be cropped in order not to be larger than certain size.) I am a newbie in javascipt, and I have learned some, but still I have no idea how to create a such script. Do I need something extra like CSS, JQuery? I have no experience in web programming, so any help would be much appreciated. Similar TutorialsHi all, I have a map of a topographical area divided into districts. On mouseover i'd like the district to light up en when pressing a mousebutton I would like to zoom in, showing only that district... which is divided into teams. Is that possible with JavaScript? Are there example-script for this purpose? Hope someone can help. Nop01 I want to create something similar to what they achieve with this script: http://www.magictoolbox.com/magiczoom/ I know I could just download their script, but it's for a website that will be commercial in nature, and my cousin doesn't want to pay 29 pounds (which is a lot in AUD!) for it. I can use a rollover to display a larger image next to it, but I'm not sure on how to make the image move like that one does. Any help or suggetions would be greatly appreciated! Originally she just wanted something like the Lightbox script, so it's annoying her changing her mind now! Hello, I've been working on creating a script that zooms the entire webpage. Other than using "CTRL" + "+" keys (generally compatible with all browsers) to zoom in inside a web browser, I want to put it in a different format, as a button; it would be even easier to use. The problem is that I can't figure out how to make it work/ why it does not work. The following is my code: Code: <html>
<head>
<script type = "text/javascript">
document.onkeydown = function(zoomin) {
var key;
zoomin = zoomin || event;
key = zoomin.keyCode;
key == 43;
return false;
if (key == 17) {
return true;
function(zoomin){;
return false;
}
}
}</script>
</head>
<body>
<h1>Is this appearing to get bigger?</h1>
<button onclick="javascript: function('zoomin');">Zoom in</button>
</body>
</html>
Basically I was trying to use a DEC code as the code for the "CTRL" and "+" keys; then put them into a function. The "return true" under the IF statement means that I want it to hold so that the "+" key can be read as part of the script, and therefore make the page zoom in. Once that happens, it returns false. I would appreciate any help/ suggestions. I will also try to look for a way to reset the page (100%) or zoom out as well. Hello, I'm working on a small project and I'm new to javascript, basically on my canvas I have drawn a fault tree diagram that look like this View image: zoomzoom, what I want is too zoom in/out using the mouse wheel, and use mouse button to pan it to left/right. Don't really know where to stand so any advice would be helpful.
|
|||||||