click-through to underlying element

[nutso fasst]

Hello.

Is there a way to make an element 'transparent' to mouse activity, such that
mouse events go to the underlying element? I have an absolutely-positioned
image element with transparency that partly overlaps another element. I want
mouse events on the overlapping image to go to the underlying element.

Thanks,
nf

[RobG]

nutso fasst wrote:

Hello.

Is there a way to make an element 'transparent' to mouse activity, such that
mouse events go to the underlying element? I have an absolutely-positioned
image element with transparency that partly overlaps another element. I want
mouse events on the overlapping image to go to the underlying element.

Thanks,
nf

Read here on how events work with the DOM.

<URL:http://www.quirksmode. org/js/contents.html#e vents>

Different browsers have different event models, however the behaviour
that you require is basically standard - or do you have a specific
example of an event not being passed to an 'underlying' element?
--
Rob

[nutso fasst]

"RobG" <rg***@iinet.ne t.auau> wrote in message
news:8s******** ********@news.o ptus.net.au...

<URL:http://www.quirksmode. org/js/contents.html#e vents>

Thanks for the reply and the link to the informative website. Unfortunately
I did not find what I needed, and perhaps my description of what I crave
wasn't clear.

I have two images. One is a panorama wider than most browser windows, which
I have put into a DIV that has been styled to clip on the right side. The
important part of the image is at the left side, but I want to give the
option to view the whole image. So I set an onclick event for the DIV, which
toggles the overflow property between "clip" and "auto". This way the image
can be scrolled if required but has no ugly scroll bars if not. The problem
is that there is a absolutely-positioned GIF image overlapping the bottom of
the wide image. Most of this overlap is in the transparent part of the GIF,
which presents two problems:

1. When someone clicks in the transparent part of the GIF, it does not
trigger the event attached to the overlapped DIV.

2. When the overflow property of the DIV is changed to "auto", a scrollbar
appears at the bottom of the image. The scrollbar is overlapped by the
transparent GIF, and is therefor inaccessible in the transparent areas of
the GIF.

Problem #1 can be overcome by attaching an event to the overlapping GIF, but
that is messy as I must then determine if the cursor is over the DIV.

So, my hope was that there was some way to deactivate the GIF to mouse
events, so that the handler for the overlapped DIV would get all events
where the GIF is overlapping. Otherwise it appears I'll have to trap events
for the GIF, determine if they are over the DIV, then change the z-order of
the DIV to bring it to the top so the scroll bar will be accessible.

nf

[RobG]

nutso fasst wrote:

"RobG" <rg***@iinet.ne t.auau> wrote in message
news:8s******** ********@news.o ptus.net.au...

<URL:http://www.quirksmode. org/js/contents.html#e vents>

Thanks for the reply and the link to the informative website. Unfortunately
I did not find what I needed, and perhaps my description of what I crave
wasn't clear.

I have two images. One is a panorama wider than most browser windows, which
I have put into a DIV that has been styled to clip on the right side. The
important part of the image is at the left side, but I want to give the
option to view the whole image. So I set an onclick event for the DIV, which
toggles the overflow property between "clip" and "auto". This way the image
can be scrolled if required but has no ugly scroll bars if not. The problem
is that there is a absolutely-positioned GIF image overlapping the bottom of
the wide image. Most of this overlap is in the transparent part of the GIF,
which presents two problems:

1. When someone clicks in the transparent part of the GIF, it does not
trigger the event attached to the overlapped DIV.

2. When the overflow property of the DIV is changed to "auto", a scrollbar
appears at the bottom of the image. The scrollbar is overlapped by the
transparent GIF, and is therefor inaccessible in the transparent areas of
the GIF.

Problem #1 can be overcome by attaching an event to the overlapping GIF, but
that is messy as I must then determine if the cursor is over the DIV.

So, my hope was that there was some way to deactivate the GIF to mouse
events, so that the handler for the overlapped DIV would get all events
where the GIF is overlapping. Otherwise it appears I'll have to trap events
for the GIF, determine if they are over the DIV, then change the z-order of
the DIV to bring it to the top so the scroll bar will be accessible.

Below is some code that does what you want. I copied a fair bit of
the stuff from quirksmode.org posted by FredOz a few days ago. It
detects the location of your clipping div, then sees if a click
happens over it based on the location of the click.

If it's a hit, the div's z-index is raised so you can get to the
scroll bars. When the user clicks away from the image, it is lowered
again and the overflow set back to hidden (there is no 'clip' unless
that is a Microsoft invention).

Careful with IE, clicks outside the div are not always in the
document (IE's page does not fill the window like other browsers do)
so sometimes clicking outside the image does not lower it again.
Just click over something.

Uses getElementById without testing, but otherwise should be pretty
solid. Lightly commented and tested in IE and Firefox.

The images I used are the logos from Google (a.gif) and Yahoo
(b.gif) - the Yahoo one has transperancy too.

Make sure you specify all needed dimensions in px as IE has a habit
of reporting things in whatever units they are set in (%, em, etc.)
where as Firefox tends to always report px if appropriate.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Image Overlap </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">

<style type="text/css">
..container { border: 1px solid red;}
</style>

<script type="text/javascript">

// Remember if we've raised the div with the image or not
var raised = false;

function doClick(e){
e = e || window.event;
var x = document.getEle mentById('Outer Div');
var xTLx, xTLy, xBRx, xBRy, msg;

// Get location of click
var eX = e.clientX + pXoffset();
var eY = e.clientY + pYoffset();

// Get bounding co-ords of image
xTLx = findPosX(x); // top left x
xTLy = findPosY(x); // top left y

// Add width & height
if (x.style && x.style.width) {
xBRx = xTLx + +x.style.width. replace(/px/,'');
}
if (x.style && x.style.height) {
xBRy = xTLy + +x.style.height .replace(/px/,'');
}
// Purely for show
msg = xTLx + ', ' + xTLy + '<br>' + xBRx + ', ' + xBRy;
msg += '<br>' + e.clientX + ', ' + e.clientY;

if ( eX > xTLx && eX < xBRx
&& eY > xTLy && eY < xBRy) {
if (!raised) {
x.style.overflo w = 'auto';
x.style.zIndex -= -100; // -ve converts z-index to number
raised = true;
}
msg += '<br><b>HIT</b>'; // Just for show

} else {
if (raised) {
x.style.overflo w = 'hidden';
x.style.zIndex -= 100;
raised = false;
}
msg += '<br>miss'; // Just for show
}
// More for show
msg += '<br>Raised: ' + raised + '<br>z-index: '
+ x.style.zIndex;
document.getEle mentById('xx'). innerHTML = msg; // Just for show
}

// From quirksmode.org
function findPosX(obj) {
var curleft = 0;
if (obj.offsetPare nt) {
while (obj.offsetPare nt) {
curleft += obj.offsetLeft
obj = obj.offsetParen t;
}
} else if (obj.x) {
curleft += obj.x;
}
return curleft;
}

// From quirksmode.org
function findPosY(obj) {
var curtop = 0;
if (obj.offsetPare nt) {
while (obj.offsetPare nt) {
curtop += obj.offsetTop
obj = obj.offsetParen t;
}
} else if (obj.y) {
curtop += obj.y;
}
return curtop;
}

// From quirksmode.org
function pXoffset(){
if (self.pageXOffs et) { // all except Explorer
return self.pageXOffse t;
} else if (document.docum entElement
&& document.docume ntElement.scrol lTop) {// Explorer 6 Strict
return document.docume ntElement.scrol lLeft;
} else if (document.body) { // all other Explorers
return document.body.s crollLeft;
}
}

// From quirksmode.org
function pYoffset(){
if (self.pageYOffs et) { // all except Explorer
return self.pageYOffse t;
} else if (document.docum entElement
&& document.docume ntElement.scrol lTop) {// Explorer 6 Strict
return document.docume ntElement.scrol lTop;
} else if (document.body) { // all other Explorers
return document.body.s crollTop;
}
}

</script>
</head>
<body onclick="doClic k(event)">

<div class="containe r" id="OuterDiv" style="
overflow: hidden; position: absolute; top: 50px; left: 100px;
z-index: 1; width: 100px; height: 100px;
">
<img src="a.gif" name="imageA"></div>
<div class="containe r" style="
position: absolute; top: 100px; left: 100px; z-index: 5;"

<img src="b.gif" name="imageB" style="z-index: 5"></div>
<br><span id="xx"></span>

</body>
</html>

--
Rob

[RobB]

nutso fasst wrote:

"RobG" <rg***@iinet.ne t.auau> wrote in message
news:8s******** ********@news.o ptus.net.au...

<URL:http://www.quirksmode. org/js/contents.html#e vents>
Thanks for the reply and the link to the informative website.

Unfortunately I did not find what I needed, and perhaps my description of what I crave wasn't clear.

I have two images. One is a panorama wider than most browser windows, which I have put into a DIV that has been styled to clip on the right side. The important part of the image is at the left side, but I want to give the option to view the whole image. So I set an onclick event for the DIV, which toggles the overflow property between "clip" and "auto". This way the image can be scrolled if required but has no ugly scroll bars if not. The problem is that there is a absolutely-positioned GIF image overlapping the bottom of the wide image. Most of this overlap is in the transparent part of the GIF, which presents two problems:

1. When someone clicks in the transparent part of the GIF, it does not trigger the event attached to the overlapped DIV.

2. When the overflow property of the DIV is changed to "auto", a scrollbar appears at the bottom of the image. The scrollbar is overlapped by the transparent GIF, and is therefor inaccessible in the transparent areas of the GIF.

Problem #1 can be overcome by attaching an event to the overlapping GIF, but that is messy as I must then determine if the cursor is over the DIV.

So, my hope was that there was some way to deactivate the GIF to mouse events, so that the handler for the overlapped DIV would get all events where the GIF is overlapping. Otherwise it appears I'll have to trap events for the GIF, determine if they are over the DIV, then change the z-order of the DIV to bring it to the top so the scroll bar will be accessible.

nf

Hi there nutso. I think there's a design flaw inherent in the whole
concept here, but I'll play along anyway. Calling one event handler
from another is no big deal, but attempting to use a system scrollbar
when it's underneath something...ees h. btw mozilla scrollbars are not
ugly! #:=)

Anyway...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

body {
background:
url(http://www.light-speed-web-graphics....st_00008.GIF);
}
#container {
position: relative;
width: 97%;
margin: 20px auto;
background: #000;
z-index: 2;
}
#xpander {
position: absolute;
left: 0;
top: 0;
width: 100%;
border: 4px #fff outset;
overflow: hidden;
}
#xpander img {
display: block;
border: none;
}
#cthru {
position: absolute;
left: 416px;
top: 386px;
width: 140px;
height: 140px;
z-index: 3;
}

