Mobile Friendly Website

CSSPLAY

Doing it with style

inline pop-ups COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Tim:-
Stu, something so simple, you would think you would have thought of something like this earlier on with inline elements, or have you? ;)
(21.07.2006, 10:20)

Stu:-
Hi Tim, this idea was used in my previous design to show a snippet of the linked page. So, yes I had thought about it before but didn't realise there would be a call for a demonstration.
(21.07.2006, 11:17)

Mikhail:-
Hello, I am working through your amazing site with much pleasure! Thanks.
To be of practical use: this page does not work properly in Opera 9 (showing just bottom-left corners of thumbnails), but in IE everything OK.
(21.07.2006, 18:09)

Stu:-
Mikhail, this is an Opera 9 bug. Opera 9 beta works fine. They really should get this z-index problem sorted.
(21.07.2006, 18:54)

Todd Reid:-
Stu, Safari 2.0.4 (419.3) on OS X 10.4.7 has a similar problem to Opera...only a portion of the inline images shows...almost seems like a z-index thing...not sure.
(23.07.2006, 07:23)

Dan:-
When the link is clicked in IE 6.0, the browser does not go the the specified page. If I right click, I can open the link.

Thoughts?

BTW, love your site!
(25.07.2006, 21:38)

Stu:-
Dan, this is often the case with IE when the link is a pop-up image. Don't know why, but to cure it I have moved the image away from the link. This creates a small problem in Opera.
(27.07.2006, 09:26)

troy:-
I would like to move the position of the pop-up? is that possible? I have working in an i-frame, I do not want it to scroll or get cut off. Thanks for your help in advance..troy
(17.08.2006, 14:44)

Daniel:-
The popup pics can also be animated gifs for an interesting effect. Another site with similar ideas is css/edge where I got the idea for an navigation bar effect seen on my site: www.geocities.com/solvolition (no I'm not selling anything). Just mouse over the lower links on the left to see little pop up gifs that demonstrate what the link is about.
(22.08.2006, 19:35)

Stu:-
Daniel, css/edge is the site that started me off on the road to learning CSS.
It's a pity that Eric Meyer has not progressed with his examples as the ones
on this site are now several years old.
However, they are still of use to anyone starting out with style sheets.
(22.08.2006, 20:38)

Carlos:-
I absolutely love this bit of code and would love to put it to use. Unfortunately, the fact that it does not work in Safari is a bit of a deal breaker for the Mac related site I am helping with. Any hints as to what to play with to see if there's a work-around?
(24.08.2006, 18:49)

Stu:-
Carlos, I have revised this very slightly so that it now work correctly in Opera v9.01. If you try it now in Safari to see if it also works in this browser.
(24.08.2006, 21:45)

momotaro:-
When I place this in a scrolling div, the text with the link is also positioned absolute , so it scrolls too! Just something I observed.
Go easy on the cheap chips!
(26.08.2006, 04:57)

momotaro:-
Got my terminlogy wrong...meant relative positioned, however, removing that then positioning the image cords from the top of page worked out fine.
You'll like these photos, Stu.
hawaiireef.noaa.gov/imagery/video/NWHI.mov
(26.08.2006, 10:23)

Carlos:-
Stu, it works perfectly in Opera now. Unfortunately, that's not the case in Safari. The demo links you have for this style, for example, only show a horizontal sliver of the bottom of the pop-up image when hovering on the link (though I did not check to see if the changes you made to the code have been applied to the demo). On my end, I tried it out with a square image (48x48) and made the appropriate changes in the CSS (changed all width and height tags that are not "0" to 48px; I also changed "top" to "-48px" so that the image pops up above the link). What I see when hovering on the link in Safari is just the left half of the image, with the left border intact, the right border invisible, the top border cut in half (like the image) and, (perhaps herein is a clue) the bottom border complete. I will play with the CSS and report back if anything I do makes a difference.
(26.08.2006, 16:27)

Stu:-
Carlos, Safari probably does not like the fact that these are inline pop-ups and is only showing the part of the image that is inline with the text.
Opera has a bug in that the hidden image appears when you rollover its hidden position, that is why I had to add a height:0; Unfortunately I do not have a Mac so cannot help with this one.
(26.08.2006, 16:45)

Kuba:-
I like this CSS code, but sometimes it's little annoying.
Is there any possibility to show "big" image not after hover but after click?
(30.10.2006, 13:47)

Stu:-
Kuba, if you did that then you would not see the popup image, you would be taken to the link page instead.
(31.10.2006, 18:23)

bev wood:-
I am using Firefox 1.5.0.3 on one machine with no problem BUT:-( I up graded to 2.0 on this machine . Your pop-up demo works BUT NOT the pop-up boxes in the comments. I get a very fussy image with both lots of text showing. This also applies to this comments page.
(22.11.2006, 22:18)

Stu:-
bev, I am using FF v2.0 and the pop-ups on this page are working fine.
The pop-up boxes are Kontera generated text-link-ads that use javascript. It may be that you have a pop-up blocker in FF that is causing the problems.
(22.11.2006, 22:49)

Jason:-
I thought I would implement this on my links page
www.grinchynet.net/links.php and the popup image on the top link gets cutoff by the header and not sure how to correct this. I have tried several things to try and solve this problem with no avail, any suggestions?
(30.11.2006, 18:51)

Stu:-
Jason, because you menu has to cover the content then the pop ups must pop under
this menu.
The only way to avoid this is to move the top content link down a bit so
that the 'pop up will not 'pop under'.

Can you also add a comment to your stylesheet such that the menu is
copyright CSSplay.co.uk
Many thanks.
(30.11.2006, 19:07)

Jason:-
Thanks. I figured that would be the case. I added the comment, I apologize for leaving it out, I just updated my layout recently and I am still adjusting a lot of the CSS still.
(30.11.2006, 20:16)

David:-
Hey Stu, just wanted to say thanks for the great code. I just made my new personal webpage, and I'm using one of your drop-down menus, pop-up images demo, and a:hover opacity menu.

www.davidcflood.com

Best,

David
(06.02.2007, 06:58)

Brian Timmins:-
Hi Stu,

Re: Pop-up images on inline links

Is it possible to get the CSS to react to the actual size of the image for border/frame emplacement purposes. I have your system working perfectly on the 27th July entry for year 2007 entitled "Beware the Pirhana" (right at the bottom of the page - mouseover the tiny camera button) on...
www.brianstimelines.co.uk/Astronomy3.html

Best regards, Brian
(brtimmins{at}gmail{dot}com
(09.08.2007, 11:54)

Emilya:-
You're just the best. I learned so much from your work. Thank you!!!!
(31.01.2008, 17:38)

Josh Henry:-
How might you apply this technique to an image map on the page? Where would you set up the div to make it hidden, then visible on rollover? I am building an application where that could be very useful. Thanks for the info.
(21.02.2008, 19:56)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page