description bubble when hovering over text

[ming]

Hi all,

Got a question about web page design. I'm not into Web designing at all, but would like to know how some web site such as this forum's new page display text/description bubbles when you hover over certain texts.
Could anyone give a dummies guide to how to do this and what tools are required, please?

Much appreciated

 

[kcnychief]

I believe it is called hover text, a hover tip or info tip - what language are you coding in?

 

[ming]

I believe it is called hover text, a hover tip or info tip - what language are you coding in?

As I mentioned I'm not into these web designing stuff so I'm a total novice. I guess it's english... just kidding. I believe all the pages contain only html codes. Haven't a clue if there are anything else hidden within it.

Oh, pages will be edited using standard GUI view rather than the coding view.

 

[AllWeatherGal]

Tooltips are programmable helper info bits ... if you're looking at straight html and the little text pops up when your cursor is resting on a graphic, that's the alt attribute of the img src tag.

For example the following html < img src="photo-of-cat.jpg" alt="Photo of a Cat" >
results in a a cat photo that, when you put your cursor on it, shows the text Photo of a Cat.

Also noted that you said "edited in standard GUI" ... whose? All of them should have a textarea or field for alt.

 

[ming]

I'm using Dreamweaver software to do all the editing. I don't look at the html source codes because I don't understand how it works.

 

[kcnychief]

Not sure what version of Dreamweaver you are using but this may help?

http://www.frontpagewebmaster.com/m-367046/tm.htm#367046

 

[AllWeatherGal]

I'm using Dreamweaver software to do all the editing. I don't look at the html source codes because I don't understand how it works.

In Dreamweaver MX 2004, anyway, ...

1. drag/drop the image onto your page

2. click the image
You know the image is selected when <img>
is highlighted in the status bar at the bottom of the design pane.
(You can also click the <img> on that pane to select the graphic)

3. in the properties box (default location is the bottom pane)
you'll see all the attributes you can set for an image, including a field
labeleld "Alt" (in MX 2004, it's the top row, third field from the left:
w |-------| Src |--------| Alt |------| Class |-------|

4. Put your cursor in the field and type the text that you want to show
when users put their cursors over the image.

Note: You can't put line breaks in the alt text or make any font or color changes.

HTH

Having written all that, DreamWeaver is a GREAT tool to help you learn HTML, which I advise for anyone doing any web design or development. I find it faster, actually to make edits in the html than the gui boxes when I want to change a bunch of things. About the only things I use the gui for are making complex tables (tho it's still easier to tweak pixels by typing than trying to drag bars) and Templates. Oh my god, TEMPLATES rule!