PDA

View Full Version : Textual tool tip -creating effect with buttons



davyd
09-23-2007, 08:15 PM
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
09-24-2007, 01:22 AM
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
09-24-2007, 07:32 AM
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
09-24-2007, 07:50 AM
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
09-25-2007, 04:55 AM
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
09-25-2007, 07:39 AM
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
09-25-2007, 10:53 PM
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
09-26-2007, 08:38 AM
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
09-27-2007, 12:32 AM
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
09-27-2007, 05:43 AM
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>

davyd
09-27-2007, 10:36 PM
Hi
I put the code above into the page but as you will see the mouse over effects dont work.

http://www.davyd.com.au/test/index3.htm

this is the other page with the original code

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


Any Suggestions? :)

Many thanks for your help

Davyd

ddadmin
09-28-2007, 07:30 AM
Hmmm everything looks fine, except within each button HTML, you need to change the name of the image accordingly. For example:


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

So assuming this is the 2nd button on the page, the name needs to be changed in the above areas so it's unique relative to the other buttons. The name attribute needs to be unique/different for each button.

davyd
09-28-2007, 01:23 PM
it work !!
i was beginning to think it was never going to happen.

Many many thanks for your assistance, i really appreciate you taking the time to help.

Cheers
Davyd

ddadmin
09-28-2007, 10:10 PM
Miracles do happen! :)