mouse over image with text and imageOpacity




<script type="text/javascript">
    function mouseOver1() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "<h3>Work with a valid work permit when required</h3>";
    }
    function mouseOut1() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "";
    }
    function mouseOver2() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "<h3>Conduct gas tests when required</h3>";
    }
    function mouseOut2() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "";
    }
    function mouseOver3() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "<h3>Verify isolation before work begins and use the specified life protecting equipment</h3>";
    }
    function mouseOut3() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "";
    }
    function mouseOver4() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "<h3>Obtain authorisation before entering a confined space</h3>";
    }
    function mouseOut4() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "";
    }
    function mouseOver5() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "<h3>Obtain authorisation before overriding or disabling safety critical equipment</h3>";
    }
    function mouseOut5() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "";
    }
    function mouseOver6() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "<h3>Protect yourself against a fall when working at height</h3>";
    }
    function mouseOut6() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "";
    }
    function mouseOver7() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "<h3>Do not walk under a suspended load</h3>";
    }
    function mouseOut7() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "";
    }
    function mouseOver8() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = " <h3>Do not smoke outside designated smoking areas</h3>";
    }
    function mouseOut8() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "";
    }
    function mouseOver9() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "<h3>No alcohol or drugs while working or driving</h3>";
    }
    function mouseOut9() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "";
    }
    function mouseOver10() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "<h3>While driving, do not use your phone and do not exceed speed limits</h3>";
    }
    function mouseOut10() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "";
    }
    function mouseOver11() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "<h3>Wear your seat belt</h3>";
    }
    function mouseOut11() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "";
    }
    function mouseOver12() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "<h3>Follow prescribed Journey Management Plan</h3>";
    }
    function mouseOut12() {
        //innerHTML property for IE, value property for other browsers
        document.getElementById("lbl").innerHTML = "";
    }
</script>



<style type="text/css">
        .style1
        {
            width: 18%;
            height: 300px;
        }
        .style2
        {
            color: #009900;
        }
         .mystyle
         {
            opacity:0.4;
            filter:alpha(opacity=40);
         
             }
    </style>




<table class="style1">

<tbody>

<tr>


<td colspan="2">
</td>


<td></td>
</tr>

<tr>

<td class="style2" colspan="3">

<h2>Life Saving Rules</h2></td>
</tr>

<tr>

<td>
<img id="img1" class="mystyle" onmouseover="mouseOver1();this.style.opacity="" onmouseout="mouseOut1();this.style.opacity="" border="1" alt="India" src="http://www.blogger.com/~/_layouts/images/1.jpg" opacity="40;" />
</td>

<td>
<img id="img2" class="mystyle" onmouseover="mouseOver2();this.style.opacity="" onmouseout="mouseOut2();this.style.opacity="" border="1" alt="India" src="http://www.blogger.com/~/_layouts/images/2.jpg" opacity="40" />
</td>

<td>
<img id="img3" class="mystyle" onmouseover="mouseOver3();this.style.opacity="" onmouseout="mouseOut3();this.style.opacity="" border="1" alt="India" src="http://www.blogger.com/~/_layouts/images/3.jpg" opacity="40" />
</td>
</tr>

<tr>

<td>
<img id="img4" class="mystyle" onmouseover="mouseOver4();this.style.opacity="" onmouseout="mouseOut4();this.style.opacity="" border="1" alt="India" src="http://www.blogger.com/~/_layouts/images/4.jpg" opacity="40" />
</td>

<td>
<img id="img5" class="mystyle" onmouseover="mouseOver5();this.style.opacity="" onmouseout="mouseOut5();this.style.opacity="" border="1" alt="India" src="http://www.blogger.com/~/_layouts/images/5.jpg" opacity="40" />
</td>

<td>
<img id="img6" class="mystyle" onmouseover="mouseOver6();this.style.opacity="" onmouseout="mouseOut6();this.style.opacity="" border="1" alt="India" src="http://www.blogger.com/~/_layouts/images/6.jpg" opacity="40" />
</td>
</tr>

<tr>

<td>
<img id="img7" class="mystyle" onmouseover="mouseOver7();this.style.opacity="" onmouseout="mouseOut7();this.style.opacity="" border="1" alt="India" src="http://www.blogger.com/~/_layouts/images/7.jpg" opacity="40" />
</td>

<td>
<img id="img8" class="mystyle" onmouseover="mouseOver8();this.style.opacity="" onmouseout="mouseOut8();this.style.opacity="" border="1" alt="India" src="http://www.blogger.com/~/_layouts/images/8.jpg" opacity="40" />
</td>

<td>
<img id="img9" class="mystyle" onmouseover="mouseOver9();this.style.opacity="" onmouseout="mouseOut9();this.style.opacity="" border="1" alt="India" src="http://www.blogger.com/~/_layouts/images/9.jpg" opacity="40" />
</td>
</tr>

<tr>

<td>
<img id="img10" class="mystyle" onmouseover="mouseOver10();this.style.opacity="" onmouseout="mouseOut10();this.style.opacity="" border="1" alt="India" src="http://www.blogger.com/~/_layouts/images/11.jpg" opacity="40" />
</td>

<td>
<img id="img11" class="mystyle" onmouseover="mouseOver11();this.style.opacity="" onmouseout="mouseOut11();this.style.opacity="" border="1" alt="India" src="http://www.blogger.com/~/_layouts/images/10.jpg" opacity="40" />
</td>

<td>
<img id="img12" class="mystyle" onmouseover="mouseOver12();this.style.opacity="" onmouseout="mouseOut12();this.style.opacity="" border="1" alt="India" src="http://www.blogger.com/~/_layouts/images/12.jpg" opacity="40" />
</td>
</tr>
</tbody></table>
<label id="lbl"></label>





















Life Saving Rules





















Images are not available and your own images