Show one thing if JS is turned on, another if not?

[JonathanS]

http://JWSquire.com <-- my website.

I have the (CSS) opacity set to 30% on the images and use this free
snippet of JavaScript that will reset the CSS to this when the mouse is
NOT over a image. When it rolls over, it shows it at 100%.

Now, how would I go about coding it so that if a user has JavaScript
turned off in their browser, it will automatically set the opacity set back
to 100%? So that way they see the regular image...

Any help would be much welcomed

[cranial-bore]

You are probably applying a class to the elements to set the opacity to 30&#37;.
Instead of doing this directly in your HTML you need to use Javascript to apply the class (on page load), so that for JS-disabled users the images remain fully visible.

You could apply a class to trigger the JS to add your 30% class to the elements.

Using YUI your code would look something like this:

YAHOO.util.Event.onDOMReady(function() {
  var $D = YAHOO.util.Dom;
  $D.replaceClass($D.getElementsByClassName('toFade'), 'toFade', 'faded');
});

Assuming your class name for 30% opacity is faded and you apply a class name of toFade to identify the elements you want to fade.

Most other JS libraries will also have DOM methods to make searching by class name easy.

[paul_wilkins]

You will need to start with no opacity and use JavaScript to set it to 30&#37;. But first, some cleaning up.

Currently the images are like this

<img id="JWSquire_Website_04" src="http://JWSquire.com/images/JWSquire-Website_04.jpg"
    width="174" height="304" border="0" alt="JWSquire.com - Landscape Gallery"
    style="-moz-opacity:0.4;filter:alpha(opacity=40)"
    onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
    onmouseout="this.style.MozOpacity=0.3;this.filters.alpha.opacity=30" />

The inline scripts and css here is the cause for a lot of confusion. It is a bad idea to write javascript directly inline with the HTML. For the easiest time of maintaining your code, it's best to separate the content, presentation and behaviour, that is, the HTML, CSS and JavaScript.

Because of this, inline event handlers are a big no-no. Quirksmode has a good piece about inline event handlers (early event handlers) and why traditional event registration should be used instead.

Because you don't want the style being applied if there is no javascript, you should have no style there to begin with, and let javascript apply an existing class for you. That way the presentational styles will be all kept together.

Let's separate out the css and javascript, with a couple of functions to be attached to the images.

That leaves the image a lot easier to manage

<img id="JWSquire_Website_04" src="http://JWSquire.com/images/JWSquire-Website_04.jpg"
    width="174" height="304" border="0" alt="JWSquire.com - Landscape Gallery" />

The CSS can be added to your stylesheet

.opaque {
    -moz-opacity:0.4;
    filter:alpha(opacity=40);
}

and the JavaScript should be in a separate file, called js/opacity.js

function partlyVisible(e) {
    e = e || window.event;
    img = e.target || e.srcElement;
    img.className = 'opaque';
}
function fullyVisible(e) {
    e = e || window.event;
    img = e.target || e.srcElement;
    img.className = '';
}

Now you only have to loop through the images and attach the events. For that it's good to have an identifier on the TR element called gallery but in this example I will just take the third TR element on the table.

var table, row, images, i;
var table = document.getElementById('table');
var row = table.getElementsById('tr')[2];
var images = row.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    images[i].onmouseover = fullyVisible;
    images[i].onmouseout = partlyVisible;
    images[i].className = 'opaque';
};

Place this in a javascript file at the end of the body, and you'll be good to go.

...
<script type="text/javascript" src="js/opacity.js"></script>
</body>
</html>