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
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.