Mobile Friendly Website

CSSPLAY

Doing it with style

detailed image map 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

John Labriola:-
This is a great idea. I can also see this being very useful in the business environment on presentations, org. charts and graphs.
(05.12.2005, 16:33)

Mary:-
Fantastic! Works flawlessly on a Mac, including FF, Safari, and, wonder of wonders, IE 5.2.
(06.12.2005, 06:53)

Stu:-
Mary, thanks for that. I couldn't check on a Mac and thought that there might be a problem with IE but it's nice to know that this is ok.
(06.12.2005, 08:17)

Prajeesh kumar km:-
Excellent and amazing. Here after i can use this for my projects that give a better look ..
thanx a lot.
(06.12.2005, 09:25)

Deb:-
It's a cool concept, but for those with accessibility issues such as impaired vision, it's not very friendly. As a gov't developer, we couldn't implement this without an alternative method to comply with Section 508
(06.12.2005, 18:43)

Jesper Rønn-Jensen:-
Beautiful. I really like what you've done here. Amazing that you have made this work in all those browsers.

However, (guess you can't satisfy all), it doesn't print. Firefox's print preview shows white space where the pictures are.

Anyway, your method is very beautiful and brilliant thought of. Thanks for sharing!
(06.12.2005, 20:17)

Stu:-
Jesper, all that is needed is a print.css file which can be styled to printout as you want.
(06.12.2005, 21:40)

Crisper:-
Only one comment : fantastic
Good continuation in your way to show us what CSS is able to do.
(07.12.2005, 08:46)

Stu:-
For those of you concerned about accessibility and the use of background images, this could also be done with foreground images but would require an extra containing div. This just demonstrates the possibilities of css and is not the only way to do this.
(07.12.2005, 23:54)

Berkhoff:-
Hi Stu, I'm just trying to learn webdesign (I'm a designer in print-sector). In the last few weeks I looked for many tutorial-pages and belive me yours is ABSOLUTELY the BEST... Thanks a lot. Not only that we can use the stuff for our own pages, but for the VERY good ideas you coded (I like the puzzle w/the pic in the background, and the Lupe-effect on the oilpainting - whow...!!!)

Thanks a lot for your work and all the Best from Hungary, Berkhoff
(05.02.2006, 15:07)

Gail:-
Wow what a site. I will be back and learn all I can. Seattle USA
(22.03.2006, 07:01)

J:-
Hi Stu,

This looks great!

Can the image(s) be replaced with separate text links? So that when you hover over one of these links, it displays more info on the right accompanied with the red lines?

Thanks!
(18.04.2006, 08:22)

Crazy G:-
What a great image map idea. However, my only concern is if the text size is increased or you have a lot more text that the text is then overlayed onto the rest of the page rather than push the remainder of the page down. To get around this you could add an "overflow: auto" to a:hover span but then how do you get across to the text to scroll because once you move the mouse away from the hot spot the text disappers. Unless you want to keep the text visible using a:active / focus (not tried this yet) this is really only useful for small amounts of text that you know won't be much bigger than your original image.
(08.07.2006, 01:19)

Nel:-
hi stu, the concept works fine while i played around with the code but i cant seem to get the areas of interest while i hover over the image. they only show when i hover over the particular spot. could u tell me what i might have done wrong?
(31.07.2006, 20:49)

Stu:-
Nel, the unhovered default image is held in the dl as a background image [#imap background:url(masters/back.jpg)].
The hovered image showing the places of interest is held in the dt (#imap a#painting) as a background image that is shown on hover (#imap a#painting:hover {background-position: 0 0; z-index:10;}).
Check that you have these correctly placed.
(31.07.2006, 21:03)

jean:-
hi stu,

really a great job, just i want to know if we can fix the information when we roll over the square. just i want that the programme display the last information i roll over.

thanks for any idears
(03.08.2006, 03:40)

Sharry:-
Briallant ideas on this site. I'll try and use some in my future work and link back to you :)
Molinto - UK
(26.08.2006, 13:38)

Jon:-
Stu

Great site! learned a lot. My question is that how are you able to determine the pixel width/heights and some how make them all match nice and neatly? Do you have a pixel graph when you're doing these image maps??
(17.06.2007, 20:45)

Anthony:-
Nice piece of code! Is it possible to have one piece of the image highlighted on page load?

Tnx! Anthony
(10.09.2007, 09:59)

Rosalyn:-
Hi There Stu, I am new on CSS and I like this particular code. However, i encountered a problem when i changed the picture to a bigger one and tried t add more Image Map, it wont let me. Is there a way I can a more Image Map? Thanks...
(14.10.2007, 12:15)

Emma:-
Hi Stu
This site is brilliant. I am a novice developer and am stuck with this particular demo.
No matter what, my background image wont appear. I have checked the positioning of each background as you mentioned to Nel but no joy.
Help!
Thanks
Emma
(30.01.2008, 16:26)

Su:-
Emma, email me with a url that I can check online.
(30.01.2008, 22:08)

Regiasan:-
How can I get the demo for the
"Image map for detailed information" I love and we need if for educational purposes.
(15.05.2008, 21:24)

Ben:-
Great script. Got it going but have a XHTML invalid problem.

I want a list and header instead of just an image and text in the hover bit (id="child"). Putting these tags within the span tag causes the page to be xhtml strict invalid.

I can't think of a way to fix this...can you?
(25.07.2008, 09:35)

Tom:-
Stu,

Nice work. I also had a problem getting the background image to display but resolved the problem by adding "../" to the image path.
(27.08.2008, 00:00)

Michelle:-
I absolutely LOVE this technique! 1.) I started a new project and wanted to implement it; however, I think I've gone a little 'overboard' because now I'm confused and only some images/areas are working!?!? ANY/ALL help would be appreciated. 2.) Is there any way to have the images clickable (links...)?
Link to my family tree project page: www.drawingself.com/family_tree/familytreehomepageSTUNICHOLS.html
Thanks, Michelle :)
mflaniam@hotmail.com
(19.12.2008, 02:26)

Dan:-
Hi Stu,

We're back again to use another of your demos. Last time we used your multi-column dropdown menu which is working great. We are interested in the "Old Master" image map, but we are trying to get the descriptions to persist so that the user can hover over the description and click on a link for more information. If you could help us with that, we'd really appreciate it. Thanks! You can reach me at: dan at skdtac.com
(16.10.2012, 22:53)

Gavin:-
Stu, I hope you're still reading comments on this demo. Where do I get the CSS code from? Most of your other demos show the CSS, but I don't see anything here. I'd love to be able to include this code into a page on my wordpress blog.
(25.03.2013, 09:48)

Stu:-
All you need for this demo (code and stylesheet) can be found in the page source code and the site FAQs will tell you where to look.
(25.03.2013, 11:17)



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