I investigated ways of displaying larger sized images on a web page. Thus developed code that has small thumbnail images positioned on the left and right sides of a two td table cell column page that when mouseOver'd switch to a larger image to display in the page. The reason for doing this is to limit the bandwidth required to load several full sized larger images into pages, to reduce image space of those larger images so as to not clutter up pages where text needs to be maximized, and given the greater space then available, include more available images into a page. The first method I used to implement this was with popup windows. However functional that had been, the blocking of that function by most users limits its practical usefulness. Note I am using IE-6.
I then coded this later code that has one serious problem of right td cell objects interfering with left td cell objects. The functional implication is that larger images have other objects interfering visually in layers above them. To debug such I simplified the code removing external css references, images, leaving just the span boxes, so as to make the debug code standalone. I ran this through the w3c validators. This is a link to the standalone debug file to view the problem and look at the source code:
The table structure of the page is a single row of two adjacent 50% width td cells.
Inside each td row cell is a bit of expalnatory text inside a paragraph and a small relatively positioned span box that has a child absolutely positioned span box slightly smaller inside. It is the child span boxes, boxa-click and boxb-click, that form half of javascript mouseOver and mouseClick switching statements. By mousing over either of these internal boxes, a different class becomes active in the span that switches to larger absolutely positioned boxes, boxa_mover and boxb_mover. Note that also leaves the background container span boxes at the page sides. I have positioned the larger boxes so they will overlap elements in the adjacent table cells if one narrows their browser window width a bit.
The basic problem that occurs that I have not been able to resolve is, regardless of what I do, whenever the larger box from the left td cell displays after a mouseover, the adjacent cell right boxes are not transparent so appear on top as though they had a higher layer value. Interestingly the text in the right td cell is correctly below the larger box. Conversely whenever the larger box from the right td cell displays after a mouseover, the adjacent cell boxes are correctly transparent so it appears below as though they had a lower layer value. Thus the problem is td cell position dependent only on one side.
Any settings of z-index in either td cells have no bearing on what occurs when absolute boxes overlap the span elements in the adjacent td row cells. That may be at the root of the problem due to peculiarities of the IE browser implemention. If I simplify the code so there is only a single absolute span element in each cell, the same issue occurs. However setting it up as I have done allows a better visual debug indication of what is occurring. Likewise removing the float terms has no effect.
If I change the position selector for boxa-mover or boxb-mover from absolute to relative, when a mouseOver is actuated, boxa-mover or boxb-mover, causes the columns to expand in width from 50%/50% to say 80%/20% instead of overlapping into the adjacent td row areas. Thus that tells nothing about the problem in absolute mode.
So it appears the problem is that positioned absolute boxes from the left td cell if overlapping absolutely postioned boxes in the right td cell, will display below their layer thus blocking full visibility.
I'm wondering if I'm missing something obvious and there is a simple solution to this or if I ought to just give up and consider it just another browser implementation limitation? ...David
I then coded this later code that has one serious problem of right td cell objects interfering with left td cell objects. The functional implication is that larger images have other objects interfering visually in layers above them. To debug such I simplified the code removing external css references, images, leaving just the span boxes, so as to make the debug code standalone. I ran this through the w3c validators. This is a link to the standalone debug file to view the problem and look at the source code:
The table structure of the page is a single row of two adjacent 50% width td cells.
Inside each td row cell is a bit of expalnatory text inside a paragraph and a small relatively positioned span box that has a child absolutely positioned span box slightly smaller inside. It is the child span boxes, boxa-click and boxb-click, that form half of javascript mouseOver and mouseClick switching statements. By mousing over either of these internal boxes, a different class becomes active in the span that switches to larger absolutely positioned boxes, boxa_mover and boxb_mover. Note that also leaves the background container span boxes at the page sides. I have positioned the larger boxes so they will overlap elements in the adjacent table cells if one narrows their browser window width a bit.
The basic problem that occurs that I have not been able to resolve is, regardless of what I do, whenever the larger box from the left td cell displays after a mouseover, the adjacent cell right boxes are not transparent so appear on top as though they had a higher layer value. Interestingly the text in the right td cell is correctly below the larger box. Conversely whenever the larger box from the right td cell displays after a mouseover, the adjacent cell boxes are correctly transparent so it appears below as though they had a lower layer value. Thus the problem is td cell position dependent only on one side.
Any settings of z-index in either td cells have no bearing on what occurs when absolute boxes overlap the span elements in the adjacent td row cells. That may be at the root of the problem due to peculiarities of the IE browser implemention. If I simplify the code so there is only a single absolute span element in each cell, the same issue occurs. However setting it up as I have done allows a better visual debug indication of what is occurring. Likewise removing the float terms has no effect.
If I change the position selector for boxa-mover or boxb-mover from absolute to relative, when a mouseOver is actuated, boxa-mover or boxb-mover, causes the columns to expand in width from 50%/50% to say 80%/20% instead of overlapping into the adjacent td row areas. Thus that tells nothing about the problem in absolute mode.
So it appears the problem is that positioned absolute boxes from the left td cell if overlapping absolutely postioned boxes in the right td cell, will display below their layer thus blocking full visibility.
I'm wondering if I'm missing something obvious and there is a simple solution to this or if I ought to just give up and consider it just another browser implementation limitation? ...David
