Javascript background image linked code?

[amnost]

Can anyone tell me the proper Javascript code for a background image that is linked?

In other words, using javascript, How do I make it so clicking on my window body area takes you to a specific link? My website is techzang.com
Basically, the gray area on the two sidebars need to be able to be clicked on to take you to a link.

I need an answer really quick; it urgent.

Thanks!

 

[angelwatt]

In short,

var element = document.getElementById('someTagId');
element.onclick = function() {
  window.href = 'website.com';
};

This would go inside a function that is called after the page loads. The "someTagId" would be the id attribute of the element you're looking to be clicked on. There's other ways of getting to an element, but was just giving a simple example.

 

[amnost]

In short,

var element = document.getElementById('someTagId');
element.onclick = function() {
  window.href = 'website.com';
};

This would go inside a function that is called after the page loads. The "someTagId" would be the id attribute of the element you're looking to be clicked on. There's other ways of getting to an element, but was just giving a simple example.

Thanks. But, I'm not a major coder. So, what places exactly in that code, do I fill in the image location/name and the link?

 

[angelwatt]

You don't give it a image location, you give it the element that contains the image. I described this in my other post. The link would go on the window.href line.

 

[amnost]

You don't give it a image location, you give it the element that contains the image. I described this in my other post. The link would go on the window.href line.

Ok, I understand where to put the link. But, I still don't understand how to tell it where my image is. Whats "an element that contains the image"?

If I tell you that my image is located here: /storage/Screen shot 2010-07-16 at 4.46.03 PM.png?__SQUARESPACE_CACHEVERSION=1279480279929

And the website I want it to take me to is floatingcube.com

Can you tell me the completed code?

Thanks!

 

[angelwatt]

An element is just a tag.

#area {
 background: url('image.jpg');
}

<div id="area">...</div>

var element = document.getElementById('area');

The path to your image is irrelevant for the JavaScript.

 

[amnost]

An element is just a tag.

#area {
 background: url('image.jpg');
}

<div id="area">...</div>

var element = document.getElementById('area');

The path to your image is irrelevant for the JavaScript.

What is relevant? Would a URL link to the image work?

 

[angelwatt]

What is relevant? Would a URL link to the image work?

What I'm saying is that the JavaScript doesn't care about your image. You're not directly applying any effect to your image because that's not how this works. If you have an image set as a background, that's done with CSS. JavaScript can't set a behavior to a piece of CSS, only the HTML where the CSS is being applied.

To understand more you'll need to learn stuff on your own about JavaScript and events.

 

[amnost]

What I'm saying is that the JavaScript doesn't care about your image. You're not directly applying any effect to your image because that's not how this works. If you have an image set as a background, that's done with CSS. JavaScript can't set a behavior to a piece of CSS, only the HTML where the CSS is being applied.

To understand more you'll need to learn stuff on your own about JavaScript and events.

So basically, if I already have an image set as my background, adding that code you gave me will make it become linked? And that's all there is to it? I just inject that code to my website, filling in the blank with the link I want it to take me to? Or is there something else I must apply to the code you gave me?

 

[angelwatt]

So basically, if I already have an image set as my background, adding that code you gave me will make it become linked? And that's all there is to it? I just inject that code to my website, filling in the blank with the link I want it to take me to? Or is there something else I must apply to the code you gave me?

As I stated in post 2, the code would need to go into a function that is called after the page loads, such as the onload event. Below is an example of one way to do it, but could conflict with other code that may exist on the page.

window.onload = function() {
  [I]Code here is executed after the page is loaded[/I]
};

 

[amnost]

As I stated in post 2, the code would need to go into a function that is called after the page loads, such as the onload event. Below is an example of one way to do it, but could conflict with other code that may exist on the page.

window.onload = function() {
  [I]Code here is executed after the page is loaded[/I]
};

I am still pretty confused . Taking all that you've explained to me, could you please give me steps of what I need to do, ex.:
Step 1: ______
Step 2: ______

etc.

Please try to explain it in the easiest terms as possible.

Thank you very much.