create image-based pop-up menu fireworks please help

[helen6391]

Hello everyone,

I have create a pop up menu but would like it to be imaged based when you click on the drop down menu and click on text I would like to have an image appear is that possible? I am using fireworks cs5-5.

Thanks in advance .

[ralph.m]

That should be fine, but is this a popup of dropdown? You can use fireworks to create the image, but the rest needs to be done in CSS and HTML. Do you have an example of what you are aiming for? Have you tried to do any coding yet? Do you have a visual of what you are aiming for?

[helen6391]

That should be fine,

but is this a popup of dropdown? You can use fireworks to create the image, but the rest needs to be done in CSS and HTML.

Yes it is a popup dropdown

Do you have an example of what you are aiming for?

No I am afraid I don't have an example

Have you tried to do any coding yet?

No haven't tried coding yet

Do you have a visual of what you are aiming for?

Yes I have a visual what I want but can't put it into words, I couldn't find any example on the net

[ralph.m]

it is a popup dropdown

Um, now I'm really confused.

I have a visual what I want but can't put it into words

A visual is a picture, so perhaps draw a picture of what you want, scan it and upload it here, or draw one on your computer. Or just describe in words what behavior you are imagining.

[helen6391]

Um, now I'm really confused.



A visual is a picture, so perhaps draw a picture of what you want, scan it and upload it here, or draw one on your computer. Or just describe in words what behavior you are imagining.

i've attach a jpg which is self explanatory I've actually managed to do what I wanted but don't know how to do achieve the same thing with drop down menu button. I haven't managed to attach the htm rollover button on here.

[ralph.m]

Ah, ok, this is normally called a rollover. A nice way to do this is with what's called a "sprite" image.

Basically, you have one image with a button at the top and the bee below it. Perhaps place this image as a background image on a <button> element. The trick it only to show a part of the image at a time. So, without hovering, you just see the text part of the image, and then wen you hover, the bee part of the image jumps into view.

Here is an article about how to do it. Have a go at this and come back if you have any problems.

A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death

CSS Sprites: What They Are, Why They&#039;re Cool, and How To Use Them | CSS-Tricks

[helen6391]

Ah, ok, this is normally called a rollover. A nice way to do this is with what's called a "sprite" image.

Basically, you have one image with a button at the top and the bee below it. Perhaps place this image as a background image on a <button> element. The trick it only to show a part of the image at a time. So, without hovering, you just see the text part of the image, and then wen you hover, the bee part of the image jumps into view.

Here is an article about how to do it. Have a go at this and come back if you have any problems.

A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death

CSS Sprites: What They Are, Why They're Cool, and How To Use Them | CSS-Tricks

Thanks will do appreciate it.


helen