Using <div onclick="""> to call an <a></a> link

[MattTheHat]

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.

[Menster]

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>

[MattTheHat]

cheers i'll give that a go

[Bojero]

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>

[Menster]

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.

[codejoust]

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.

[Bojero]

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! ;)

[MattTheHat]

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.

[codejoust]

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

[Killspree2012]

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

style="cursor:pointer;"