jQuery: Modify the structure of an input

i have wrote today because i need some help with a simple function in jquery for modify the structure of an input [reCaptch开发者_高级运维a] and hide the image showed.

The code of the page(s) that contains the reCaptcha plugin is:

http://pastebin.com/Qahph2ZB

Is possible to make this in Jquery?

BEFORE ------------------------------------------------------------> AFTER

(Because i have saw a video of a script[Made in Js/Jquery] that make this effect :-(

I have tryed but nothing :-(

P.S: I can't modify the original structure of the page :-( ... I would like to inject the Jquery with Greasemonkey.

Thanks in advance.

Kind Regards

Luca.

You could use CSS to place DIV elements over the text and the input area of the captcha?

Check out the complete source here: http://gist.github.com/632560

If you modify your code (I am using the code from page 1) to the following:

<div id="DivCaptcha">
    <!-- <span class="Instructions" id="Instructions">Fill the captcha.</span> -->
    <span class="Instructions" id="Instructions">Fill the captcha.</span>
    <form onsubmit="return submit();" action="">
    <div id="captcha-container">
        <script type='text/javascript'> var RecaptchaOptions = { theme : 'white' }; </script> <script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LfF970SAAAAAFR6KJNsdJX6Itf43k_HWbxRcU4a "></script>
        <noscript>
            <iframe src="http://api.recaptcha.net/noscript?k=6LfF970SAAAAAFR6KJNsdJX6Itf43k_HWbxRcU4a " height="300" width="500" frameborder="0"></iframe><br/>
            <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
            <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
        </noscript>       
        <div id="cover-captcha">
        </div>      
        <div id="cover-input">
        </div>
    </div>
    <input type="submit" id="submit" value="Submit!">
</div>

And then you add the following CSS to your page:

#captcha-container {
    position:relative;
}
#cover-captcha {
    position:absolute;
    top:10px;
    left:10px;
    width:295px;
    height:55px;
    z-index:9999;
    background-color:#fff;
}
#cover-input {
    position:absolute;
    top:96px;
    left:26px;
    width:150px;
    height:20px;
    z-index:9999;
    background-color:#fff;
}

It will cover the elements you want covered. You can then use jQuery to show/hide these elements when you want like so:

<input type="button" id="show-hide" value="Show/Hide Captcha fields"/>
<script>
    $("#show-hide").click(function(e){
        $("#cover-captcha, #cover-input").toggle();
    });
</script>

EDIT: In response to your comment.. Try this:

$("#recaptcha_response_field").hide();
$("#recaptcha_image").hide();