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:

"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?

Page co-ord methods may be OK now, but in future you may introduce
new stuff that messes with some browsers. The news site that I use
recently 'updated' their site so now Firefox has issues with
overlapping text and images until I force a re-fresh by
increasing/decreasing the font size. Not fatal, but a real PITA.

I would expect that page co-ord stuff would have problems in the
above scenario.
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...
Ah yes, I was most of the way there but my implementation was flawed.
Put the overlying div with the onclick in a separate branch so
neither image gets in the way. Musta been tired...

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

Clean, tidy, exactly as specified and no posX/Y - congratulations :-)

--
Rob

[nutso fasst]

Hmm, just noticed another nice thing about this solution. If I add some
titles to the HTML, e.g.:

<div id="topdiv"><di v id="topclick" title="click to scroll the
image...">&nbsp ;</div></div>
<div id="clipdiv" title="click to hide the scroll bar..."><img height=150
src="images/wideimg.jpg" alt="wide
image"></div>

Presto, contextual instructions!

nf

[RobB]

nutso fasst wrote:

"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'.
That's pretty cryptic...you said initially:

The problem is that there is a absolutely-positioned
GIF image overlapping the bottom of the wide image.

....which is exactly what I gave you. Make sure that the post wasn't
corrupted, there might be a control character or two in there, and that
long url is truncated.
Also, I don't understand
statements like "/\bscroll\b/.test(obj.style .overflowX)." Can you

explain?

obj.style.overf lowX = /\bscroll\b/.test(obj.style .overflowX) ?
'hidden' : 'scroll';

Uses the regular expression /\bscroll\b/, which will match the string
'scroll' (could have used /^scroll$/ or simply /scroll/ also); if it
matches, RegExp.test returns true which assigns 'hidden' to the
overflowX property, otherwise assigning 'scroll'. A toggle, in other
words. Note that, first time around, this property will be the empty
string, a result of the CSS having cascaded from a global stylesheet
rather than being assigned in the element's HTML and setting the Style
object directly. So the toggle works both initially, and after the
property is set.

obj.style.overf low = /\bauto\b/.test(obj.style .overflow) ?
'hidden' : 'auto';

Same for the overflow property. Setting both is required to suppress
the vertical scrollbar cross-browser.

if ('undefined' != typeof obj.scrollLeft)
obj.scrollLeft = 0;

Returns image to flush left if 'unexpanded'. Seemed logical.

obj.title = /version/.test(obj.title ) ?
' click to reset...' : ' click for full-size version...';

Swaps title (prompt).

if (obj = document.getEle mentById('cthru '))
obj.style.zInde x = /((^$)|0|3)/.test(obj.style .zIndex) ?
'1' : '3';

Flips z-index; if empty string ^$ (first-time around, Gecko, others)
sets to '1', 'underlapping' gif; if '0' (MSIE, first-time, illogically,
as it's also cascaded) does same; if '3' (2nd+ time, all), ditto;
otherwise sets to '3', restoring overlap).

The other function simply causes clicks on the gif to invoke the
onclick handler of the inner container div.

The above is easily modifiable for a variety of different behaviors;
kept it simple as I wasn't entirely sure how you wanted it to work.
Fire away...

cheers, Rob

[RobB]

nutso fasst wrote:

"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'.

Aargh...not all that 'cryptic' after all...I get it.

Rather than the rigmarole of getting click position, comparing to
graphic bottom position, etc. - took the easy way out, superimposing a
bottom-clipped version of the same gif within a common container, and
used that for event 'routing'. Not quite perfect cross-browser
(positioning variances) but very close. I'd normally use some simple
CSS hacks to equalize the display if this were my page (google 'css
hacks', if interested, for ways to hide rules from various browsers).
See if this is better:

<!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.com/
stripes_horiz_d ifferent/fastest_00008.G IF);
}
#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;
cursor: e-resize;
}
#xpander img {
display: block;
border: none;
}
#cthru {
position: absolute;
left: 422px;
top: 386px;
width: 140px;
height: 140px;
z-index: 3;
}
#cthru #trigger {
position: absolute;
left: 0;
top: 0;
width: 140px;
height: 140px;
clip: rect(auto auto 78px auto);
cursor: e-resize;
z-index: 2;
}
#cthru img {
position: absolute;
left: 0;
top: 0;
width: 140px;
height: 140px;
z-index: 1;
}

