Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Dec 2004
    Location
    Minnesota
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change Div text onMouseOver????

    OK, I have 6 text buttons like so::

    <div id="p1">1</div><div id="p2">2</div><div id="p3">3</div>
    <div id="p4">4</div><div id="p5">5</div><div id="p6">6</div>

    Now what I want to be able to do is when I mouseOver one of the above div a corresponding Div will appear beneath these above buttons.

    Nothing fancy, just straight up text in these things.

    So I would give all the content divs unique ID's like text1, text2, text3, etc. So onMouseOver of p1 above the contents of text1 would appear in the div. IS this possible?

    Here is a page for reference of what I am trying to add this to.... in the 'Process' section I want to rollover the 1-6 buttons and change the text below them...... http://www.skaaren.com/sifr/layout4.asp

    Cheers All!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    you should be able to adapt this to fit your needs
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Single Mouseover</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript"><!--
    var firsttext='This is the 1st div'
    var secondtext='This is the 2nd div'
    var thirdtext='This is the 3rd div'
    var fourthtext='This is the 4th div'
    var fifthtext='This is the 5th div'
    var sixthtext='This is the 6th div'
    function writetext(what){
    document.getElementById('textarea').innerHTML=''+what+'';
    }
    function notext(){
    document.getElementById('textarea').innerHTML='';
    }
    //-->
    </script>
    </head>
    
    <body>
    <div id="p1" onmouseover="writetext(firsttext)" onmouseout="notext()">1</div>
    <div id="p2" onmouseover="writetext(secondtext)" onmouseout="notext()">2</div>
    <div id="p3" onmouseover="writetext(thirdtext)" onmouseout="notext()">3</div>
    <div id="p4" onmouseover="writetext(fourthtext)" onmouseout="notext()">4</div>
    <div id="p5" onmouseover="writetext(fifthtext)" onmouseout="notext()">5</div>
    <div id="p6" onmouseover="writetext(sixthtext)" onmouseout="notext()">6</div>
    <div id="textarea"></div>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Dec 2004
    Location
    Minnesota
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aero, you're awesome.... thank you sooo much!!!!

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    yw, and interesting site u got there

  • #5
    New Coder
    Join Date
    Dec 2004
    Location
    Minnesota
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i am getting js errors for some reason... the code shoud be correct?!?!

    Object Expeceted error line 220..... hmmmmm.......
    Last edited by pixelEngine; 03-26-2005 at 08:28 PM.

  • #6
    New Coder
    Join Date
    Dec 2004
    Location
    Minnesota
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK.... got it, i was accidentally including the script tag in the #include file.... therefore it was in there twice.

    cheers!

  • #7
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    First post on this forum .

    This is a great little bit of code, but to further enhance it's usability and look, how could I set a default tab that show when the page is opened?

    And how could I set the textarea to stay visible instead of disappearing on mouseout?

    Thanks in advance.

  • #8
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm going to give myself a bump on this thread by answering part of my own question

    By removing the onmouseout the text will be left visible.

    But I still need a solution for my other problem. How could I go about making some default text visible onload.

    Any ideas?

  • #9
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Why not just add highlighted:
    Code:
    <div id="textarea">This is the default text</div>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #10
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thankyou rangana, I just tried this and it works well.


  •  

    Posting Permissions

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