</style>
<script type="text/javascript">

function expcon(obj)
{
if (document.getEl ementById)
{
obj.style.overf lowX = /\bscroll\b/.test(obj.style .overflowX) ?
'hidden' : 'scroll';
obj.style.overf low = /\bauto\b/.test(obj.style .overflow) ? 'hidden' :
'auto';
if ('undefined' != typeof obj.scrollLeft)
obj.scrollLeft = 0;
if (obj = document.getEle mentById('cthru '))
obj.style.zInde x = /((^$)|0|3)/.test(obj.style .zIndex) ? '1' : '3';
}
}

function routeclick(id)
{
var el;
if (document.getEl ementById
&& (el = document.getEle mentById(id))
&& 'undefined' != typeof el.onclick)
el.onclick();
}

</script>
</head>
<body>
<div id="container" >
<div id="xpander"
title="click to expand / contract"
onclick="return expcon(this)">
<img src="http://www.leaney.org/walks/photos/20040430jp.jpg" />
</div></div>
<img id="cthru"
onclick="routec lick('xpander') "
src="http://www.ueda.info.w aseda.ac.jp/~hiroto/Graphics/sample1.gif" />
</body>
</html>

[nutso fasst]

"RobG" <rg***@iinet.ne t.auau> wrote in message
news:tF******** ********@news.o ptus.net.au...

Wowza, thanks a bunch, but I'd already implemented it as I figured I'd have
to and it works fine. I set the onclick event for the two elements in
question. Then the only coordinate I need to be concerned with is the bottom
Y of the DIV. If the cursor is above or equal it's OK. The code:

var ediv = 0;
var eimg = 0;
var bot = 0;
var scroll = false;

