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.
|
|
|
|
|
![]() |
||
Rollovers and absolute positioning
|
||
| Notices |
![]() |
|
|
LinkBack | Thread Tools |
|
#1
|
|||
|
|||
|
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. |
|
|
|
#2
|
|||
|
|||
|
Re: Rollovers and absolute positioning
Moved to css forum for you
|
|
#3
|
|||
|
|||
|
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 |
|
#4
|
|||
|
|||
|
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. |
|
#5
|
|||
|
|||
|
Re: Rollovers and absolute positioning
Thanks for all the help
p.s. Awesome ideas! |
|
#6
|
||||
|
||||
|
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:
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. |
![]() |
| Tags |
| rollovers, absolute, positioning |
| Thread Tools | |
|
|
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? | 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 |