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?
still_learning
0
Junior Poster in Training
Recommended Answers
Jump to PostHave 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.
Jump to Postgive the <div> tag a black border and background just so you can see where it is for testing purposes, you might be misclicking
Jump to PostNot sure, just tested it and it works fine works.
All 9 Replies
ShawnCplus
456
Code Monkey
Team Colleague
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.
still_learning
0
Junior Poster in Training
Thanks a bunch! That is exactly what I was looking for.
still_learning
0
Junior Poster in Training
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?
ShawnCplus
456
Code Monkey
Team Colleague
give the <div> tag a black border and background just so you can see where it is for testing purposes, you might be misclicking
still_learning
0
Junior Poster in Training
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>
ShawnCplus
456
Code Monkey
Team Colleague
Not sure, just tested it and it works fine works.
~s.o.s~
2,560
Failure as a human
Team Colleague
Featured Poster
> 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/';
still_learning
0
Junior Poster in Training
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
~s.o.s~
2,560
Failure as a human
Team Colleague
Featured Poster
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.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.