Is it possible to do something like this? <div id="btn1" onclick="//somehow call page2Link here"><a href="page2.html" id="page2Link">Page 2</a></div> Basically it's to try and make the text work with the a:hover text effect I have whilst making the whole layer sensitive to clicks.

i tried this already: <a href="page2.html" id="page2Link"><div id="btn1" ><a href="page2.html" id="page2Link">Page 2</a></div></a> but it's untidy and a bit rubbish is there a better way to do it neatly?

I know i could always call a JS function to do a parent.location thing but i would rather not if possible.

Hi there, have you tried:

<div id="blah" onclick="window.location = 'Your reference here'">
<a href="You can leave this blank">Your text here</a>
</div>

cheers i'll give that a go

You can leave out the <a> tag then because you can just use the div:hover.

<div id="myButton" onclick="window.location = 'http://google.com';">Page 2</div>

But, if you leave out the anchor tag the styles you've applied won't work... but i suppose you could just change them from a:hover etc.
to div:hover.

What I end up doing quite a bit, is making the div clickable, but allowing for people without javascript to access the link (such as search spiders).
One way to do this is using jquery --

$(function(){
$('div.link:has(a)').click(function(){
$(this).addClass('linked'); /*Allows for CSS hover and different styles for link clicks.*/
window.location = $(this).nearest('a').attr('href'); /*Go there! Only works with jquery 1.3 (due to the use of nearest. */
}); //End Click
}); //End OnReady

Which allows for the div to be clickable.

What I end up doing quite a bit, is making the div clickable, but allowing for people without javascript to access the link (such as search spiders).
One way to do this is using jquery --

$(function(){
$('div.link:has(a)').click(function(){
$(this).addClass('linked'); /*Allows for CSS hover and different styles for link clicks.*/
window.location = $(this).nearest('a').attr('href'); /*Go there! Only works with jquery 1.3 (due to the use of nearest. */
}); //End Click
}); //End OnReady

Which allows for the div to be clickable.

Mmmm jQuery! ;)

Thanks to all.

Problem now solved.


ps. Give JQuery a rest some of us like to code in an old school manner where all the code is ours rather than being cut & paste monkeys.

Thanks to all.

Problem now solved.


ps. Give JQuery a rest some of us like to code in an old school manner where all the code is ours rather than being cut & paste monkeys.

I wrote the jQuery javascript, It isn't cut+paste from somewhere else, but I do understand liking to use the 'old-school' methods... not much problem there, although jQuery (I think) helps it so you don't need to change any HTML to get the effect...
Its also sometimes hard to relearn something too...

dude... why make things difficult... CSS is your friend

style="cursor:pointer;"

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.