How do I swap (non-background) images based on detected browser language?

I'd like to:

1. Display one url image in a paragraph tag (French flag) that, a. hyperlinks to one url, AND b. is displayed based on the detected browser language fr_ca

AND

2. Display a different url image in a paragraph tag (American flag) that, a. hyperlinks to a different url from above, AND b. is displayed based on the detected browser language en, AND c. hides the fr_ca paragraph tag above

I have access only to the CSS and HTML inline or via style block (not CSS file) or other server-side scripts.

Here's an example of what I'm thinking but not sure how to execute:

    <p .lang_fr_ca><a href="http://ift.tt/290Ozpc" target="_parent"><img alt="" class="flag" data-pin-nopin="true" src="http://ift.tt/291tI1b" /></a>

    <p .lang_en><a href="http://ift.tt/290OeCY" target="_parent"><img alt="" class="flag" data-pin-nopin="true" src="http://ift.tt/291tION" /></a></p>