Rollovers and absolute positioning

This is a discussion on "Rollovers and absolute positioning" within the Web Page Design section. This forum, and the thread "Rollovers and absolute positioning are both part of the Design Your Website category.



 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1  
Old Apr 27th, 2006, 20:00
New Member
Join Date: Jan 2006
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Lightbulb Rollovers and absolute positioning

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.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Apr 27th, 2006, 20:34
Most Reputable Member
Join Date: Aug 2005
Location: North Wales, United Kingdom
Age: 21
Posts: 1,093
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rollovers and absolute positioning

Moved to css forum for you
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Apr 27th, 2006, 21:40
New Member
Join Date: Apr 2006
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rollovers and absolute positioning

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.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Apr 28th, 2006, 11:54
Most Reputable Member
Join Date: Apr 2006
Location: Cornwall, UK
Posts: 1,310
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rollovers and absolute positioning

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.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Apr 28th, 2006, 15:49
New Member
Join Date: Jan 2006
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rollovers and absolute positioning

Thanks for all the help

p.s. Awesome ideas!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old May 2nd, 2006, 10:51
masonbarge's Avatar
Highly Reputable Member
Join Date: Jan 2006
Location: Atlanta GA
Posts: 631
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rollovers and absolute positioning

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.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
rollovers, absolute, positioning

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
When is it ok to use Absolute Positioning ?? slimboyfatz32 Web Page Design 31 Feb 6th, 2008 17:25
positioning - relative or absolute? google Web Page Design 13 Nov 8th, 2007 16:00
absolute positioning micker Flash & Multimedia Forum 1 May 21st, 2007 19:17
Trouble with absolute positioning minerguy Web Page Design 4 May 26th, 2006 04:35
absolute bottom positioning in all browsers stephenleefarmer Web Page Design 5 Dec 6th, 2005 23:19


All times are GMT. The time now is 22:50.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42