Add Link to DIV via external .js

mrblu

02-11-2009, 06:12 PM

Hello guys and thank you for your help with this. I'm pretty new @ Javascript so please have patience. I'm Pretty Sure this must be very easy to do but I have no idea how to begin.

I am currently using this method for making a DIV into a link

<div id="header" onclick="location.href='index.php';" style="cursor:pointer;"><a href="#"></a></div>

Works Fine but having to change 10+ pages everytime I change a banner it's not working for me anymore. So I'm thinking there must be a way of adding the <a href=""> with javascript through an external .js file on load.

Something like:

function load()
{

var bannerLink = document.createElement('a');
link.setAttribute('href', '/ontour.aspx');
document.getElementById("r-prom").appendChild(bannerLink);
}

and maybe use this (http://web-kreation.com/index.php/html-css/making-div-a-link-javascript-vs-css/) css technique to make the whole div into a link.

I really Appreciate any help I can get on this.

:cool:

A1ien51

02-12-2009, 02:22 AM

Why don't you style your link to be like a div?

Set the display to be block.

Eric

mrblu

02-12-2009, 08:07 PM

Like I said This is all new to me, so how would I approach doing this?

Edited to Add:

Thanks A1ien51. for your help. This might be super easy for you guys but for a complete newb like me it was a great deal hehe.

I'm attaching the code so newbs like me who are looking for a way of doing this might find it.

The External Javascript

function link() {

var theLink = document.createElement('a');
theLink.setAttribute('href', 'http://www.apple.com');
document.getElementById("yourDiv").appendChild(theLink);

}

window.onload=link;

The CSS

#yourDiv
{
width: 290px; height: 240px;
background: black url() top center no-repeat;
margin: 0 0 10px 0; float: left;
}
#yourDiv a
{
display: block;
width: 100%;
height: 100%;
}
#yourDiv a:hover
{
cursor: pointer;
}

The HTML

<html>
<head>
<title></title>
</head>
<body>
<div id="yourDiv"></div>
</body>
</html>

thanks

DanDutch

04-26-2011, 09:58 AM

GOLD! Thanks a lot for posting the end result code; very clear to see this simple example. :D