HomeОбразованиеRelated VideosMore From: StartWebTutorials

Make a Div Clickable as a Link

57 ratings | 15229 views
Make a div tag clickable as a link using simple javascript. Add the following code to the div tag: onclick="location.href='http://www.google.com';" style="cursor:pointer;" Change the link to whatever link you wish to use. Link to website post: http://startwebdesign.co.uk/tutorials/?p=33
Html code for embedding videos on your blog
Text Comments (18)
Avinash Murmu (4 months ago)
Super Easy Super Awesome
Ethical Hacker (5 months ago)
Dalay
Scott Fichter (6 months ago)
Thanks for this. Many recommend surrounding the div in <a></a>. They claim that it is HTML 5 compatible but I find it to be buggy. I'm thinking this is more dependable. Anyone use this for WordPress? This was added to WordPress with not issue. Much thanks SWT! UPDATE: WP is removing the inline javascript. UG! I'm going to find out why and report back.
Gorm den orm (9 months ago)
Thanks :)
{RhymBil} (9 months ago)
I noticed there was a lot of bg noise. If you dont want to hear that come over to my channel.
Salivar Ravilas (11 months ago)
thanks a lot! would be better if you're not recording outside of a plane
Anderson Amorim (1 year ago)
Thanks =D
abdulrahman rateb (1 year ago)
HI i have a website "local" and i want to make a button or a link connected to a div like :i want to make when i click on HOME from top bar → to go to home div on the website, and ABOUT also from top bar → to go to the about part in the webpage and so on can you help me please ^^"!!!?
Rolands Bražis (1 year ago)
Thanks!
Kieran Link (2 years ago)
thanks helped a lot
Delirio Rimbombante (2 years ago)
Hi, thank you, i tried and it worked, but im having some troubles, i used an image (img src) inside the <div> then i can click on it, but the link covers an entire frame/row from left to right, even outside the image block, ive tried changing width and so, but nothing happens, here is the code, the image its a "google" image: <div id="box4" onclick="location.href='https://www.google.cl'" style="cursor:pointer;"><img src="Imagenes/Google.jpg"></div>
Delirio Rimbombante (2 years ago)
ive solved using 'float: left;' Thank you so much = D
StartWebTutorials (2 years ago)
Try this? <div id="box4" onclick="location.href='https://www.google.cl';" style="cursor:pointer;"><img src="Imagenes/Google.jpg"></div>
premier69 (2 years ago)
thank you! this was a dirty way of me fixing a half-baked module for Joomla using rereplacer :)
m3ta4.net (2 years ago)
Nice tut. Was wondering where would i put target="content" ? have tried <div class="button" onclick="location.href='home.html';" style="cursor:pointer;" target="content">Home</a></div> <div class="button" target="content" onclick="location.href='home.html';" style="cursor:pointer;">Home</a></div> and few others, but none have worked.
Mrugank Patankar (2 years ago)
Thank you sir you are a gift to mankind :')
Ola Vilbo (3 years ago)
Thank you!
Ali B. Gonzalez (3 years ago)
hi, nice video, i'm doing something like this! could you help me please. I have a div with a asp:image and a label inside, i want when users click the dialog the page show the login in a side of the div in a frame, not in other window! could you help me? thanks

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.