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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hide and show another image

    Hi, i need a help to do one think.
    I want help to do this
    "use strict";
    var switchText = document.getElementById("27_faq");
    var elToggled = document.getElementById("27");
    elToggled.style.display = "block";
    switchText.addEventListener("click", function(){
    if(elToggled.style.display == "block") {
    elToggled.style.display = "none";
    } else {
    elToggled.style.display = "block";
    }
    }, false);
    <span id="27_faq" style="cursor: pointer; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-weight: bold; color: #1A72D3;">
    <img src="http://static.commentcamarche.net/pt.kioskea.net/faq/images/1395-kDlKsmPcL7rN9FGg-s-.png" />
    </span>
    <br>
    <span id="27" style="font-family: Verdana, Geneva, sans-serif; font-size: 11px; display: none;">
    <p style="padding: 10px; background-color: #FFFACD; ">Sim, todo divulgador tem no máximo 90 dias para criar as demais contas a partir do 1º cadastro.<br>Mas só será permitido criar a conta abaixo do cadastro com o mesmoF.</p>
    </span>
    http://jsfiddle.net/sXRNc/8/
    How do I get when I click the image it disappears and another appears?
    Thanks

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Just for starters, id's are supposed to start with a letter or underline, not with a digit.

    And why put all those styles inline instead of in the <style> section, where they belong?

    And what's the purpose of that <span> surrounding your image? Especially using styles that will never be used in the <span>?

    Why not keep it SIMPLE?
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #faq_27 {
        cursor: pointer;
    }
    #q27 {
        font-family: Verdana, Geneva, sans-serif; 
        font-size: 11px;
        padding: 10px; 
        background-color: #FFFACD; 
        display: none;
    }
    </style>
    </head>
    <body>
    <img id="faq_27" src="http://static.commentcamarche.net/pt.kioskea.net/faq/images/1395-kDlKsmPcL7rN9FGg-s-.png" /> 
    <br> 
    <p id="q27">
        Sim, todo divulgador tem no máximo 90 dias para criar as demais contas a 
        partir do 1º cadastro.<br>
        Mas só será permitido criar a conta abaixo do cadastro com o mesmoF.
    </p> 
    
    <script type="text/javascript">
    var altimages = [
        "http://static.commentcamarche.net/pt.kioskea.net/faq/images/1395-kDlKsmPcL7rN9FGg-s-.png",
        "http://static.ccm2.net/www.commentcamarche.net/actualites/images/5862784-51e4cecas.png"
    ];
    
    document.getElementById("faq_27").onclick = function()
    {
        var q = document.getElementById("q27");
        if ( q.style.display == "block" )
        {
            q.style.display = "none";
            this.src = altimages[0];
        } else {
            q.style.display = "block";
            this.src = altimages[1];
        }
    };
    </script>
    </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.


  •  

    Tags for this Thread

    Posting Permissions

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