Highlight an Image on Mouseover Using Java Script

Chikul
Posted by Chikul under JavaScript category on | Views : 5280
To change the opacity of an image

In IE4+, we can adjust the opacity of an image using the STYLE attribute:

<img src="Image1.gif" style="filter:alpha(opacity=50)">

Here the accepted range of values are 0 to 100, where 0 would make the image disappear.

In NS6+, the code needed is a little bit different:

<img src="Image1.gif" style="-moz-opacity:0.5">

Here the accepted range of values are 0 to 1, where 0 would make the image disappear.

To make opacity specification work in both IE4+ and NS6+ , we need to combine the two HTML above.
Just define one STYLE attribute and put the two definitions inside it, separating the two with a semicolon:

<img src="Image1.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Highlight an Image on Mouseover Using Java Script</title>
<script language="JavaScript" type="text/javascript">
function fnImgvisible(cur,which)
{
strength=(which==0)? 1 : 0.2
if(cur.style.MozOpacity)
{
cur.style.MozOpacity=strength
}
else if(cur.filters)
{
cur.filters.alpha.opacity=strength*100
}
}
</script>
</head>
<body>
<img src="Image/Sunset.jpg" width="100" height="150" style="filter :alpha(opacity=20);-moz-opacity:0.2"
onMouseover="fnImgvisible(this,0)" onMouseout="fnImgvisible(this,1)"/>
</body>
</html>

Comments or Responses

Login to post response