?
Solved

Rollover Gallery WITHOUT absolute positioning

Posted on 2007-07-22
5
Medium Priority
?
763 Views
Last Modified: 2009-12-16
I really like the idea of the answer provided to this question:

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_20444309.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?
0
Comment
Question by:TheLinkerG
  • 2
  • 2
5 Comments
 
LVL 17

Expert Comment

by:jasonsbytes
ID: 19544600
have you tried changing all the absolute references to relative?
0
 
LVL 1

Author Comment

by:TheLinkerG
ID: 19544829
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">
0
 
LVL 17

Expert Comment

by:jasonsbytes
ID: 19544897
find all of the absolute's and replace with: relative.
0
 
LVL 28

Accepted Solution

by:
TName earned 1000 total points
ID: 19545029

As jasonsbytes said, or alternatively you can try this:
leave the positions of the links/image absolute, but wrap them all in a container div and give that div a relative position (so the absolutely positioned elements will position themselves relative to the wrapper div).
Then you can place/position that wrapper div anywhere you want on the page:

<html>
<head>
</head>
<body>


<!-- BEGIN -->

<div id="wrapper" style="position:relative; top:100px; left:200px; width:240px; height:220px;">

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

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

<!-- END -->


</body>
</html>


Very important: Whichever solution you decide to use, replace (as in my example) all occurences of "document.all.image." with "document.getElementById('image')." as "document.all" is IE only and will not work in most other browsers, e.g. it will fail in FF.
0
 
LVL 28

Expert Comment

by:TName
ID: 19545064
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.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question