How to change an image link based on content in another page
<p>I want to put a image on my page (page1) that is a link to another page (page2), but I want the image that is displayed to be one of two possible images, based on the content of page2.</p>

<p>Page2 in this case is a wiki page that reports current status. If there are no problems to report, the image on page1 will be green in color. If there are problems listed, the image will be red.</p>

<p>My plan for accomplishing this is to use the html comment tags to embed either <code>&lt;!--STATUSRED--&gt;</code> or <code>&lt;!--STATUSGREEN--&gt;</code> on my wiki page. Then I figured I could use javascript, Jquery or something similar to check for the presence of my comment and alter the image on page1 accordingly. I am just not sure HOW exactly to do this.</p>

<p>I am also open to other ideas. Whatever solution I come up with, it has to be simple for the wiki user to change without requiring the user to change page1 (which is not part of the wiki).</p>

<p><strong>UPDATE:</strong></p>

<p>What I finally ended up doing:</p>

<pre><code>$(document).ready(function() {
    statusCheck();
    setInterval(statusCheck,300000);
}

function statusCheck() {
    $.ajax({
        type: "GET",
        url: "path/to/wiki/MainPage.ashx",
        dataType: "html",
        cache: false,
        success: function(html) {
            $('#statusImage').attr('src', function() {
                if ($(html).find("#statusGreen").length)
                {
                    return '/images/green.gif';
                }
                else
                {
                    return '/images/red.gif';
                }
            });         
        },
        error: function(request,status, error) {
            $('#statusImage').attr('src', '/images/red.gif');
        }       
    });
}
</code></pre>

<p>and then on the wiki page I just change the id attribute on the div in question to either 'statusGreen' or 'statusRed' like so:</p>

<pre><code>&lt;div id="statusGreen"&gt;
&lt;font size="5" color="green"&gt;No issues to report.&lt;/font&gt;
&lt;/div&gt;
</code></pre>

<p>and the image I want to change gets a 'statusImage' id:</p>

<pre><code>&lt;img id="statusImage" width="95" height="95" border="0" /&gt;
</code></pre>
