i speak web stuff   web speak from a geek

Sometimes you want links to be large, for example a div might contain a paragraph with a link in it, and then when the div is clicked you want to follow that link. Pretty decent request, could be used for “Read More…” links.

Note - In this case I’ve used a <div>, but you could switch it for a <p> or whatever you like.

Firstly I’ve created a simple <div> and made it into a bigger box with some simple css, which is below:

<style>
div {position: absolute; top: 10px; left: 10px; background-color: blue; color: white; height: 300px; width: 500px; padding: 20px; }
a {color: white; }
</style>

<div>
<a href=”link.html”>Link</a>
</div>

Pretty simple. Now, lets review what we want to do (I like doing this, I don’t forget anything!)

• When we hover over the div, we need to let the user know it’s a link, maybe we change the BG colour or something.
• When the user then moves the mouse away from the div, we need to reverse what we did above:

Those first two can be done with CSS, but seeing as IE does not like using :hover on anything but links (IE6) in this tutorial I’ll do it in Javascript. But if you don’t want to use Javascript, and forget about IE6, then you can just use something like this:

div:hover {//CSS stuff here}

Ok, then what do we need to do?

• When the div is clicked, we need to get the URL from the link, and send the user there.

And surprise surprise, I’m going to use JQuery. (www.jquery.com). It’s a Javascript library designed to let anyone work with JS well. And it succeeds. Any way, check out my previous JQuery tutorials here, and also read the tutorials on www.jquery.com to get you started. Firstly, add our document.ready() code:

$(document).ready(function() {
});

Secondly, we can do the code for when the div is hovered over (mouseover in Js terms) and then un-hovered over (not a proper word I know), un-hovering being mouseout in Js. I’ve done something slightly different, I’ve given the variable borderstyle the value of the border property of the div, so we can set it back as the border property once the user is not hovering over the div anymore:

var borderstyle = $(”div”).css(”border”);
$(”div”).mouseover(function() {
$(this).css(”border”, “1px solid red”);});
$(”div”).mouseout(function() {
$(this).css(”border”, borderstyle); });

That’s all pretty straight-forward right? Using JQuery of course, we select the div and then use the css function to change the border property.

Now we have that, check it out in your browser and your div now acts like it should, the border changing when you hover over, but then changing back when you remove the mouse from the div. Now for the actual link. Using JQuery, I can get the value of the href attribute of the <a> in our div:

var url = $(”a”).attr(”href”);

And now using normal Javascript (Yep, that’s right I’m using normal Javascript! Shock horror!). Just remember, JQuery is only meant to make Javascript easier, JQuery is not a language itself. So, when the div is clicked, we need to change the location to the value stored in the variable url.

$(”div”).click(function() {
window.location = url;
});

And there you have it! Here is the full Javascript:

$(document).ready(function() {
var url = $(”a”).attr(”href”);
var borderstyle = $(”div”).css(”border”);
$(”div”).mouseover(function() {
$(this).css(”border”, “1px solid red”);});
$(”div”).mouseout(function() {
$(this).css(”border”, borderstyle); });
$(”div”).click(function() {
window.location = url;
});
});

And here is a working example!

Note - A few people have asked how to change the cursor to a hand and also show the location in the bottom bar of the browser - I’ll update soon!