Mobile Friendly Website


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}

Post a comment

Current posts

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)

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

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?

(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)

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)

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)

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)

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)


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)

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)

10 of 29 comments (part 2). [ « ] [ » ] [ * ]


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://'


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.


Facebook Twitter rss feed Facebook Fan Page