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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder GSimpson's Avatar
    Join Date
    Aug 2006
    Location
    New Zealand
    Posts
    268
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Change text on mouseover.

    Hello,
    I'm trying to put a site together and this time I'm going for an interactive feel.

    Code:
    <p id="status">[Closed]</p>
    Thats the html of it. What i'm trying to accomplish is when the mouse goes onto the <p>, the [Closed] then turns into

    Code:
    <a href="index.php">Open</a>
    but I can't get this figured. Could someone help me?

    Thnx!

  • #2
    SSJ
    SSJ is offline
    Regular Coder
    Join Date
    Mar 2007
    Posts
    230
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Try Following:

    Code:
    <script>
    function changeText()
    {
    document.getElementById("status").innerHTML='<a href="index.php">Open</a>'
    }
    </script>
    <p onMouseOver="changeText()" id="status"> [closed] </p>
    Last edited by SSJ; 03-02-2007 at 01:07 PM.

  • #3
    Regular Coder GSimpson's Avatar
    Join Date
    Aug 2006
    Location
    New Zealand
    Posts
    268
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Ok, That works like a charm. Now say I wanted it so that when the mouse goes out of the <p> it goes back to [closed]. I tried using onmouseout but when I hovered the link it try switching back towards the [closed]. So how would I fix that.

  • #4
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Wow the first question in the Ajax forum and it is not Ajax.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there GSimpson,

    as A1ien51 has pointed out, you are in the wrong forum.
    Perhaps a moderator will reposition it for you.

    Anyway here is a possible solution to your problem...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    .hide {
        display:none;
     }
    .show {
        display:block;
     }   
    </style>
    
    <script type="text/javascript">
       var el;
    window.onload=function() {
       el=document.getElementById('status');
       el.onmouseover=function() {
       changeText('hide','show')
     }
       el.onmouseout=function() {
       changeText('show','hide');
      }
     }
    function changeText(cl1,cl2) {
       document.getElementById('span1').className=cl1;
       document.getElementById('span2').className=cl2;
    }
    </script>
    
    </head>
    <body>
    
    <p id="status">
    <span id="span1">[Closed]</span>
    <span id="span2" class="hide"><a id="link" href="index.php">Open</a></span>
    </p>
    
    </body>
    </html>
    
    
    
    coothead

  • #6
    Regular Coder GSimpson's Avatar
    Join Date
    Aug 2006
    Location
    New Zealand
    Posts
    268
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I always figured ajax to be the interactive one, so I posted here. The sooner someone moves me ther better. . Thanks coothead.

  • #7
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post
    I was searching on Google for the answer to this question -- and I came acrossed this answer. That helped me out a great deal. I enjoy simple solutions like that. Thanks.

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    No problem, you're welcome.

  • #9
    bry
    bry is offline
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    Hi there GSimpson,

    as A1ien51 has pointed out, you are in the wrong forum.
    Perhaps a moderator will reposition it for you.

    Anyway here is a possible solution to your problem...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    .hide {
        display:none;
     }
    .show {
        display:block;
     }   
    </style>
    
    <script type="text/javascript">
       var el;
    window.onload=function() {
       el=document.getElementById('status');
       el.onmouseover=function() {
       changeText('hide','show')
     }
       el.onmouseout=function() {
       changeText('show','hide');
      }
     }
    function changeText(cl1,cl2) {
       document.getElementById('span1').className=cl1;
       document.getElementById('span2').className=cl2;
    }
    </script>
    
    </head>
    <body>
    
    <p id="status">
    <span id="span1">[Closed]</span>
    <span id="span2" class="hide"><a id="link" href="index.php">Open</a></span>
    </p>
    
    </body>
    </html>
    
    
    
    coothead
    Like the above posted I too found this on google and found it very helpful. However, I am using this 4 times in one page and am finding it only works on the first one, mousing (sp?) over the first one works fine the other 3 not.

    How would i modify it?

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    excuse me butting in but was getting bored

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    .hide {
        display:none;
     }
    .show {
        display:block;
     }
    </style>
    
    <script type="text/javascript">
    var IdAry=['status1','status2','status3','status4'];
    window.onload=function() {
     for (var zxc0=0;zxc0<IdAry.length;zxc0++){
      var el=document.getElementById(IdAry[zxc0]);
      if (el){
       el.onmouseover=function() {
         changeText(this,'hide','show')
        }
       el.onmouseout=function() {
         changeText(this,'show','hide');
        }
      }
     }
    }
    function changeText(obj,cl1,cl2) {
       obj.getElementsByTagName('SPAN')[0].className=cl1;
       obj.getElementsByTagName('SPAN')[1].className=cl2;
    }
    </script>
    
    </head>
    <body>
    
    <p id="status1">
    <span id="span1">[Closed]</span>
    <span class="hide"><a  href="index.php">Open</a></span>
    </p>
    <p id="status2">
    <span id="span1">[Closed]</span>
    <span class="hide"><a  href="index.php">Open</a></span>
    </p>
    <p id="status3">
    <span id="span1">[Closed]</span>
    <span class="hide"><a  href="index.php">Open</a></span>
    </p>
    <p id="status4">
    <span id="span1">[Closed]</span>
    <span class="hide"><a  href="index.php">Open</a></span>
    </p>
    
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    bry (12-07-2008)

  • #11
    bry
    bry is offline
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi, just thanked you for that


    That works very well thank you very much

  • #12
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there bry,

    if you are still interested, this is how I would approach the problem...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <style type="text/css">
    .hide {
        display:none;
     }
    .show {
        display:inline;
     }   
    </style>
    
    <script type="text/javascript">
    if(window.addEventListener){
       window.addEventListener('load',showlinks,false);
     }
    else { 
    if(window.attachEvent){
       window.attachEvent('onload',showlinks);
      }
     }
    
    function showlinks() {
    
       lis=document.getElementById('nav').getElementsByTagName('li');
    
    for(c=0;c<lis.length;c++){
    
    lis[c].onmouseover=function() {
       this.getElementsByTagName('span')[0].className='hide';
       this.getElementsByTagName('span')[1].className='show';
     }
    
    lis[c].onmouseout=function() {
       this.getElementsByTagName('span')[0].className='show';
       this.getElementsByTagName('span')[1].className='hide';
       }
      }
     }
    </script>
    
    </head>
    <body>
    
    <ul id="nav">
    <li>
    <span>[Closed]</span>
    <span class="hide"><a href="http://www.codingforums.com/">codingforums.com</a></span>
    </li><li>
    <span>[Closed]</span>
    <span class="hide"><a  href="http://www.google.com/">google.com</a></span>
    </li><li>
    <span>[Closed]</span>
    <span class="hide"><a  href="http://www.bbc.co.uk/">bbc.co.uk</a></span>
    </li><li>
    <span>[Closed]</span>
    <span class="hide"><a  href="http://w3c.org/">w3c.org</a></span>
    </li>
    </ul>
    
    </body>
    </html>
    
    coothead
    Last edited by coothead; 12-07-2008 at 04:42 PM.

  • #13
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If someone wants to tackle making the letter on either side half the size as the large one...... That would be cool. I'm going to try.

    <style type="text/css">
    a
    {
    text-decoration:none;
    color:inherit;
    }
    .hide {
    display:none;
    }
    .show {
    display:inline;
    }
    </style>


    <script type="text/javascript">
    var IdAry=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y', 'Z','0','1','2','3','4','5','6','7','8','9'];
    window.onload=function() {
    for (var zxc0=0;zxc0<IdAry.length;zxc0++){
    var el=document.getElementById(IdAry[zxc0]);
    if (el){
    el.onmouseover=function() {
    changeText(this,'hide','show')
    }
    el.onmouseout=function() {
    changeText(this,'show','hide');
    }
    }
    }
    }
    function changeText(obj,cl1,cl2) {
    obj.getElementsByTagName('SPAN')[0].className=cl1;
    obj.getElementsByTagName('SPAN')[1].className=cl2;
    }
    </script>




    <script type="text/javascript">
    for (var i = 0; i < IdAry.length; i++) {
    document.write('<font size="1" color="#009900" id="' + IdAry[i] + '"><span id="span1">' + IdAry[i] + '</span><span class="hide"><a href="index.php"><font size="+2"> ' + IdAry[i] + ' </font></a></span></font>');
    }
    </script>

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    You mean like this?
    Code:
    <html>
    <head>
    <style type="text/css">
    div#EFFECTS
    {
        position: relative;
        height: 100px;
    }
    div#EFFECTS a
    {
        position: relative;
        top: 20px;
        color: #009900;
        font-size: 16px;
        line-height: 50px;
        text-decoration: none;
    }   
    </style>
    <script type="text/javascript">
    var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    
    function setUp( )
    {
        for ( var c = 0; c < chars.length; ++c )
        { 
            var link = document.getElementById("CHAR"+c);
            link.onmouseover = function() { highlight(this); }
            link.onmouseout  = normal;
        }
    }
    function highlight(target)
    {
        var idnum = parseInt(target.id.substring(4));
        for ( var c = 0; c < chars.length; ++c )
        { 
            var link = document.getElementById("CHAR"+c);
            link.style.fontSize = 
                c == idnum ? "32px" : 
                     ( c-1 == idnum || c+1 == idnum ) ? "24px" : "16px";
        }
    }
    function normal()
    {
        for ( var c = 0; c < chars.length; ++c )
        { 
            document.getElementById("CHAR"+c).style.fontSize="16px";
        }
    }
    
    </script>
    </head>
    <body onload="setUp( )">
    <div id="EFFECTS">
    <script type="text/javascript">
    for ( var c = 0; c < chars.length; ++c )
    { 
        var char = chars.charAt(c);
        document.write('<a href="doSomething.php?withCharacter='+char+'" id="CHAR'+c+'">'+char+'</a>');
    }
    </script>
    <a href="#" onclick="return false;" style="font-size: 32px;">&nbsp;</a>
    </div>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    By the by, the <font> tag is considered obsolete.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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