Textual tool tip -creating effect with buttons

[davyd]

1) Script Title: Textual tool tip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/linkinfo.htm

3) Describe problem: Hi I am having trouble with the textual tool tip. I am trying to create the same effect but instead of just text, using rollover image button to generate the text tips.
The script is working fine, except that the rollover effect with the buttons don't work.
I think its just a syntax problem, could someone please advise.
The code is below.
Many thanks
Davyd

<a href="products/teambinder/index.html"onMouseOut="MM_swapImgRestore()" onMouseOver="changetext(content[0])"MM_swapImage('Image1','','images/product_suite_team_over.jpg',1)"><img name="Image1" border="0" src="images/product_suite_team.jpg" width="369" height="29"></a></td>

[ddadmin]

Yep, the syntax is incorrect. Try something like:

<a href="products/teambinder/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="changetext(content[0]); MM_swapImage('Image1','','images/product_suite_team_over.jpg',1)"><img name="Image1" border="0" src="images/product_suite_team.jpg" width="369" height="29"></a></td>

[davyd]

Thankyou SO much for your help, i really appreciate it. I promise im not going to make a pest of myself but i was wondering if you could help me with the second part of the code?
This was your solution which worked.
<a href="products/teambinder/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="changetext(content[0]); MM_swapImage('Image1','','images/product_suite_team_over.jpg',1)"><img name="Image1" border="0" src="images/product_suite_team.jpg" width="369" height="29"></a></td>
This is the original code that i would appreciate some help with to change it to buttons.
Im not sure in the code above where to put the additional onMouseOver="changetext(content[1])">
ORIGINAL CODE :
<a href="" onMouseOver="changetext(content[0])"><small>•</small></a><a href="products/qdms/index.html" onMouseOver="changetext(content[1])"><small>QDMS
- <font size="1">Document/Drawing Control System</font></small></a></font></strong></td>

Thank you

davydwhite@gmail.com

[ddadmin]

