/    Sign up×
Community /Pin to ProfileBookmark

Extremely large image map help

Copy linkTweet thisAlerts:
Apr 12.2009

I am in the process of making a large image map but the problem is that each clickable area is 5 pixels. The image size is 900px X 450px. I may change the clickable area to a smaller area if needed later on. The total clickable areas in the map with 5px each is 81000. This would be 81000 lines of code that would be generated on the client side. Is there an easier or faster way to use image maps?

to post a comment
HTML

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@atokatimauthorApr 13.2009 — I have decided to try and go with javascript mouse coordinates but I need to be able to track exact mouse coordinates inside the DIV only. Example : top left of the div would output 0,0 coordinates if the mouse is over it no matter what the screen resolution or if the screen has been scrolled. Is this possible and if so, how?
Copy linkTweet thisAlerts:
@TheBearMayApr 13.2009 — This might do the trick:

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var mouseX;
var mouseY

function trackMouse(evt) {
if (!evt)evt = event;
if (evt.pageX) mouseX = evt.pageX;
else if (evt.clientX)
mouseX = evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);


if (evt.pageY) mouseY= evt.pageY;
else if (evt.clientY)
mouseY = evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}

function dispLoc(){
imgMapObj = document.getElementById("imgMap");
imMouseX = mouseX - imgMapObj.offsetLeft;
imMouseY = mouseY - imgMapObj.offsetTop;
document.title="("+mouseX+","+mouseY+") Relative to Image: ("+imMouseX+","+imMouseY+")";
return new Array ( imMouseX, imMouseY);
}

document.onmousemove = trackMouse;

</script>
<style type="text/css">
body, html {
padding:0;
margin:0;
}
</style>
</head>
<body>
<div>
<img src="imagemap.jpg" id="imgMap" onclick="alert(dispLoc())" style="margin-left:800px; margin-top:800px;" />
<!-- margins are to make my image go offscreen -->
</div>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@atokatimauthorApr 13.2009 — It sort of worked in FF but it has a javascript error in IE ? Since my screen resolution is 1440x900, I am able to scroll up or down with the middle mouse button which throws off the X and Y coordinates for the mouse tracking. Here is the page that it is going on :

http://www.gothics-r-us.com/world-map.php

A member should be able to click on the map and the JavaScript will call an ajax function to post the coordinates to a php file which it will be used later on in the script. No matter what, the top left corner has to always be 0, 0 if it is possible.
Copy linkTweet thisAlerts:
@TheBearMayApr 13.2009 — Need set padding and margins to zero to make IE and FF agree (which I just added above), but the code above always returns (0,0) for me for the upper left corner of the image no matter what resolution, browser size or browser, and whether I use a wheel mouse or not.
Copy linkTweet thisAlerts:
@aj_nscApr 13.2009 — If you're going to use JS to make it work anyway, then, in my opinion, it's just as well to go with a server side image map - that way it will still work in browsers with JS disabled.

Arguments against server side image maps are they aren't very accessible - but seeing how yours won't be very accessible anyway to the non-traditional user (screen readers, text-only browsers, etc), then there's no harm done with a server side map.
Copy linkTweet thisAlerts:
@atokatimauthorApr 13.2009 — I did look into server side image maps, but since they require more server usage, I cannot go that route. At peak times, my hosting company sends me an email saying I am hitting my limit. This is why I am trying to stick with Javascript. I have been able to get really close to getting this to work but I need to know if adjusting math formulas with preset number would cause conflicts on other user's computers.

To explain a little better :

http://www.gothics-r-us.com/world-map.php

At the bottom of the image, it shows where the mouse is. The image is exactly 900 X 450 pixels. Once the mouse is inside the image, the X and Y show up. For some reason in FF, the coordinates are correct, but in IE6, they are 3 off. Would subtracting 3 pixels from the total only in IE be accurate on anyone's computer?
Copy linkTweet thisAlerts:
@atokatimauthorApr 13.2009 — ok, I found that the server load is not going to be that bad with a server side image map if i can figure out how to use the coordinates in a javascript function.

[CODE]<a href="javascript:void(0);"><img src="generatemap.php" width="900px" height="450px" ismap border="0"></a>[/CODE]
If you watch the status bar, it shows "javascript:void(0);?X,Y". Is there any way to get javascript to recognize these number without refreshing the page if a user clicks on the image?
Copy linkTweet thisAlerts:
@dannyhApr 16.2009 — Try the software

"Map Edit"

Cheers Danny
×

Success!

Help @atokatim spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...