473,951 Members | 27,062 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 2374
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('ht tp://example.com/');
}

</script>

</head>
<body onclick="clickB g(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('ht tp://example.com/');
}

</script>

</head>
<body onclick="clickB g(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.getEle mentById('eleme ntName').style. cursor='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
19418
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 user resizes the frame to be "too narrow". Right now, the source for that frame looks like this: <table border="1" width="100%"> <tr style="background-color:#C0C0C0">
14
35582
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
8235
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 there..But now it is.. <div class="one"><img src="img/someimage.gif" alt="" /><a href="index.php">Text bla bla bla</a></div>
9
13050
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 button be a part of the anchor. That is, I would like to click on /any/ place on the td/button surface and take the link. As it is now, the only clickable area is in the text itself.
3
9868
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 destination... Thanks!
9
2736
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 color to indicate to the user which cells are clickable). (I think I could achieve this by adding an image (with attached hyperlink) to each clickable cell but since this is a large table (7 x 30) I think this might be a slow solution). ...
3
8736
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 did it with a table. I then tried <a href="..."><table ...>...</table></a and it worked in Firefox but not in IE. I then found out that <tableshouldn't go inside <a>. So I put the <a href="..."inside every <tdin the table, but it doesn't cover...
3
5467
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 link does not work). For example, if the below content is included in the html page, I would like that page www.fruit.com can be loaded whenever I click it. However the javascript does not allow the page to be loaded, It would only work for the child...
2
1898
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
10173
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9995
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11607
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
11199
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
11377
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9908
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6237
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
4556
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3563
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 can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.