function togglescroll(e) {
var cury = 0;
if (!e) var e = window.event;
if (e.pageY) {
cury = e.pageY;
} else {
if (e.clientY) cury = e.clientY + document.body.s crollTop;
}
if(cury <= bot) {
if(scroll) {
ediv.style.over flow="hidden";
scroll = false;
ediv.style.zInd ex=0;
} else {
ediv.style.over flow="auto";
scroll = true;
ediv.style.zInd ex=20;
}
}
}
// get global variables onload to streamline toggleclip
function getvars() {
if(document.get ElementById) {
ediv=document.g etElementById(" clipdiv");
eimg=document.g etElementById(" absoimg");
} else {
if(document.all ) {
ediv = document.all.cl ipdiv;
eimg = document.all.ab soimg;
}
}
if(ediv) {
ediv.onclick = togglescroll;
eimg.onclick = togglescroll;
bot = ediv.offsetTop + 150; // the height won't change
}
}

<body onload="getvars ()">

Clicking on the image toggles the scrollbar. In FF only the bottom bar
appears, in IE both bottom and left bars appear. Property 'clip' isn't MS,
t'was a typo.

take care,
nf

[RobG]

nutso fasst wrote:

"RobG" <rg***@iinet.ne t.auau> wrote in message
news:tF******** ********@news.o ptus.net.au...

Wowza, thanks a bunch, but I'd already implemented it as I figured I'd have
to and it works fine. I set the onclick event for the two elements in
question. Then the only coordinate I need to be concerned with is the bottom
Y of the DIV. If the cursor is above or equal it's OK. The code:

This is an interesting issue. If that is what you are going to do,
you may as well use RobB's method and fire the onclick from both
images - it's the simplest by far.

The issue is that the click goes down to the lowest element in the
branch of the DOM tree that was clicked on, not the one with the
lowest visual representation. So if the GIF you want to raise is on
a separate limb of the tree, its onclick won't be fired when you
click on the the transparent GIF.

An image can't be a child of another image, but you can wrap them
both in a div, put the onclick on that then let bubbling fire the
div's onclick but....

Put a div around both images (even one limited to the size of
the clipping div) and its onclick will be fired when the click
bubbles up from the clipped image. But it also gets fired from
events bubbling up from the transparent GIF too because it's higher
up the same branch of the DOM tree, so the result is exactly the same
as if you just put the onclick on both images.

So do that and keep things simple - anything based on pixel-perfect
locations of elements in the page is bound to fail sooner rather than
later.

--
Rob.

[RobB]

nutso fasst wrote:

"RobG" <rg***@iinet.ne t.auau> wrote in message
news:tF******** ********@news.o ptus.net.au...

Wowza, thanks a bunch, but I'd already implemented it as I figured I'd have to and it works fine. I set the onclick event for the two elements in
question. Then the only coordinate I need to be concerned with is the bottom Y of the DIV. If the cursor is above or equal it's OK. The code:

var ediv = 0;
var eimg = 0;
var bot = 0;
var scroll = false;

function togglescroll(e) {
var cury = 0;
if (!e) var e = window.event;
if (e.pageY) {
cury = e.pageY;
} else {
if (e.clientY) cury = e.clientY + document.body.s crollTop;
}
if(cury <= bot) {
if(scroll) {
ediv.style.over flow="hidden";
scroll = false;
ediv.style.zInd ex=0;
} else {
ediv.style.over flow="auto";
scroll = true;
ediv.style.zInd ex=20;
}
}
}
// get global variables onload to streamline toggleclip
function getvars() {
if(document.get ElementById) {
ediv=document.g etElementById(" clipdiv");
eimg=document.g etElementById(" absoimg");
} else {
if(document.all ) {
ediv = document.all.cl ipdiv;
eimg = document.all.ab soimg;
}
}
if(ediv) {
ediv.onclick = togglescroll;
eimg.onclick = togglescroll;
bot = ediv.offsetTop + 150; // the height won't change
}
}

<body onload="getvars ()">

Clicking on the image toggles the scrollbar. In FF only the bottom bar appears, in IE both bottom and left bars appear. Property 'clip' isn't MS, t'was a typo.

take care,
nf

[note: apologies if this is a duplicate post]

Hi there nutso. I think there's a design flaw inherent in the whole
concept here, but I'll play along anyway. Calling one event handler
from another is no big deal, but attempting to use a system scrollbar
when it's underneath something...ees h. btw mozilla scrollbars are not
ugly! #:=)

Anyway...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

