Flipping Div with jQuery (or CSS3)

I have a div that contains an image which is a link to another page on the site. I want to flip this. The content on the 'reverse' of the image will be text which may also contain further links.

I have seen Flip, QuickFlip 1&2 and various other plug-ins and tuts for CSS3 Transitions BUT the issue is they all (as far as I have found) involve clicking the div itself to execute the flip.

Because the div contains links front and back this obviously won't work for my purposes and what I need is a button/clicker outside the div/flip-area. For some reason I haven't seen a开发者_运维知识库ny such thing.

Anyone know of any or have any ideas?

Would something like this be sufficient? (With the use of one of the aforementioned plugins.)

$('#your_button_outside_div').click(function(){
    $('#div_that_you_normally_would_have_to_click').trigger('click');
});

and then you can put a 100% width, height invisible DIV inside the 'supposed to be clicked' DIV and do this to prevent clicks within the DIV from executing the flip:

$('#masking_div').click(function(e){
    e.stopImmediatePropagation();
});

Just make sure to adjust the z-indexes to your links, etc are 'above' the masking DIV.

You could use those plugins and trigger a click event

$("#the_element").click(); //This will trigger the plugin events

Hope this helps. Cheers

Wanovak is on the right track, but you'll need a more cross-browser friendly approach to stopping event propagation. Try this:

$('#masked_text').click(function(e){

    // Prevent click event from bubbling up the DOM to the parent container
    try
    {
        event.stopPropagation();
    }
    catch(err)
    {
        // IE does it this way
        window.event.cancelBubble=true;
    }

});