topic Re: Hover Text in Archive

Hover Text

moonsitter — Mon, 15 Aug 2011 18:53:28 GMT

Hi I am new to this website building....so please be nice

What i want to be able to do...is to have a certain word that is in a text box...say Caseworker and when you point or click on it..it brings up a small dialog box that gives an explanation of what a Caseworker is and does.

I am using EasySiteWizard Pro to build the website...

Can anyone help

Re: Hover Text

Sogo7 — Thu, 18 Aug 2011 02:21:30 GMT

The technical term for what you want is called a 'tooltip'.

Difficulty level - intermediate

The EasySiteWizard 'Pro' package is not going to be a lot of help I'm afraid, instead you have to manually insert the required Javascript into the page. Look for the 'edit' buttons that switch between the visual layout and source code views.

Don't panic it's pretty painless just cut & paste, all the code needed has been written for you: see Dynamic Drive.com

This particular tooltip script uses an image to create a speech bubble effect and this will have to manually uploaded to the web server as well. There are lots of variations so have a look around the site you may find something else you like.

Re: Hover Text

moonsitter — Fri, 19 Aug 2011 15:47:31 GMT

Thanks...will check it out over the weekend

Re: Hover Text

moonsitter — Tue, 23 Aug 2011 13:28:26 GMT

Ok...got as far as Step 2

Insert the following stylesheet into the <head> section of your page:

and i hope that i am doin it right by clicking on Edit HTML Source and putting it at the end of what is there already. Also with Step 1, I clicked on Edit Head Tag, and put what they said to enter.

Now if what I have done so far is right...the next step I am not sure of

Step 3: The script uses a pointer image. Download the below:

(right click image, and select "Save As").

Note that you can use your own custom image in place of the above if you wish.

Where do i need to save this Image or do I upload it along with other photos etc that i have used for the Website???

Step 4: Finally, add the following inside any link or element that will contain a tooltip:

onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials', 300)"; onMouseout="hideddrivetip()"

And where do i put the above...into the "body" section of the page???... I dont quite follow what they mean by...

Finally, add the following inside any link or element that will contain a tooltip:

Sorry but as I said at the beginning...only new to this and only know the very basic of web building...

Thanks again for any help