Mobile Friendly Website

CSSPLAY

Doing it with style

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

Morpurgo.nl:-
Great show, love the Magnify image ;)
(28.02.2005, 17:23)

Blair Millen:-
Brilliant examples... I'm very impressed.
(01.03.2005, 14:45)

Larry GP:-
I'm finally jumping on the CSS bandwagon and am astounded at the control you have over it. Kudos, these are great! I aspire to your level.
(03.03.2005, 14:54)

Voodoo:-
ubercool...gonna start learning CSS right away
(03.03.2005, 17:32)

Dimitri IT:-
i'm definatly impressed by your examples !Keep up the good work mate !!!!!
(06.03.2005, 10:55)

j_one:-
Hello Stu,

I saw and tried your iamge map. Good work :)
But, your hack doesn't well display with konqeror (3.2.2 fedora version). Perhaps konqueror has a css bug.

You are A Good Css Master, right now.
(07.03.2005, 22:37)

Stu:-
j_one, I think someone will have to buy me all this alternative hardware and software so that I can have every conceivable combination on which to test my CSS ;o) I would really like a Mac most of all.
(07.03.2005, 23:10)

matt:-
Very good, I've used the same on my site, http://mattmadethis.com/article/130/css-image-maps
(11.03.2005, 17:38)

Stu:-
matt, I've combined your post ;o) Glad you have found a good use for this method. It works well.
(11.03.2005, 18:07)

Tekwilde:-
Wow, super impressive! Thanks for the great ideas, and for sharing them with the rest of us.
(11.03.2005, 18:54)

Chris Hester:-
Excellent. If you removed the hover image that shows the position of each area, it would be perfect. Why? Because it causes a flicker when hovering from Sleepy to Happy and back. This happens when any two areas have a gap.
(06.04.2005, 10:31)

Stu:-
Hi Chris, if you don't want a flicker when scanning from Sleepy to Happy then increase the size of the Sleepy area to overlap the Happy area, or have the area highlight the same as a black square the same size as the individual hover area. I think that the initial hover image to show the 'hotspots' is required to give the visitor an indication of where they are.
(06.04.2005, 14:29)

whatforlah:-
Man, you're good. Thanks for sharing your ideas.
(19.05.2005, 23:58)

Benny Keinan:-
Hi Stu, love your site and learned all I know about css from it. I have a problem maybe you can assist. I need to show an image of a map and according to DB information draw spots on specific locations on the map.
The thing is, I am unable to position the spots in the place I want them to be.
I have a <div> section in it I placed the image (fixed size) and then I draw the spots, but using position:absolute but it didn't work, I also tried using relative, didn;t work also... any ideas are more than welcome.
Thanks
(22.07.2005, 12:42)

Stu:-
Benny, the outer div will need a position:relative; for any inner 'spot' fixing using position:absolute;
(10.08.2005, 10:22)

Donny:-
Your site is realy very interesting!
(17.09.2005, 06:43)

Luzin.net Staff:-
Hi, we're from the Luzin.net staff. We will glad to use the second example of your image map for our menu.
We want to tell you this for asking you permission (it's not clear for us, if we have to ask permission only for the CSS method or if we want to copy the images etc.. )
Your site is very very great and You're a master in CSS ;)
But, please, let us know for your permission.
In the end, we tell you that we will use only the CSS method of your image map, and not the example images. Let us know !
Thanks.
Luzin.net admin(at)luzin.net
(03.04.2006, 13:38)

Stu:-
Lizin.net Staff, you do not need my permission to use this method on your site, but thanks for asking.
(03.04.2006, 19:09)

Dave:-
Very nice, although it doesn't appear to work well in Safari.
(14.11.2006, 16:25)

Ray:-
failure in opera:
- script 2
- Version 9.00, Plattform Win32, Windows XP
- does show scrollbars when rollover
*
failure in safari:
- script 1, 2
- you got to look at it, its looks weird
- all mangeld up, everything is thrown around
- max os x 10.2.8
- safari 1.0.3
(26.12.2006, 11:39)

Nigel:-
When viewing your image maps using Safari on a Macintosh I have found that the background image can be displaced from its correct position depending on whether the mouse is within or outside of the image. Can anything be done to correct this?
(09.01.2007, 06:56)

Dave:-
I love this technique, even though it is completely borked in Safari. Anyone have any ideas why?
(15.01.2007, 15:24)

litew8:-
Viewed on a Mac OSX/Safari 2.0.4 - works fine. No problems. Also works fine with WinXP/IE7.
- - - - - - - - - - - - - - - - - - - - - - -
Is there a way prevent focus to a#snowwhite image if the area is actually smaller in size than snow_white.jpg?

Meaning, the area I'd like to rollover is actually smaller than snow_white.jpg, but the area given focus must be the size of the image/area. Could the code be manipulated in such a way that it acts more like a tooltip? Whereas the hotspot can be smaller than the rollover image.

Thanks for the great content Stu.
(25.03.2007, 02:19)

litew8:-
Scratch those last comment/question. I looked around your site a little more and found something else that I'll be able to use - which will actually be more accomodating (Image map for detailed information) towards the grand scheme of things! Thanks again Stu for the great content!
(25.03.2007, 04:09)

JF:-
Map #1 and 2 fails completely with Safari. Does someone has a solution? Thanks
(03.04.2007, 15:27)

Stu:-
JF, try them now and let me know if they work.
(03.04.2007, 20:16)

Peter:-
Excellent website, Stu!

I'm really excited about using your map #2 example . The only additional feature I would love to implement is a fade effect that gradually changes the opacity of the whole image except for the hotspot when you mouseover it, and the the map opacity gradually returns to normal state on mouseout. Any suggestions?

I've tried combining image map js scripts with fade scripts but have had no luck at all. Any suggestions? It's more eye candy than anything else, but when working properly, it would be very impressive.
(23.05.2007, 17:16)

Buddahgfx:-
I have the same problem with Safari and image mapping. big minus for Safari that's for sure.
(22.10.2007, 14:26)

Myname:-
Good job, it looks great.
As an improvment, wouldn't it be possible for #Map 2 to define areas just around characters (using a set of coordinates like the MAP/area/coords in HTML) for the mouseover to occur only is these zones: this would be a more accurate method as for now characters can be highlighted even when mouse is not over them
(27.04.2008, 13:34)

Terry Henderson:-
HI Stu,
Great site. Must be fun to have time to fiddle with this...
I was looking at your css image maps. I am looking at trying to put image maps like this on the panorama gallery you made. Just wondering it you had done this or is there issues with the image scrolling.
I have learned alot from your site. css is great and I have just touched the surface of what it can do. Because of your work I am much further than I'd be on my own. trying to stay away from javascript unless its the only way.
Thanks Man,
(27.09.2008, 02:22)

Terry Henderson:-
Duh, didnt go far enough, Question answered long time ago.
Sorry
(27.09.2008, 23:06)

Alexandre:-
Hi Stu! Excelent Site!
Is there any way to do this using non-rectangular shapes?? I was wondering if its possible to make this with an Atlas map, and the links will working accordding to Country Shapes...
plz someone email-me if knows how to =]
alexandfb@gmail.com (pls post IMAGE MAP as subject ) =] Thanks!!
(23.10.2009, 16:54)

Denise:-
Trying to find the source code for either map 1 or 2. Came into this from a forum link, and I can only see the demos. These would be perfect for something I'm trying to accomplish.
(22.07.2012, 23:52)



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