473,508 Members | 2,130 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Make background clickable

Hey there,

On my page, i want to make my entire body background clickable without
disturbing my content area in my main div.

I tried putting a clickable div behind it all with a low z-index, but
that solution did not work out ...

Does anyone knows a solution to that?

Best regards,
Kristian

Jan 5 '07 #1
2 2359
I came about something like this:
-------------------------------------------------------

<script>
function clickBg(e) {
evt = e || window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // Safari bug
targ = targ.parentNode;

if (targ.id == 'body') {
window.open('http://example.com/');
}

</script>

</head>
<body onclick="clickBg(event);" id="body">

-------------------------------------------------------

I havent figured out how to control the cursor-style in different
browsers, but maybe i'll find a way :)

/kristian

Jan 5 '07 #2
Kristian wrote:
I came about something like this:
-------------------------------------------------------

<script>
function clickBg(e) {
evt = e || window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // Safari bug
targ = targ.parentNode;

if (targ.id == 'body') {
window.open('http://example.com/');
}

</script>

</head>
<body onclick="clickBg(event);" id="body">

-------------------------------------------------------

I havent figured out how to control the cursor-style in different
browsers, but maybe i'll find a way :)

/kristian

document.getElementById('elementName').style.curso r='pointer';

A list of all the shapes are here:
http://www.quirksmode.org/css/cursor.html

And some non-standard (firefox/opera) shapes here:
http://www.worldtimzone.com/mozilla/...s3cursors.html

You don't need to use javascript either really unless you need to force
the issue. It's just a stylesheet tag.

<div style='cursor: crosshair'>

Now whenever the user moves over that division the cursor will change to
a crosshair.

Nice solution to your original problem btw.

--
http://www.hunlock.com -- Musings in Javascript, CSS.
$FA
Jan 5 '07 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
19380
by: Kai Grossjohann | last post by:
I have a frame which is supposed to contain a list of links. The clickable area of each link comprises a picture followed by some text. I want the text to be cut at the right hand side when the...
14
35523
by: Jeff Gillingham | last post by:
I'm using a stylesheet to place a small 'background image' in the upper left corner of several pages. Is there a simple way of making that image a clickable link? Thanks.
3
8209
by: Gnolen | last post by:
Hi, I am wondering if someone could guide me in the right direction about this. How can I make div 'one' hover? Does not need to be clickable/link...It would be easy if the images was not...
9
13012
by: kojim | last post by:
Test page: http://www.key-horse.com/linkt.html I have a td that's styled to look something like a button, and on that button is anchor text. So far, I can't make the entire "surface" of the...
3
9850
by: Yeah | last post by:
Through CSS, is there a way to change the color of a table cell on a hover? By the way, the cell also contains a link - the text link and table cell mouseover should both be clickable to the link's...
9
2711
by: Paul W | last post by:
I'm using a Table webcontrol to display a 'grid' to the user. Various cells should be 'clickable' by the user (to run javascript). How can I make this happen? (currently I use the background cell...
3
8716
by: wolfing1 | last post by:
In several of my pages I need to show an area with a background image and HTML text in certain places. The restrictions I have is that I can't use javascript or CSS positioning like 'float', so I...
3
5429
by: Irocivan | last post by:
Hello, I download a nice collapse menu for free distribution from the internet. It works very well except that none of the parents nodes are clickable (i.e. when clicking on the parent node, the...
2
1877
by: laredotornado | last post by:
Hi, Let's say I have a background image for a table cell. It doesn't repeat and is right-aligned. ..cellBG { background: url('../images/mygf.gif') no-repeat; background-position: right; }
0
7123
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7326
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
7383
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
7046
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
7498
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
4707
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
1557
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
1
766
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
418
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.