Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 879
  • Last Modified:

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
0
nverfollowtt
Asked:
nverfollowtt
  • 2
1 Solution
 
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
 
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
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.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now