PDA

View Full Version : Multiple Hover labels on the same image


David Armstrong
07-13-2011, 02:01 PM
Hi

I have developed a website in Dreamweaver for a client and have now uploaded a group picture of his staff (12 people).
When I asked him for their names so I could place them underneath he replied "Oh no, I want those floaty bubble things" which I have interpreted as Hovering Labels.

So I have scoured the forums and internet these last few days to find some way of doing it, all I seem to find is "you have to do it in Fireworks as a button and then export it to Dreamweaver" I'm not a fireworks person nor do I want a button. Or I find "You can do it in Dreamweaver no problem" but then there is no detailed explanation of how it's done!

In simple terms this is what I want to do:
Create a hotspot for each person so that when a cursor rolls over them a simple label appears with that persons name on, no re-direct, no linking just a plain label that dissappears when you leave that persons hotspot and move on to the next person's hotspot and so on. Exactly like the hover labels used in these post's over the Smilies.

Am I asking for the Moon? Or is it just beyond my capabilities?

Any help on this would be great, please just remember that when replying that I design first and the tech stuff comes a long second with me, so simple language would be appreciated.

Thanks in advance //D

Corrosive
07-13-2011, 02:38 PM
Why don't you just cut the image into twelve and use the title and alt attributes on the image? That's the easiest way. Otherwise you are into tool tips; http://flowplayer.org/tools/tooltip/index.html

domedia
07-13-2011, 02:45 PM
Imagemap it. Easy to do in Dreamweaver and lets you add the title attribute which creates the little hover tooltip.

.

gentleone
07-13-2011, 04:47 PM
Another option is from this article. The article is quite old, but still rocks.
http://www.alistapart.com/articles/cssmaps

domedia
07-13-2011, 09:11 PM
If you want fancy tooltips, jQuery it. Should be some nice plugins for use with image maps.

shanafeg
07-13-2011, 10:09 PM
Speaking of the title attribute, how do you add it in Dreamweaver short of manually typing it into your code? DW automatically gives you an option in the properties bar for an alt description, but there doesn't seem to be any equivalent for title.

DWcourse
07-14-2011, 04:33 AM
Right click on the image and choose edit <img> from the pop up menu. Then choose the Style Sheet/Accessibility option in the Edit Tag dialog.

DWcourse
07-14-2011, 04:36 AM
But that option won't work for title tags on imagemap hot spots.

domedia
07-14-2011, 07:42 AM
Speaking of the title attribute, how do you add it in Dreamweaver short of manually typing it into your code? DW automatically gives you an option in the properties bar for an alt description, but there doesn't seem to be any equivalent for title.

You might as well get used to coding by hand. It's faster and won't limit you :)

.

shanafeg
07-14-2011, 06:58 PM
DW Course.

When I right click on an image, I don't get any "Edit" option with the choices you mentioned. Rather, I get "Edit with", "Edit original with," and "Add to image favorites." This is with DW 5.5.

As for coding, since I'm new to DW, I'm doing a lot of manual coding simply because I don't know how to do it through DW!:mrgreen:

David Armstrong
07-16-2011, 08:04 AM
Well I do need to save time that's true, but coding for me does not seem to be the way forward right now to save time.

I have found this recommended extension from a moderator in the Adobe.com forums.

"It's very possible to do with just the tools that DW provides - depending on how clever you are with the styling of the tooltip, you can make it look very snazzy. The commercial one (PVII) has all of the styling built in and a great many more options than the Spry tips. http://www.projectseven.com/products/tools/tooltips/index.htm"

I thought I would share the solution with those that struggle with code.8)

Corrosive
07-16-2011, 08:20 AM
Thanks for sharing your solution :)