</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>
<div id="cthru">
<img id="trigger"
onclick="routec lick('xpander') "
src="http://www.ueda.info.w aseda.ac.jp/~hiroto/Graphics/sample1.gif" />
<img
src="http://www.ueda.info.w aseda.ac.jp/~hiroto/Graphics/sample1.gif" />
</div>
</body>
</html>

You'll need to paste that body {background: url(...); into a single
long url.

[nutso fasst]

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

Clean, tidy, exactly as specified and no posX/Y - congratulations :-)

Thanks. Most folks would consider it time badly spent, but sometimes the
solving of the problem is more important than the usefulness of the
solution.

nutso "the joy is in the journey" fasst

[nutso fasst]

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

Uses the regular expression /\bscroll\b/, which will match the string
'scroll' (could have used /^scroll$/ or simply /scroll/ also); if it
matches, RegExp.test returns true which assigns 'hidden' to the
overflowX property, otherwise assigning 'scroll'. A toggle, in other
words.
Ah, yes. I understand the toggle, I wasn't clear on the use of the regex.
Isn't
obj.style.overf low = (obj.style.over flow=='auto') ? 'hidden' : 'auto';
more efficient, and testing on the numeric value of zIndex more efficient
still? Having determined the zIndex, other tests are unnecessary, and one
'if()' is more efficient than multiple toggles.
Same for the overflow property. Setting both is required to suppress
the vertical scrollbar cross-browser.
I was under the impression overflowX was a subset of overflow, setting
overflow sets both overflowX and overflowY.
if ('undefined' != typeof obj.scrollLeft)
obj.scrollLeft = 0;

Returns image to flush left if 'unexpanded'. Seemed logical.

Good idea! Thanks.

Your 2nd solution looks good, tho it seems to me either an empty div or a
1-pixel-high totally-transparent gif sized with CSS to the overlapping area
would work better than a clipped duplicate of the overlapped image. On the
off chance of no stylesheet support, it wouldn't significantly affect
appearance. I put "&nbsp;" in my overlapping div out of fear that some
browser might ignore a click on an empty element, but perhaps that isn't
necessary. It works without it in IE and FF.

nf

[RobB]

nutso fasst wrote:

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

Clean, tidy, exactly as specified and no posX/Y - congratulations

:-)
Thanks. Most folks would consider it time badly spent, but sometimes the solving of the problem is more important than the usefulness of the
solution.

nutso "the joy is in the journey" fasst

As they say on that *Millionaire* show..."yes, final answer".

<!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: 95%;
margin: 20px auto;
background: #000;
z-index: 2;
}
#xpander {
position: absolute;
left: 0;
top: 0;
width: 100%;
border: 4px #eef outset;
overflow: hidden;
cursor: e-resize;
}
#xpander img {
display: block;
border: none;
}
#cthru {
position: absolute;
left: 422px;
top: 386px;
width: 140px;
height: 140px;
z-index: 3;
}
#cthru #trigger {
position: absolute;
left: 0;
top: 0;
width: 140px;
height: 140px;
cursor: e-resize;
z-index: 2;
}
#cthru img {
position: absolute;
left: 0;
top: 0;
width: 140px;
height: 140px;
z-index: 1;
}

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

