Mobile Friendly Website

CSSPLAY

Doing it with style

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

jfine:-
In Firefox 1.0.4, move mouse over menu item, click and drag away and down from gif, then lower left corner of the square the name of the link appears, and wont go away. Sometimes it scrolls up by itself as you do this as a neat effect actually. Just commenting not knocking.
(21.05.2005, 17:55)

jfine:-
Whoa, so this time I came in from home page link, click the explorer menu item, don't let go of mouse button, and slowly drag away to the right of the screen, if you get it just right, the "square" around the menu will move upwards off the screen. No I'm not seeing things, tried it many times to get some pattern here. Hit refresh and the entire map is non-clickable. Have to come back in from home page to get it initialized again.
(21.05.2005, 18:03)

Stu:-
jfine, fixed ;o) 'twas a Firefox 'thing'.
(21.05.2005, 20:03)

jfine:-
That was fast!!! Was kinda cool to see the menu choice move up the screen from some event?! without javascript! hmm
(21.05.2005, 20:27)

Stu:-
jfine, if you want to see it in action again then visit the archives and select the 'horizontal style. This still has the bug in place.
(21.05.2005, 20:49)

David:-
I am trying something based on the excellent image map menu. What I am trying to do is add some further text to appear beneath the menu using a span tag next to the b tags on the li. Can't get it to work tho, is it possible?
(24.08.2005, 17:51)

Stu:-
David, you will need to increase the size of the ul then position the span text using absolute positioning.
(24.08.2005, 18:50)

David:-
Thanks Stu. My ul main image is 277px high, so I increased it to 350px. I then used #info a#area1:hover span {position: relative; top: 300px; left: 10px; display: block; z-index: 5} but no joy :o(
(25.08.2005, 11:47)

Stu:-
David, you will need to use position:absolute not relative. Positions will be taken 'absolutely' from the top left of the <ul> which has a relative position.
(25.08.2005, 12:07)

