Hello Everybody -

I have a question that I need answered -

Is there a way to implement either a vertical drop down menu or a horizontal drop down menu on a "hot spot" on an image map where as when the mouse rolls over the "hot spot" the "hot spot" would change and the menu would drop and then would you be able to mouse over the elements in the drop down and go about your business?


I hope I am asking this question properly -

I appreciate all who can possibly help me -

Thanks.......

Recommended Answers

All 12 Replies

Thanks for the link to Stu's site - Now I have my answer - Thank you -
Would anyone happen to know how this can be accomplished or at least a site that would have some coding examples? Would greatly appreciate any information anyone can provide - Thanks Again.............

View the source of that page. You will see CSS for every effect and some [admittedly somewhat sparse] comments.

OK I will view the page source and once I have done so if I do not have any additional questions I will mark this thread as solved - Again I would l like to thank each of you who have taken the time to read my post and post your own responses as a result of my curiosity -

I will post again with the status after reviewing the source code - Thanks.....

Hi - I have Looked at the source code via View Source in the browser - There are just 2 questions that I do have with the code - One has to do with the transparent.gif - Obviously I am unable to get the actual gif but I am not sure what size to make it if I were to make my own and the pointer.gif as well (it looks like I could make something based on the pixel width and height which is in the code)- Secondly with regard to this code working for IE 6 and IE 7 there is some conditional logic present but I am not sure how it really works -

If anyone could possibly help me with these issues I sould greatly appreciate this -

Thanks to all who have taken the time to read and respond to this -

transparent.gif - Obviously I am unable to get the actual gif

I would be surprised if right-click-and-save is disabled on that site; everything else is completely free.

If it is, though, Google image search now has a feature that allows you to specify the exact size of the image.

Alternatively, there are any number of freeware programs that will create one for you. I like IrfanView [which has a wide variety of other features].

However, I'm not sure that particular .gif is essential. As I recall it was only needed in conjunction with support for IE5.5 (or something along those lines).

pointer.gif

Same alternatives.

code working for IE 6 and IE 7

IE has a feature that allows you to 'speak' to various IE versions and tell them to do different things - without affecting other versions of IE or any other browser.

The code takes the form of HTML comments. Non-IE browsers simply ignore them. IE parses them and - unless it finds a tag which includes its particular version - will also ignore them.

Thanks for the explanation on the IE6 IE7 code - I now have a better understanding with regard to that - As for the transparent.gif - I am not asking how to create one - I can create one in adobe fireworks with no problem - I am just baffled as to what the dimensions of this transparent.gif should be - I can understand how this could be hilarious to most people since I did not intend my statement to sound like it did -I also am having difficulty with obtaining the rollover images for the planets as well - Not sure what to do in this regard either - The pointer.gif I could re-create since there are height and width dimension in the code for it -

Again I appreciate all who have helped me thus far -

Thank you all so much.....

I was wondering with regard to the transparent.gif if it would need to be the size of the entire image? Anyone who may have an idea on whether or not this is a valid approach would be greatly welcomed and appreciated -

Thanks again for all who have helped me thus far -

transparent.gif -- need to be the size of the entire image?

If you had investigated the source of that page you would have found that 'transparent.gif' is 8x8.

Really???? Wow,,,, I must have missed that - From what I see the transparent.gif (as well as the planet rolovers) are in a folder called PLANETS which I do not have access to -

The only reference I see to the number 8 in the entire code is for .xb1

Sorry if I am being so dumb - but I do not see it and I do not get it -

I appreciate all who have helped me - Thank You all.....

The url() in

#map ul li a.tl {display:block; text-indent:-9999px; background: url(planets/transparent.gif);}

resolves to
http://www.cssplay.co.uk/menu/planets/transparent.gif
As it happens, Chrome immediately shows the dimensions of the image when its link is opened. If that weren't the case, I would have downloaded the image and opened it in an editor.

Note: as I understood the author's notes, that image is needed only for support of older IE versions. I doubt that much will be lost if you let them go.

Understood -

One problem I do have tho is obtaining the actual rollover images for each of the planets because of that url() - I guess it is not critically important to know or have those rollover images but I would have preferred to have them to just have this entire set of code and images complete and then I would be able to really study it and get a better understanding but maybe I am just wasting my time -

Perhaps I should try to somehow write a very simple routine based on this code and see how far along I get -

Again Thanks to all who have helped me - I appreciate it -

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.