Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Textual tool tip -creating effect with buttons

  1. #1
    Join Date
    Sep 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow Textual tool tip -creating effect with buttons

    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>

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Yep, the syntax is incorrect. Try something like:

    Code:
    <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>

  3. #3
    Join Date
    Sep 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default textual tool tip

    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

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

    Code:
    <a href="#" onMouseover="dothis(); dothat()">test</a>
    With that said, if I understood your followup question, you would have something like:

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

  5. #5
    Join Date
    Sep 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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?

  7. #7
    Join Date
    Sep 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Textual tool tip

    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

  8. #8
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    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.

  9. #9
    Join Date
    Sep 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Hopefully this will help

    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.

  10. #10
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •