Javascript background image linked code?

Discussion in 'Web Design and Development' started by amnost, Jul 19, 2010.

  1. amnost macrumors regular

    Joined:
    Feb 6, 2010
    Location:
    United States
    #1
    Can anyone tell me the proper Javascript code for a background image that is linked? :confused:

    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!
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    In short,
    PHP:
    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.
     
  3. amnost thread starter macrumors regular

    Joined:
    Feb 6, 2010
    Location:
    United States
    #3
    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? :confused:
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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.
     
  5. amnost thread starter macrumors regular

    Joined:
    Feb 6, 2010
    Location:
    United States
    #5
    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!
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    An element is just a tag.
    Code:
    #area {
     background: url('image.jpg');
    }
    HTML:
    <div id="area">...</div>
    PHP:
    var element document.getElementById('area');
    The path to your image is irrelevant for the JavaScript.
     
  7. amnost thread starter macrumors regular

    Joined:
    Feb 6, 2010
    Location:
    United States
    #7
    What is relevant? Would a URL link to the image work?
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    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.
     
  9. amnost thread starter macrumors regular

    Joined:
    Feb 6, 2010
    Location:
    United States
    #9
    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?
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    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.

    Code:
    window.onload = function() {
      [I]Code here is executed after the page is loaded[/I]
    };
     
  11. amnost thread starter macrumors regular

    Joined:
    Feb 6, 2010
    Location:
    United States
    #11
    I am still pretty confused :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.
     

Share This Page