body {
background: url(

http://www.light-speed-web-graphics....st_00008.GIF);
}
#container {
position: relative;
width: 97%;
margin: 20px auto;
background: #000;
z-index: 2;
}
#xpander {
position: absolute;
left: 0;
top: 0;
width: 100%;
border: 4px #fff outset;
overflow: hidden;
}
#xpander img {
display: block;
border: none;
}
#cthru {
position: absolute;
left: 422px;
top: 386px;
width: 140px;
height: 140px;
z-index: 3;
}

</style>
<script type="text/javascript">

function expcon(obj)
{
if (document.getEl ementById)
{
obj.style.overf lowX = /\bscroll\b/.test(obj.style .overflowX) ?
'hidden' : 'scroll';
obj.style.overf low = /\bauto\b/.test(obj.style .overflow) ?
'hidden' : 'auto';
if ('undefined' != typeof obj.scrollLeft)
obj.scrollLeft = 0;
obj.title = /version/.test(obj.title ) ?
' click to reset...' : ' click for full-size version...';
if (obj = document.getEle mentById('cthru '))
obj.style.zInde x = /((^$)|0|3)/.test(obj.style .zIndex) ?
'1' : '3';
}
}

function routeclick(id)
{
var el;
if (document.getEl ementById
&& (el = document.getEle mentById(id))
&& 'undefined' != typeof el.onclick)
el.onclick();
}

</script>
</head>
<body>
<div id="container" >
<div id="xpander"
title=" click for full-size version..."
onclick="return expcon(this)">
<img src="http://www.leaney.org/walks/photos/20040430jp.jpg" />
</div></div>
<img id="cthru"
onclick="routec lick('xpander') "
src="http://www.ueda.info.w aseda.ac.jp/~hiroto/Graphics/sample1.gif" />
</body>
</html>

[nutso fasst]

"RobB" <fe******@hotma il.com> wrote in message
news:11******** **************@ z14g2000cwz.goo glegroups.com.. .

Hi, Rob. Your example looks pretty straightforward , but it doesn't account
for 'cthru' only partially overlapping 'xpander'. Also, I don't understand
statements like "/\bscroll\b/.test(obj.style .overflowX)." Can you explain?

Thanx,
nf

[nutso fasst]

"RobG" <rg***@iinet.ne t.auau> wrote in message
news:42******** *************** @per-qv1-newsreader-01.iinet.net.au ...

This is an interesting issue. If that is what you are going to do,
you may as well use RobB's method and fire the onclick from both
images - it's the simplest by far.
But also fires over the overlapping image where it doesn't overlap.
So do that and keep things simple - anything based on pixel-perfect
locations of elements in the page is bound to fail sooner rather than
later.

Bound to fail? What I wrote works with FF and with IE all the way back to
v.4.0, and standardization is improving. But there is a way to do it that
doesn't rely on coordinates and doesn't need an event on the overlapping
image: another div that overlaps both. Simple, really. I've removed IE 4's
document.all support for clarity...

<!-- nutso fasst's umpteenth solution -->
<script type="text/javascript">

var cdiv=0;
var tdiv=0;

function togglescroll(e) {
if(cdiv.style.z Index!=0) {
cdiv.style.over flow="hidden";
cdiv.style.zInd ex=0;
tdiv.style.zInd ex=10;
} else {
cdiv.style.over flow="auto";
cdiv.style.zInd ex=10;
tdiv.style.zInd ex=0;
}
}

function getvars() {
cdiv=document.g etElementById(" clipdiv");
tdiv=document.g etElementById(" topdiv")
cdiv.onclick = togglescroll;
document.getEle mentById("topcl ick").onclick = togglescroll;
}
</script>

<style type="text/css">
..rel { position: relative }
#topdiv { position: relative; z-index: 10 }
#topclick { position: absolute; text-align: left;
width: 100%; height: 150px }
#clipdiv { position: relative; width: 100%; height: 150px;
text-align: left; overflow: hidden }
#absimg { position: absolute; top: -60px }
</style>

<body onload="getvars ()">
<div id="topdiv"><di v id="topclick">& nbsp;</div></div>
<div id="clipdiv"><i mg height=150 src="images/wideimg.jpg" alt="wide
image"></div>
<table align="right" width=300 cellpadding=0 cellspacing=0 border=0>
<tr>
<td width=300 height=228 valign="top" align="left"><d iv class="rel"><im g
id="absimg" width=300 height=288 src="images/diamondshape.gi f"
alt=""></div></td>
</tr>
....

With document.all support added works with IE4 and later, also works with
FF.