Make the only clickable area the center of the screen

[thesmart1]

I want to make an image map (or maps) with links in certain areas of the picture (or pictures). This of course will be done in HTML. However, I want these links to be clickable only if they are in the center of the screen, like maybe in a "box" with customizable dimensions. The user will scroll around the page to navigate through the whole picture(s). If the user wants to go to a certain page, he/she will scroll the page to put the link in the center of the page and click on the link.

[greasonwolfe]

To be perfectly honest with you, while it might seem like a neat thing to be able to do, it sounds extremely counter-productive, un-user friendly and will likely drive visitors away in a hurry. I know it would drive me away without question. The very thought that as a visitor I would have to position a page just so in order to go to the link I want would be the type of thing that would make me not bother with the page at all and find one that is more user friendly.

It is one thing to have to scroll because the links are out of the viewing area, but to have to scroll to get those links in one particular spot on the screen before they can be accessed. . . and, for that matter, what about different screen resolutions?

Something to think about, perhaps?

[Beagle]

An interesting problem, despite all the usability nightmares you will run into.

You could setup all of your links with an onclick that check's the link's current location against a valid range and squelch the click if it's out of the "Active" area.

I've tried to think of a solution involving a modal div but I can't think of anything elegant.

Well, that's all I've got right now. If I think of something else I'll let you know.

[thesmart1]

You could setup all of your links with an onclick that check's the link's current location against a valid range and squelch the click if it's out of the "Active" area.

I don't know much JavaScript, so could you maybe post the code?

And about the screen resolution- I plan on having the page open up in a new window (one that I'll set dimensions for, probably around 600x500).

[felgall]

What about people who don't have Javascript enabled or even available.

What about handheld devices where the screen is nowhere near 600 pixels wide.

What about WebTV users where the width is fixed at 544 pixels.

What about web readers that don't ahve any size and just read out the page.

What about people who select the link using their keyboard instead of the mouse where there isn't a mouse position to test.

[thesmart1]

I am going to use this code for a game (like a racing game or Grand Theft Auto). I know there are hundreds, if not thousands, of games that use Macromedia Flash. Many people either do not have it and can't download it, have it disabled, or their computer doesn't support it. What about them?

[Beagle]

Yes, usability on the web is a big deal, but not all websites have to be that way, If you're making a game that pretty much requires a certain amount of display area to be playable, well, you lock out a bunch of potential players. At some point, you make the decision who you cut off. Most of us, I'm sure, don't code for netscape navigator 3, IE 5 for the mac, or even IE4 at this point.

Anyway, if what you're trying to disable is links to new pages, you'll have some work to do. It'd be much easier if the behaviors onclick were actually javascript functions and not separate pages, because people can always just type the url in directly. Regardless, anything that goes back to the server should be validated on the server too. This javascript stuff should be just for UI, not rules enforcement.


<script type="text/javascript">

function findPosX(obj)
{ // *** FROM: http://www.quirksmode.org/js/findpos.html ***
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}

function findPosY(obj)
{ // *** FROM: http://www.quirksmode.org/js/findpos.html ***
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
function validateClick(p_element)
{
// *** These are the top,left, bottom, and right hand extremes of the active area ***
var minX = 150;
var minY = 100;
var maxX = 500;
var maxY = 500;

eY = findPosY(p_element);
eX = findPosX(p_element);

return (eX <= maxX && eX >= minX && eY <= maxY && eY >= minY);
}
</script>

<a href="javascript:playerOpensTreasure();" onclick="return validateClick(this);">A Treasure</a>


That will check the top-left corner of the link being clicked to see if it's within the boundary of the active area. If you want to see if ANY part of the link is within the boundary, you can extend this code by getting the dimensions of the link when it's clicked and testing appropriately. I'll leave that up to you for some learning.