asked on

Rollover Gallery WITHOUT absolute positioning

I really like the idea of the answer provided to this question:

https://www.experts-exchange.com/questions/20444309/Trying-to-create-a-gallery-page-with-disjointed-rollovers.html

It's your basic rollover script, with pictures listed around a central display area. However, it relies on absolute positioning. I'm designing a website which has a set template, and this needs to be just another page with the same template, except it happens to have an image gallery in it. Does that make sense?

So, how can I modify this code so that I can drop it into my existing template and it will show up correctly?

Jason Minton

have you tried changing all the absolute references to relative?

TheLinkerG

ASKER

I understand the idea, but I don't have the precise knowledge of what to change. I'm pretty sure the word "absolute" has to go, but beyond that I'd be casting about blindly. Here's the pertinent code. Could you be a little more specific in your response?

<a href="" style="position:absolute;visibility:visible;top:0;left:0;z-index:1" onMouseOver="document.all.image.src = 'image1.gif'; document.all.image.style.visibility = 'visible'" onMouseOut="document.all.image.style.visibility = 'hidden'; document.all.image.src = 'none'">One</a>
<a href="" style="position:absolute;visibility:visible;top:0;left:100;z-index:1" onMouseOver="document.all.image.src = 'image2.gif'; document.all.image.style.visibility = 'visible'" onMouseOut="document.all.image.style.visibility = 'hidden'; document.all.image.src = 'none'">Two</a>
<a href="" style="position:absolute;visibility:visible;top:0;left:200;z-index:1" onMouseOver="document.all.image.src = 'image3.gif'; document.all.image.style.visibility = 'visible'" onMouseOut="document.all.image.style.visibility = 'hidden'; document.all.image.src = 'none'">Three</a>
<a href="" style="position:absolute;visibility:visible;top:100;left:0;z-index:1" onMouseOver="document.all.image.src = 'image4.gif'; document.all.image.style.visibility = 'visible'" onMouseOut="document.all.image.style.visibility = 'hidden'; document.all.image.src = 'none'">Four</a>
<a href="" style="position:absolute;visibility:visible;top:100;left:200;z-index:1" onMouseOver="document.all.image.src = 'image5.gif'; document.all.image.style.visibility = 'visible'" onMouseOut="document.all.image.style.visibility = 'hidden'; document.all.image.src = 'none'">Six</a>
<a href="" style="position:absolute;visibility:visible;top:200;left:0;z-index:1" onMouseOver="document.all.image.src = 'image6.gif'; document.all.image.style.visibility = 'visible'" onMouseOut="document.all.image.style.visibility = 'hidden'; document.all.image.src = 'none'">Seven</a>
<a href="" style="position:absolute;visibility:visible;top:200;left:100;z-index:1" onMouseOver="document.all.image.src = 'image7.gif'; document.all.image.style.visibility = 'visible'" onMouseOut="document.all.image.style.visibility = 'hidden'; document.all.image.src = 'none'">Eight</a>
<a href="" style="position:absolute;visibility:visible;top:200;left:200;z-index:1" onMouseOver="document.all.image.src = 'image8.gif'; document.all.image.style.visibility = 'visible'" onMouseOut="document.all.image.style.visibility = 'hidden'; document.all.image.src = 'none'">Nine</a>

<img id="image" src="none" style="position:absolute;visibility:hidden;top:100;left:100;z-index:1">

Jason Minton

find all of the absolute's and replace with: relative.

ASKER CERTIFIED SOLUTION

TName

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

TName

In my example, at the third link (image3.gif), replace
document.getElementById('image').visibility = 'visible'"
with
document.getElementById('image').style.visibility = 'visible'" (forgot ".style" there)

Just a reminder:
When an element is positioned absolutely, it will position itself relative to it's parent element as long as the parent element is itself positioned other than "static" (the default value), position:relative will do. Otherwise (if the parent element doesn't have a position specified or if the position is "static"), the absolutely positioned child will position itself relatively to the next non-statically positioned ancestor on the page, and, if none available, relatively to the body of the document.