cancel
Showing results for 
Search instead for 
Did you mean: 

Hover Text

moonsitter
Member

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

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

3 REPLIES 3

Sogo7
Grand Master

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.

Lovelogic.net UK Jobs Scanner

moonsitter
Member

Thanks...will check it out over the weekend Smiley Happy

moonsitter
Member

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