function expcon(obj)
{
if (document.getEl ementById)
{
obj.style.overf lowX = /scroll/.test(obj.style .overflowX) ?
'hidden' : 'scroll';
obj.style.overf low = /auto/.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();
}

function getTopBottom(id )
{
var obj = document.getEle mentById(id),
ht = obj.offsetHeigh t,
y = obj.offsetTop;
while ((obj = obj.offsetParen t) != null)
y += obj.offsetTop;
return {top: y, bottom: y + ht};
}

function init()
{
if (document.getEl ementById)
{
var xb, ct, tg, bclip, adj = 4,
cp = 'rect(auto auto 0px auto)';
if ((xb = getTopBottom('x pander').bottom )
&& (ct = getTopBottom('c thru').top)
&& (tg = document.getEle mentById('trigg er'))
&& !isNaN(bclip = (xb - ct - adj)))
{
tg.style.clip = cp.replace(/0/, bclip);
}
}
}

window.onload = init;

</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>
<div id="cthru">
<img id="trigger"
title=" ~ click for full-size version ~ "
onclick="routec lick('xpander') "
src="http://www.ueda.info.w aseda.ac.jp/~hiroto/Graphics/sample1.gif">
<img
src="http://www.ueda.info.w aseda.ac.jp/~hiroto/Graphics/sample1.gif">
</div>
</body>
</html>

If you need to see the efficacy of this, add 'background: red;' to the
CSS for #cthru #trigger. 'adj' trims the clip to deactivate the border
area.

Again, googlegroups will probably mangle this, so, repaste any
truncated urls as needed, close tags, open in Notepad and look for any
control characters (dashes) inserted. Been haranguing those pinheads
for a week...

[RobB]

nutso fasst wrote:

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

Uses the regular expression /\bscroll\b/, which will match the string 'scroll' (could have used /^scroll$/ or simply /scroll/ also); if it matches, RegExp.test returns true which assigns 'hidden' to the
overflowX property, otherwise assigning 'scroll'. A toggle, in other words.
Ah, yes. I understand the toggle, I wasn't clear on the use of the

regex. Isn't
obj.style.overf low = (obj.style.over flow=='auto') ? 'hidden' : 'auto'; more efficient, and testing on the numeric value of zIndex more efficient still? Having determined the zIndex, other tests are unnecessary, and one 'if()' is more efficient than multiple toggles.
Suit yourself, it's not a repetitive/recursive routine. Go ahead and
fine-tune if you like, the gains will likely be minimal. It's also not
necessarily turn-key, this is a free forum !

z-index is a string, btw.

Same for the overflow property. Setting both is required to suppress the vertical scrollbar cross-browser.

I was under the impression overflowX was a subset of overflow,

setting overflow sets both overflowX and overflowY.
I used to be under a lot of impressions, too, until I started playing
around with CSS in different browsers. One ends up using what works. If
you can find another approach, more power to you. Read some CSS
ngs/forums/blogs to see how unstraightforwa rd presentational coding can
get. #;=)

(snip)
Your 2nd solution looks good, tho it seems to me either an empty div or a 1-pixel-high totally-transparent gif sized with CSS to the overlapping area would work better than a clipped duplicate of the overlapped image.
No (see below). Why download that old 1-pixel-transparency when you
have the perfect item at hand: the very *same* transparency, ready for
'layering'.
On the off chance of no stylesheet support [ .. ]
F-them.
I put "&nbsp;" in my overlapping div out of fear that some
browser might ignore a click on an empty element, but perhaps that isn't necessary. It works without it in IE and FF.

It does? Not here (ie6win2k)...

[nutso fasst]

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

It does? Not here (ie6win2k)...

True on ie6winXP as well. Sheee-it. Earlier IE do work OK. Well, this has
definitely been interesting. I dumped the overlapping div and put a
fully-transparent gif over the other image overlap and pointed its onclick
to togglescroll. AFICT this does work on IE4-6, FF and Opera. As for
overhead in getting the gif...it's 46 bytes, and I'm more concerned about
the possibility of misalignment.

Thanks much for all your input.

This is gratis work for a local library support group, BTW. Prob'ly only one
fellow (besides me) at the far right of the wide image who'll use the
scroll.

nf