Using javascript to "link" from html background image?

Question

Having looked elsewhere on the website it seemed to me to be a bit tricky to get a background image in html to be a link also. In looking around I stumbled across somebody's suggestion that using java script should do the trick. However in testing the idea out i have had no luck.

I would be very grateful if somebody could point out where i am going wrong.

I have the following html and javascript code:

<html>

<head>
<link href = "style1.css" rel = "stylesheet" type = "text/css">
</head>

<div id = "header">
Header
</div>

<body>

<div id = "body">

<div class = "container">

</div>
</div>

</body>

</html>

<script>
document.getElementById('container').onclick = function() {
window.location = 'http://www.google.com/';
}
</script>

I also have the following CSS:

#header{
width:100%;
height:50px;
background-color:black;
}

#body {
width:100%;
height:2000px;
background-image:url('uploads/1.jpg');
cursor:pointer;
}


.container{
 width: 1000px;
margin-right: auto;
margin-left: auto;
height: 1000px;
background-color:white;

}

There is literally like 10 ways to do this. Your code should work if you just either add an id to your div with the container class. However, I would probably do this without javascript as there is no need. If you need your anchor to behave like an div, just set it to display: block; — Leeish
– Leeish, Commented Feb 4, 2013 at 23:43

Christopher Marshall · Accepted Answer · 2013-02-04 23:38:51Z

2

You have .getElementById('container')

When container is actually a class.

can also do <div class="container" onClick="goToWebsite()"></div>

<script>
 function goToWebsite() {
 window.location = 'http://google.com';
}
</script>

answered Feb 4, 2013 at 23:38

Christopher Marshall

10.7k10 gold badges57 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hector Over a year ago

sorry that because i tried that also. It still doesn't work when it is "body".

Hector Over a year ago

oh it did...ever so sorry. Out of interest. Why doesn't it work when i have "getelementByClass" or whatever?

Jared Over a year ago

You would need to use getElementsByClassName

Hector Over a year ago

I have a problem. When I have getElementById('body') and not container for some reason I am linked to google - as an example - even when i click on the container. How would i go about making the link work exclusively for the body?

Christopher Marshall Over a year ago

The body tag encompasses the whole document. So your whole site inside <body id="body"> would be clickable. I suggest not to have that functionality on the body tag.

|

Jared · Accepted Answer · 2013-02-04 23:41:20Z

2

Have you tried to make the container one large link? The trick here is setting display:block. Also as of HTML5 this is perfectly valid.

HTML

<html>
<head>
   <link href = "style1.css" rel = "stylesheet" type = "text/css">
</head>

<div id = "header">
Header
</div>

<body>

    <div id = "body">

        <a class="container" href="http://www.google.com"></a>
    </div>

</body>

</html>

CSS

.container{
   display: block; 
   width: 1000px;
   margin-right: auto;
   margin-left: auto;
   height: 1000px;
   background-color:white;
}

answered Feb 4, 2013 at 23:41

Jared

12.5k1 gold badge37 silver badges39 bronze badges

2 Comments

Christopher Marshall Over a year ago

This would be the best approach.

Hector Over a year ago

My issue is resolved now. But i am certainly interested in doing as you suggested as well. I'll give it a go as well. Cheers

Beardy · Accepted Answer · 2013-08-08 13:22:58Z

0

You could do it with pure HTML as well for this example.

<a href="http://www.google.com"><div id="image-link"></div></a>

This way you have a link for that div and then in the style sheet you can add a background image to be click able. The CSS portion would look like this:

#image-link {
        background-image:url('untitled.jpg');
}

Just change the location of the background image to what ever of course.

answered Aug 8, 2013 at 13:22

Beardy

834 silver badges11 bronze badges

Collectives™ on Stack Overflow

Using javascript to "link" from html background image?

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related