Making my page's Background Image clickable. Is this possible?

I want my HTML page to have a tiled background Image, which if clicked redirects to some set link in the Javascript.

However, I also want a content block that is above the background, that is not clickable, since if the user clicked in this content box, they wouldn't be clicking on the bkg image.

Any ideas on how to achieve this?

Thanks
nverfollowttAsked:
Who is Participating?
 
Michel PlungjanIT ExpertCommented:
Just take what's in the window.onload snippet here:
<html>
  <head>
  <title></title>
<script>
window.backgroundClick=true;
window.onload=function() {
  document.getElementById('centerPiece').onclick=function() { location='http://google.com/search?q=div' }
  document.getElementById('centerPiece').onmouseover=function() { window.backgroundClick=false }
  document.getElementById('centerPiece').onmouseout=function() { window.backgroundClick=true }
  document.onclick=function() {
    if (window.backgroundClick) location='http://google.com/search?q=background';
  }
}
</script>
  </head>
  <body style="background-color:green">
<div id="centerPiece" style="position:absolute; width:200px; height:200px; background-color:red">Hello</div>
  </body>
</html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Try Here
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  </head>
  <body onload="window.backgroundClick=true" 
  onclick="if (window.backgroundClick) location='http://google.com/search?q=background'" 
  style="background-color:green">
<div 
onmouseover="window.backgroundClick=false"
onmouseout="window.backgroundClick=true"
onclick="location='http://google.com/search?q=div'" 
 style="position:absolute; width:200px; height:200px; background-color:red">Hello</div>
  </body>
</html>

Open in new window

0
 
nverfollowttAuthor Commented:
Hey mplungjan that is all inline controls, any way to do this with strickly a JS include?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.