SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Odd Mouseover on Text

    Ok, I know I have seen how to create this effect but now that I need it I cannot find it And being new to Javascript, of course I am having problems... (how many times have you heard that ) I know it involved basic dhtml and getElementbyID()... Any help would be MUCH appreciated!!

    This is an example of what I'm looking for. 3 lines of text.

    text 1
    text 2
    text 3

    when user mouses over text 1, this is what should happen:

    text 1
    text 2
    text 3

    When you mouse over the other "texts" different effects happen much like the first effect, but I think once I get the first one the rest should be easier to complete on my own.

  2. #2
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <script type="text/javascript">
    function changeText(t,c,s){ t.style.color=c; t.style.fontSize=s; }
    </script>
    <div onmouseover="changeText(this,'red','36px')" onmouseout="changeText(this,'black','12px')">text</div>
    <div onmouseover="changeText(this,'blue','26px')" onmouseout="changeText(this,'black','12px')">text</div>
    <div onmouseover="changeText(this,'green','16px')" onmouseout="changeText(this,'black','12px')">text</div>

  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, but that's almost what I need... I will try to put a better example of what I mean, sorry for the mis-communication:

    On the screen you will see 3 lines of text:

    text1
    text2
    text3

    Now when the user puts the mouse over "text1" it will affect "text1" as well as "text2" and "text3" to look like this:

    text 1
    text 2
    text 3

    Then if the user puts their mouse over "text2" it will affect all 3 "text's" again, but in a different way, like this:

    text1
    text2
    text3

    Then, when the user puts their mouse over "text3" it will affect all 3 again, but appear like this:

    text1
    text2
    text3

  4. #4
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <script type="text/javascript">
    function changeText(){ 
    arguments[0].style.color="blue"; arguments[0].style.fontSize="36px";
    arguments[1].style.color="red"; arguments[1].style.fontSize="26px";
    arguments[2].style.color="green"; arguments[2].style.fontSize="16px";
    }
    </script>
    
    <div id ="div0" onmouseover="changeText(this,document.getElementById('div1'), document.getElementById('div2'))" >text</div>
    <div id="div1" onmouseover="changeText(this,document.getElementById('div2'), document.getElementById('div0'))" >text</div>
    <div id="div2" onmouseover="changeText(this,document.getElementById('div0'), document.getElementById('div1'))" >text</div>

  5. #5
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's perfect! Thank you soooo much!!


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
  •