You can achieve the desired goal by adding the following script I whipped up to your skin. The net result will be two hyperlinks -- Text Only and Text+Images. The user can click on the desired link to toggle images on/off on the page. Bear in mind that support for removing background images is flaky, so you may need to customize the script.
<script type="text/javascript">
var lastRuleDynamicallyAdded = false;
function addCSSRule (selectorText, declarations)
{
if (document.styleSheets.length > 0)
{
var styleSheet = document.styleSheets[document.styleSheets.length - 1];
if (styleSheet.insertRule)
{
styleSheet.insertRule(selectorText + ' { ' + declarations + ' }',styleSheet.cssRules.length);
lastRuleDynamicallyAdded = true;
}
else if (styleSheet.addRule)
{
styleSheet.addRule(selectorText, declarations);
lastRuleDynamicallyAdded = true;
}
}
}
function removeLastCSSRule (count)
{
if (document.styleSheets.length > 0)
{
var styleSheet = document.styleSheets[document.styleSheets.length - 1];
if (styleSheet.deleteRule)
{
for(var r=0;r<count;r++)
styleSheet.deleteRule(styleSheet.cssRules.length-1);
lastRuleDynamicallyAdded = false;
}
else if (styleSheet.removeRule)
{
for(var r=0;r<count;r++)
styleSheet.removeRule(styleSheet.rules.length-1);
lastRuleDynamicallyAdded = false;
}
}
}
function disableImages()
{
if (lastRuleDynamicallyAdded) return;
addCSSRule("img","display:none;");
addCSSRule("*","background-image:none");
}
function enableImages()
{
if (!lastRuleDynamicallyAdded) return;
removeLastCSSRule(2);
}
</script>
<div><a href=" void(0)" onClick="disableImages()">Text Only</a> | <a href=" void(0)" onClick="enableImages()">Text and Images</a></div>
Nik