I was just wondering if there is anyway to do an AREA SHAPE COORDS with an onClick without using an image. For instance, I want to basically be able to click on the page somewhere (not on an image) and be able to do an onClick. Is this possible at all? If I just had a page with a plain colored background and nothing else on it, could I designate some area on that page using coordinates to perform an onClick?

Have an empty div with an online attribute ie.,

<div style='height:100px;width:100px;position:absolute;top:0px;left:50px;z-index:9' onclick='window.location="www.google.com";'>
</div>

With that, if someone clicks anywhere in that 100x100 box 50 pixels from the left edge they will go to Google.

Ok so it's me again. It did not end up working for some reason. I tried to just use the code you show above as a test with a blank page and it isn't working. Do you have any idea why this might be?

give the <div> tag a black border and background just so you can see where it is for testing purposes, you might be misclicking

Ok so here is the code I am using and all I am getting is a blank page.

<html>
<body>
<div 
style="border-color:#000000; background-color:#000000; height:100px; width:100px; position:absolute; top:0px; left:50px;
z-index:9" onclick='window.location="www.google.com";'>
</div>
</body>
</html>

> Ok so here is the code I am using and all I am getting is a blank page.

A few things:

- window.location is a host object (browser object); what you probably need to do here is window.location.href = 'url' . Even though the former works, it's an incorrect way of specifying the URI.

- Specifying window.location = 'www.google.com' will make the browser search for a file named 'www.google.com' in the location where you page is located. What you need is window.location.href = 'http://www.google.com/';

I got it to work eventually, but it was weird how I got it to work. I eventually just typed some text in to see if it would show up since nothing else was showing up. When I did this, a black box immediately showed up and it worked of course. So then I deleted the text and made it an empty DIV again. This time it worked. I have no idea why, but thanks much for your help.

Now I have another question for you guys. Let's say I want to perform another onclick for a different area on the page, but I want that area to overlap the previous one. So basically I want two active areas, the smaller one sitting on top of the larger one. How might this be done? Thanks

Just rinse and repeat.

<html>
<body>
<div 
style="border-color:#000000; background-color:#000000; height:100px; width:100px; position:absolute; top:0px; left:50px;
z-index:9" onclick='window.location="http://www.yahoo.com/";'>
</div>
<div 
style="border-color:#FFF; background-color:#FFF; height:30px; width:30px; position:absolute; top:50px; left:100px; z-index:10" onclick='window.location="http://www.google.com/";'>
</div>
</body>
</html>

Plus these questions are more of CSS than of Javascript. Any more queries along the same lines should be directed to the CSS forums.

This article has been dead for over six months. Start a new discussion instead.