DaniWeb IT Discussion Community

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - onClick question (http://www.daniweb.com/forums/thread122061.html)

still_learning

May 2nd, 2008 3:14 am

onClick question

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?

ShawnCplus

May 2nd, 2008 12:49 pm

Re: onClick question

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

May 2nd, 2008 8:22 pm

Re: onClick question

Thanks a bunch! That is exactly what I was looking for.

still_learning

May 2nd, 2008 9:33 pm

Re: onClick question

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

May 2nd, 2008 9:44 pm

Re: onClick question

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

May 2nd, 2008 10:04 pm

Re: onClick question

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

May 3rd, 2008 10:10 am

Re: onClick question

Not sure, just tested it and it works fine works.

~s.o.s~

May 3rd, 2008 12:13 pm

Re: onClick question

> 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

May 3rd, 2008 12:21 pm

Re: onClick question

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~

May 3rd, 2008 12:34 pm

Re: onClick question

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.

All times are GMT -4. The time now is 4:01 am.