Help Hiding An Image

Discussion in 'Programming & Scripting' started by Nothinbeter2do, Jun 22, 2009 with 2 replies and 203 views.

  1. Nothinbeter2do

    Nothinbeter2do Banned

    Messages:
    2,425
    Ratings:
    526
    Hello,

    can anybody help me with hiding an image?


    The current code I'm using is:
    Code:
                <div id="gamertag">
    <center>
    <embed src="[URL]http://card.mygamercard.net/nothinbeter2do.swf[/URL]" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" type="application/x-shockwave-flash" width="179" height="121"></embed>
    <img src="[URL]http://avatar.xboxlive.com/avatar/nothinbeter2do/avatar-body.png[/URL]">
    
    
    [<a style="cursor:pointer;" onclick="document.getElementById('gamertag').style.display = 'none')">Hide</a>]
    </center>
    </div>
    But when I click the Hide link, it does nothing. This is the code I'm using to hide/show the image:
    Code:
    [<a style="cursor:pointer;" onclick="document.getElementById('gamertag').style.display = 'none')">Hide</a>]
     
  2. Abolfazl

    Abolfazl Contributor

    Messages:
    2,798
    Ratings:
    254
    Try this

    Some keywords to help you out are (toggle, content, javascript, script, code)
     
  3. FRABAR

    FRABAR Getting There

    Messages:
    1,110
    Ratings:
    310
    It's because you have no css to change, and also nobody uses <center> tags anymore. I rewrote it and also made it reusable so you can call the hideShow() function as many times as you want.
    Copy and paste this and it'll have a Show/Hide button at the bottom like this in case you didn't mean to hide it. If you don't want it be re-shown, just extend the gamertag div around the <a> tag.

    HTML:
    <!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=utf-8" />
    <title>showhide</title>
    
    <script type="text/javascript">
    function hideShow(hideShowDiv) {
    var theElementStyle = document.getElementById(hideShowDiv);
    if(theElementStyle.style.display == "none") {
    theElementStyle.style.display = "block";
    } else {
    theElementStyle.style.display = "none";
    }
    }
    </script>
    
    <style type="text/css">
    div.center {
    text-align: center;
    }
    
    #gamertag {
    display: block; /* Default display option */
    }
    </style>
    
    </head>
    <body>
    <div class="center">
    <div id="gamertag">
    <embed src="http://card.mygamercard.net/nothinbeter2do.swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" type="application/x-shockwave-flash" width="179" height="121"></embed>
    <img src="http://avatar.xboxlive.com/avatar/nothinbeter2do/avatar-body.png" alt="avatar" />
    
    </div>
    <a href="#" style="cursor:pointer;" onclick="hideShow('gamertag'); return false;">Hide/Show</a>
    </div>
    
    </body>
    </html>
     
    • Like Like x 1

Share This Page