页面加载时图像透明度级别为100％

Question

参考我之前的问题HERE是否可以将＃bod1图像设为100％，因为我通过$（'＃bod1'）显示相关文本.Click（）;在页面上。以下是我的代码。

CODE

$(window).bind("load", function() {
    var activeOpacity   = 1.0,
        inactiveOpacity = 0.3,
        fadeTime = 350,
        clickedClass = "selected",
        thumbs = "#boardDirectorsImage img";

    $(thumbs).fadeTo(1, inactiveOpacity);

    $(thumbs).hover(
        function(){
            $(this).fadeTo(fadeTime, activeOpacity);
        },
        function(){
            // Only fade out if the user hasn't clicked the thumb
            if(!$(this).hasClass(clickedClass)) {
                $(this).fadeTo(fadeTime, inactiveOpacity);
            }
        });
     $(thumbs).click(function() {
         // Remove selected class from any elements other than this
         $(thumbs).removeClass(clickedClass).fadeTo(fadeTime, inactiveOpacity);
       $(this).addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
     });
});

HTML中的图片列表：

<div id="pageBodyContainerRight">
            <div id="boardDirectorsImage"><img src="images/bod_image1a.jpg" width="171" height="168" id="bod1" class="bod1" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image2a.jpg" width="171" height="168" id="bod2" class="bod2" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image3a.jpg" width="171" height="168" id="bod3" class="bod3" /></div>
            <div id="boardDirectorsImage" style="width:169px;"><img src="images/bod_image4a.jpg" width="169" height="168" id="bod4" /></div>

            <div id="boardDirectorsImage"><img src="images/bod_image5a.jpg" width="171" height="168" id="bod5" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image6a.jpg" width="171" height="168" id="bod6" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image7a.jpg" width="171" height="168" id="bod7" /></div>
            <div id="boardDirectorsImage" style="width:169px;"><img src="images/bod_image8a.jpg" width="169" height="168" id="bod8" /></div>

            <div id="boardDirectorsImage"><img src="images/bod_image9a.jpg" width="171" height="168" id="bod9" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image10a.jpg" width="171" height="168" id="bod10" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image11a.jpg" width="171" height="168" id="bod11" /></div>
            <div id="boardDirectorsImage" style="width:169px;"><img src="images/bod_image11a.jpg" width="169" height="168" id="bod12" /></div>
</div>

最后，点击时每个图像都会显示一个写入文本，下面是代码：

$( document ).ready(function() {
    $('#bod1').click(); 
});

$('#bod1').click(function() {
  $('#bodInfoContain').html('<p class="bodName">NAME 1</p>'); 
});

$('#bod2').click(function() {
  $('#bodInfoContain').html('<p class="bodName">NAME 2</p>');
});

这可能吗？感谢任何帮助。试着让最后一段代码在研究实施帮助下工作几天。

干杯。