Rollovers and absolute positioning

[echo]

I'm trying to figure out how to do rollover pop-ups. For example, I have a gallery and would love to have the picture enlarge as the mouse curser moves over (onmouseover?). I could use tables and align the smaller image to oneside or the other and then the larger image (image2) fill the table upon rollover, but I want the smaller images all grouped together 3x3. They're in a table nested within a div tag using the absolute position style.
I am trying to avoid iframes. Is it possible to use the absolute style within the img tag before specifying the src="somewhere" in the same tag for image 2 for the rollover to place it wherever I please?
Hope that makes sense.

[sypher]

Moved to css forum for you

[gaz545]

http://www.huddletogether.com/projects/lightbox2/
it's not quite what you asked for, but it is beautiful. shame it uses javascript, but like i said, it's Beaaaaaaaaaaaaautiful!
i always keep this in mind could be usefull for something else your trying.

[ukgeoff]

You could place the larger image inside a div and use css to hide it from view then use the rollover to chage to a style that shows the hidden div whilst the cursor is over the smaller image.

Don't forget meaningful descriptions of your images for people with various dissabilities and/or using assisstive technology.

[echo]

Thanks for all the help

p.s. Awesome ideas!

[masonbarge]

I spent all yesterday working on this - in my case it was for text, not an image, but I don't see how they could be different. It was harder to work out the idea than I thought, because there were problems like keeping the hidden div open and making it reliable as to cursor position. What finally worked was this:

Code: Select all

div#links a span {display:none; }
div#links a:visited span{display: none;}
div#links a:hover  span{display: block; width:auto; height: auto; font-size: 12pt/14pt; z-index: 2; padding: 0 2px 2px 10px; margin-left: -10px;}
div#links a:active  span{display: block; width:auto; height: auto; font-size: 12pt/14pt; z-index: 2; padding: 2px; margin-top: 5px; border: thin solid #393;}

Code: Select all

 <!--2-->
<div class="news_text" id="links"><span class="headnews"><a href="placeholder.html">Potential Medical Breakthroughs Hindered by Deforestation in Borneo</a></span>

<a http=""><img src="images/arrow1.gif" width="16" height="16" alt="full article link" id="imgl" border="0"><p> Plants that promise to treat or cure cancer, AIDS and malaria have recently been discovered in the rainforests of Borneo.  But the Swiss-based World Wildlife Federation has issued a statement that these trees and shrubs are in danger of destruction from the area's rapid deforestation.</p>
<span><p>The rapid destruction of trees, much of it by illegal logging to meet growing world demand for timber, could wreck any chance of using these discoveries in the fight against disease, the WWF declared.</p>
<p>A promising anti-cancer substance has been found in a Borneo shrub by researchers for an Australian pharmaceutical firm, while a chemical found in latex produced by a tree appears to be effective against the replication of HIV, the report said. In the bark of another species of tree, the researchers discovered a previously unknown substance which in laboratory tests appeared to kill the human malaria parasite, it added. In all, it said, 422 new plant species had been discovered in Borneo -- shared by Malaysia, Indonesia and Brunei -- in the last 25 years and many others were believed to be there which could have medicinal applications.</p>
<p>But "all these promising discoveries could eventually be lost if the disappearing rainforests of the heart of Borneo are not adequately protected," the WWF said.  "More forest destruction could well deny science the opportunity to discover and develop further potential sources of life-saving medication," it quoted Murray Tait, vice president of Drug Delivery at Cerylid Biosciences, the Australian company that identified the anti-cancer compound, as saying.</p>
<p>Borneo's forest cover has shrunk to 50 percent of its territory today from 75 percent in the mid-1980s, the report said.</p> 
</span></a>
     </div>

The "active" command is pretty much irrelevant. (I might do some more work to see it I can make it stay open with a click, which I tried to accomplish but didn't get finished.)

Sorry the code is still quite dirty because it's still in progress. The important parts are the html, the first three attribution lines before the brackets in the css, and the first style in the css.

You could use visibility: instead of display: if you wanted to leave white space, but it's hard to see why you'd want to. Well, maybe if you wanted to link a group of thumbnails and have the area for the large photo predefined. I don't think that would be hard to do, just a matter of tinkering with position.

It works like a charm and looks pixel-perfect. In fact I'll go ahead and get on the FTP when I post this so you can see it in action -- hopefully it will work the same online as it does on my computer. http://www.dhreport.com/

I found that putting a simple little colored arrow (short enough to fit in the line-height) in the top left corner of the link makes a very user-friendly target.

Here are my remaining problems, if anyone can help:

1) The cursor has to stay in the text, which is mostly not a problem, except that you can't use the scroll bar and keep the full text open at the same time.

2) I have a three-column fixed layout. The text is in the right-hand column. I can widen the hidden text outside the column easy enough, but if I expand it to the left, the other columns cover it. I've tried adding various positioning statements and using the z-index, but to no effect.

3) If anyone has a suggestion for why I can't get the italic "Note:" to change color, I'd appreciate it.