Generally you can embed multiple function calls within an event handler such as "onMouseover", by separating each function with a semicolon (. For example:

<a href="#" onMouseover="dothis(); dothat()">test</a>

With that said, if I understood your followup question, you would have something like:

onMouseOver="changetext(content[1]); MM_swapImage('Image1','','images/product_suite_team_over.jpg',1)"

[davyd]

Thanks again.
Below is how i have the code. Everything works except again the mouse over between buttons.
This code is different to the one who helped me with first.
Do i have the code in the wrong order?

<a href="products/qdms/index.html"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/product_suite_qdms_over.jpg',1)"><img name="Image1" border="0" src="images/product_suite_qdms.jpg" width="369" height="29" onMouseOver="changetext(content[1])"></a></td>

Thanks in advance
Davyd
Really appreciate this.

[ddadmin]

Hmm now I'm confused. Is the "2nd part" of the code basically a duplicate of the original, but with different images used? Why not just duplicate the solution I posted originally, but change the image srcs to the new ones?

[davyd]

sorry ! i should have been more specific;
these are the two different types of code



The first - the one you gave me works perfectly . The problem is the second block on code has an extra on mouseover event at the end of it.

This code works on changing the content as it is supposed to but will not change images on rollover.

CODE YOU GAVE THAT WORKS:<a href="products/teambinder/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="changetext(content[0]); MM_swapImage('Image1','','images/product_suite_team_over.jpg',1)"><img name="Image1" border="0" src="images/product_suite_team.jpg" width="369" height="29"></a></td>

this is the second block of code(original) without the buttons('images/product_suite_team_over.jpg)
the additonal mouse over code in bold.
face="Verdana"><a href="" onMouseOver="changetext(content[0])"><small>•</small></a><a href="products/qdms/index.html" onMouseOver="changetext(content[1])"><small>QDMS
- <font size="1">Document/Drawing Control System</font></small></a></font></strong></td>
</tr>
As you will notice in the second script there are two mouse over events,

onMouseOver="changetext(content[0])

onMouseOver="changetext(content[1]

one a the begining and then another at the end.
i havent added the buttons to it as im not sure where they would go in this second script.
I hope this makes sense to you
Thanks again for you help

[ddadmin]

There are two mouse over events, yes, but there are also two links in your code above, so each link technically only has one mouse over event? Am I getting this right? Either way though, adding additional function calls to a mouse over event as mentioned above just means separating them each with a semicolon. Using your above code:

<a href="" onMouseOver="changetext(content[0]); MM_swapImage('Image1','','images/product_suite_team_over.jpg',1)"><small>•</small></a><a href="products/qdms/index.html" onMouseOver="changetext(content[1]); MM_swapImage('Image1','','images/product_suite_team_over.jpg',1)"><small>QDMS 
- <font size="1">Document/Drawing Control System</font></small></a>

p.s: Please format your code using the CODE tag. This makes it a lot easier to read.

[davyd]

Hi.

Sorry i havent been very clear about this, my apologies.
i have uploaded the page for you to look at if you dont mind.

http://www.davyd.com.au/qa/index2%20test.htm

This page has the button with the correct code you gave me. (the long orange one).

The other links underneath this button are the original dynamic drive text tool tip script (text links)


I am trying to acheive the same thing ,(replacing the text link with the buttons).

My problem is: there is additonal code in the text links to the one that you fixed and if i use the same code for the first one(that you fixed) in any of the others NONE of the
mouseover effects work.

If you dont mind i would like the correct code for the remaining links to be in button form.

I hope this is clearer and once again sorry for wasting your time.

[ddadmin]

You'd probably end up with something like this. Be sure to change all the image paths and numbers of which content to show for each button:

<table width="99%" border="0" cellpadding="5" cellspacing="5">
                    <tr> 
                      <td>
                      <a href="products/teambinder/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="changetext(content[0]); MM_swapImage('Image1','','images/product_suite_team_over.jpg',1)"><img name="Image1" border="0" src="images/product_suite_team.jpg" width="369" height="29"></a></td>
                    </tr>
                    <tr> 
                      <td><a href="products/teambinder/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="changetext(content[0]); MM_swapImage('Image1','','images/product_suite_team_over.jpg',1)"><img name="Image1" border="0" src="images/product_suite_team.jpg" width="369" height="29"></a></td>
                    </tr>
                    <tr> 
                      <td><a href="products/teambinder/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="changetext(content[0]); MM_swapImage('Image1','','images/product_suite_team_over.jpg',1)"><img name="Image1" border="0" src="images/product_suite_team.jpg" width="369" height="29"></a></td>

                    </tr>
                    <tr> 
                      <td><a href="products/teambinder/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="changetext(content[0]); MM_swapImage('Image1','','images/product_suite_team_over.jpg',1)"><img name="Image1" border="0" src="images/product_suite_team.jpg" width="369" height="29"></a></td>
                    </tr>
                    <tr> 
                      <td height="31"><a href="products/teambinder/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="changetext(content[0]); MM_swapImage('Image1','','images/product_suite_team_over.jpg',1)"><img name="Image1" border="0" src="images/product_suite_team.jpg" width="369" height="29"></a></td>
                    </tr>
                    <tr> 
                      <td><a href="products/teambinder/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="changetext(content[0]); MM_swapImage('Image1','','images/product_suite_team_over.jpg',1)"><img name="Image1" border="0" src="images/product_suite_team.jpg" width="369" height="29"></a></td>

                    </tr>
                    <tr> 
                      <td><a href="products/teambinder/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="changetext(content[0]); MM_swapImage('Image1','','images/product_suite_team_over.jpg',1)"><img name="Image1" border="0" src="images/product_suite_team.jpg" width="369" height="29"></a></td>
                    </tr>
                    <tr> 
                      <td><strong><font
            face="Verdana"></font></strong></td>
                    </tr>
</table>