A Flash Developer Resource Site

Results 1 to 11 of 11

Thread: [RESOLVED] Javascript rollover text swap

  1. #1
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,930

    resolved [RESOLVED] Javascript rollover text swap

    I'm using Javascript to swap out text when an image is rolled over. Is there a way to get the original text on rollout so I can use the same function for multiple chunks of text??

    You can see an example of what I'm doing (with the code) here:
    http://www.brianwpiper.com/css/js3.html

    Thanks!!
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

  2. #2
    Bearded (M|G)od MyFriendIsATaco's Avatar
    Join Date
    Dec 2002
    Location
    Awesomeville.
    Posts
    3,046
    You can just change your function like so:
    Code:
    function rollOverImage(obj){
        var el = document.getElementById("foo");
        var original = el.innerHTML;
        el.innerHTML = "Now this has changed too";
        obj.onmouseout = function(){
            el.innerHTML = original;
        };
    }

  3. #3
    Junior Member
    Join Date
    May 2009
    Posts
    4
    hope this code will solve your porblem...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Change</title>
    <script type="text/JavaScript">
    <!--
    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_setTextOfTextfield(objName,x,newText) { //v3.0
    var obj = MM_findObj(objName); if (obj) obj.value = newText;
    }
    //-->
    </script>
    </head>
    
    <body>
    
    <div align="center">
    <input name="text" id="text" border="0" />
    </div>
    
    <p><a href="javascript:;" onmouseover="MM_setTextOfTextfield('text','','This is the first change')">
    <img src="img_small01.jpg" alt="img_small01" width="60" height="60" /></a></p>
    <p><a href="javascript:;" onmouseover="MM_setTextOfTextfield('text','','This is the second change')">
    <img src="img_small02.jpg" alt="img_small02" width="60" height="60" /></a></p>
    </body>
    </html>

  4. #4
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,930
    PERFECT!!! Thanks for the help!! Works great!!

    NICE!!!
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

  5. #5
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,930
    Shoot...thought I was all set with this (and marked it resolved)...BUT, I need to apply the same rollover text to multiple ids, and when I add another image with the same id, it makes the rollover on the first id on the page...how can I make the function work for each id on the page?? I'm sure it's some sort of for loop, but I'm not sure how to set it up in js...I could do it in AS, but not sure how it translates...
    HELP!!
    You can see what I've got at:
    http://brianwpiper.com/css/js3.html

    Thanks!!
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

  6. #6
    Bearded (M|G)od MyFriendIsATaco's Avatar
    Join Date
    Dec 2002
    Location
    Awesomeville.
    Posts
    3,046
    For one, two objects can't have the same ID, you'd need to use a class. Second, there is no native document.getElementsByClassName. Well, there is, but only Firefox 3 and Safari 3 implement it, so you can't use it yet. SO, that brings us to the simplest solution: bust out jQuery! Take a look at how I modified this function:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title>multi rollover</title>
    <
    meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

    <
    script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <!-- Oh heylookit's jQuery! -->
    <script type="text/javascript">

    function rollOverImage(obj, class, newText){
        $(obj).unbind("mouseout");  //remove all old mouseout event listeners so things don'
    t overlap.
        $(
    '.'+class).each(function(){  //loop through all objects that match the class name
            
    var = $(this);  //store local reference to this
            
    var original t.text();  //better than .innerHTML with jQuery
            
    t.text(newText);
            $(
    obj).mouseout(function(){  //Attach event listener for mouseout to the rolled over object
                
    t.text(original);  //sets it back to the original text
            
    })
        });
    }

    </
    script>

    </
    head>
    <
    body>
    <
    div>
    <
    img src="green.jpg" alt="" onmouseover="rollOverImage(this, 'happy', 'I\'m happy!')"/>
    </
    div>
    <
    div class="happy">
    original text
    </div>

    <
    div>
    <
    img src="green.jpg" alt="" onmouseover="rollOverImage(this, 'happy', 'I\'m happy, also!')"/>
    </
    div>
    <
    div class="happy">
    original text #2
    </div>

    </
    body>
    </
    html
    Last edited by MyFriendIsATaco; 05-14-2009 at 11:50 AM. Reason: Added in comments.

  7. #7
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,930
    That's really close...only thing is that one rollover changes both the objects rollovers...

    I actually got it to work using the following:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <title></title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <script type="text/javascript">
    
    function rollOverImage(obj){
        var el;    
            el = obj.parentNode.nextSibling.nextSibling;
        var original = el.innerHTML;
        el.innerHTML = "Happy";
        obj.onmouseout = function(){
            el.innerHTML = original;
        }
    }
     function rollOverSad(obj){
        var el;    
            el = obj.parentNode.nextSibling.nextSibling;;
        var original = el.innerHTML;
        el.innerHTML = "Sad";
        obj.onmouseout = function(){
            el.innerHTML = original;
        }
    }
    </script>
    
    </head>
    <body>
    <div>
    <img src="green.jpg" alt="" onmouseover="rollOverImage(this)"/>
    </div>
    <div id="happy">
    original text
    </div>
    
    <div>
    <img src="green.jpg" alt="" onmouseover="rollOverImage(this)"/>
    </div>
    <div>
    original text #2
    </div>
    
    <div>
    <img src="green.jpg" alt="" onmouseover="rollOverSad(this)"/>
    </div>
    <div>
    original text #3
    </div>
    
    
    </body>
    </html>
    Which you can see at:
    http://www.brianwpiper.com/css/js3.html

    Let me know if you see any problems with that, and THANK YOU for the help on this...certainly need to bone up on my css/javascript and jquery...

    Thanks!!!
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

  8. #8
    Bearded (M|G)od MyFriendIsATaco's Avatar
    Join Date
    Dec 2002
    Location
    Awesomeville.
    Posts
    3,046
    Ha, I was under the impression that that's what you wanted!

    Sorry about that, then. I thought it was weird myself, but ignored that hunch. If that's the way you wanna go, then use this revised function:
    Code:
    function rollOverImage(obj, newText){
        var el;    
            el = obj.parentNode.nextSibling.nextSibling;
        var original = el.innerHTML;
        el.innerHTML = newText;
        obj.onmouseout = function(){
            el.innerHTML = original;
        }
    }
    Then for your onmouseover:
    Code:
    onmouseover="rollOverImage(this, 'Happy')"

  9. #9
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,930
    SWEET!! That's perfect!! Keeps it down to one function and makes it easy to update for the client...amazing how something can start out with so much code and then get down to the cleanest chunk based on what you really need...

    Thanks again!!!
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

  10. #10
    Junior Member
    Join Date
    May 2009
    Posts
    1
    this works great! is there a way for buttons in a flash menu to swap text like that upon being clicked?

  11. #11
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,930
    Absolutely...it's much easier to do in flash (at least for me), than in js...
    Just change the .text in your dynamic field on rollover...

    Hope that helps!
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center