David:-
Oh I see, the span position is only visible if inside the size of the li it is placed in. I don`t think what I want to do is possible then.
(25.08.2005, 12:33)

Stu:-
David, I may have misled you with my last answer. The <ul> has a relative position. Each <a> tag has it's own absolute position. So any <span> within each <a> tag will need a position:absolute that is calculated on the absolute position of the link. So if for instance the link had a top position of 200px then the span should have a top position of 100px to give a total of 300px relative to the <ul>. Hope this makes sense.
(25.08.2005, 12:58)

Anonym:-
Sorry Stu I think I'm being really thick with this. Here is what I have http://www.derwentliving.com/to_rent/try.html is this along the lines of what you explain?
(25.08.2005, 13:18)

Stu:-
David, what you are trying to do can best be demonstated by this tutorial:
http://www.webreference.com/programming/image_map/examples/index.htm
(25.08.2005, 15:15)

David:-
Thanks for the link Stu, will look into it.
(26.08.2005, 09:28)

David:-
That example was superb, exactly what I wanted. Is it possible to take it a step further and keep the text visible instead of disappearing when the cursor is moved away, until it hovers over another hotspot at least? Or would a mouse click work? I tried working with the :active tag but no luck so far.
(26.08.2005, 10:59)

Stu:-
David, to keep the text in place you will need to use the mouse click state. For Internet Explorer this is :active, but Firefox etx use :focus.
Opera, however, does not hold these states when the mouse button is released.
To see this in action look here:
http://www.cssplay.co.uk/menu/car.html
(26.08.2005, 11:08)

David:-
Sorry to keep bothering you. Am I along the right lines of something like this: #imap dd a:active span {display:block;}
(26.08.2005, 11:44)

David:-
yyyeeessssss, got it working thanks for the help matey
(26.08.2005, 11:52)

Stu:-
David, ok glad it is working. Just as a further guide I have added the click state to the Beatles example here.
http://www.cssplay.co.uk/articles/imagemap/examples/index.html
(26.08.2005, 11:59)

David:-
Something that took me a few hours took you minutes :op Oh well I'm learning... Is it possible to put a link inside the span text? When I try the link text is visible on the map. eg <span>Paul McCartney - <a href='#'>Bass Guitar and Vocals</a></span>
(26.08.2005, 12:28)

Stu:-
David, ah....now you're taking it too far ;o) Nesting links in links is asking for trouble and it wont work....well there is a way but it gets very complicated. It requires two entirely different methods for IE and Firefox etc and can be seen in action here.
http://www.cssplay.co.uk/menus/dropdownfun.html
(26.08.2005, 13:08)

David:-
Again thank you very much. I wrapped my link in a table and it works a treat. If you are ever in Nottingham a drink or two can come your way :oD
(26.08.2005, 14:05)

Stu:-
Cheers David, this will only work in IE though.
(26.08.2005, 14:26)

David:-
It is working in FF for me, as well as IE. Not going to complain about that :o)
(26.08.2005, 16:08)

David:-
aha, or should that be the links display but you cannot click them.
(26.08.2005, 16:22)

John R:-
I feel like a kid in a toyshop. Great stuff. Thank you.
In Image Map Menu, can you explain why the backslash in 'he\ight:0;'
(08.01.2006, 18:31)

Stu:-
John R, glad you are enjoying yourself. The he\ight:0; is an Internet Explorer hack.
* html (target IE only) #info a {
height:112px; (for all versions of IE to correct the faulty box model in IE5.01 and IE5.5)
he\ight:0; (for IE6 only to feed the correct value. IE5.01 and IE5.5 will ignore this)
}

Hope this clarifies the hack.
(08.01.2006, 20:44)

JamesD:-
Re. The Mantis Image Map.

I'd like to at some point use this as a skeleton for a kind of "Interactive Map".

Is this OK. I'd give you proper credit
(29.01.2006, 06:15)

Stuart:-
Hi Stu,

I would like to get permission to use your Mantis map for a website I am creating. Obviously I am going to change the labels / background pic of the Praying Mantis. I love this design and I'd be grateful if you would allow me to make use of it.

Thanks

Stuart
(11.03.2006, 01:42)

Stuart:-
Stu,

Btw, what part of Bristol are you from? I am from Thornbury... but now live in Beijing.

Cheers

Stuart
(11.03.2006, 10:27)

Stu:-
Stuart, you have my permission to use this menu on your web site (a mention in the style sheet would be nice ;o)
My childhood was spent in Knowle West.... yes I know.... but I now live in K. e. y. n. s. h. a. m. for all of you who remember Radio Luxembourg and Horrace Bachelor.
(11.03.2006, 20:21)

John B:-
Stu,

I would like to use your image map menu on my website. I would like to use the design as-is (including your mantis critter temporarily)except for the menu titles.

I would be happy to include credit lines in the css file, and would also provide acknowledgment somewhere on the site. If there's something specific you'd like, let me know.

Your site is among the most imaginative ones I've visited concerning use of CSS. I enjoy browsing the site just to see what you've come up with.
(15.05.2006, 05:20)

Stu:-
John B, you have permission to copy the menu 'as is'. I would ask that you place a credit in the CSS.
You may have a problem though in changing the list titles as these include parts of the mantis image.
(15.05.2006, 20:32)

Lorena:-
Greetings Stu,

I was pointed to your site for this mapping illustation the other day from webdesignerforum.co.uk the other day.

Since then I have been trying to adapt your code for a page I'm working on...but am not being so very successful.

I would be willing to reimburse you for your time if you would be so kind as to look at the code I have and then let me know what I am doing wrong.

Thank you for your time in adavace--Lorena
(20.03.2007, 12:25)

Stu:-
Lorena, email me stu {at} cssplay.co.uk with your problem and a link to the url and I will see what can be done.
(20.03.2007, 20:34)

Stuart:-
Hello Stu,

I am new to css and I am learning lots!!

your praying mantis image menu... how do I download the images that make up this menu?

many thanks and an amazing site!
(08.10.2007, 04:47)



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