nutso said:
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.getElementById('OuterDiv');
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.overflow = '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.overflow = '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.getElementById('xx').innerHTML = msg; // Just for show
}
// From quirksmode.org
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}
return curleft;
}
// From quirksmode.org
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop
obj = obj.offsetParent;
}
} else if (obj.y) {
curtop += obj.y;
}
return curtop;
}
// From quirksmode.org
function pXoffset(){
if (self.pageXOffset) { // all except Explorer
return self.pageXOffset;
} else if (document.documentElement
&& document.documentElement.scrollTop) {// Explorer 6 Strict
return document.documentElement.scrollLeft;
} else if (document.body) { // all other Explorers
return document.body.scrollLeft;
}
}
// From quirksmode.org
function pYoffset(){
if (self.pageYOffset) { // all except Explorer
return self.pageYOffset;
} else if (document.documentElement
&& document.documentElement.scrollTop) {// Explorer 6 Strict
return document.documentElement.scrollTop;
} else if (document.body) { // all other Explorers
return document.body.scrollTop;
}
}
</script>
</head>
<body onclick="doClick(event)">
<div class="container" 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="container" 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>
