Mobile Friendly Website


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}

Post a comment

Current posts

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

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)

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)

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)

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)

Sorry Stu I think I'm being really thick with this. Here is what I have is this along the lines of what you explain?
(25.08.2005, 13:18)

David, what you are trying to do can best be demonstated by this tutorial:
(25.08.2005, 15:15)

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

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)

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:
(26.08.2005, 11:08)

10 of 36 comments (part 3). [ « ] [ » ] [ * ]


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