Put inline JavaScript in the head

Rain Lover · 07-07-2011, 05:26 PM

Hi,

The following code works:

Code:

<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
</head>
<body>

<img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

</body>
</html>

But the problem is you have to repeat the inline JavaScript for all <img> tags. I tried to put the script in the head to no avail:

Code:

<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("img");
  x.style.opacity=1; x.filters.alpha.opacity=100;
  }
</script>
</head>
<body>

<img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="getElements()"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="getElements()"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

</body>
</html>

Everything seems right to me, but it doesn't work.

Many thanks for any help!
Mike

DaveyErwin · 07-07-2011, 06:35 PM

Code:

<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<script type="text/javascript">
function opaque(e)
  {
 e.style.opacity=1;
if(e.filters)e.filters.alpha.opacity=100
  }
function transparent(e)
  {
 e.style.opacity = .4;
 if(e.filters)e.filters.alpha.opacity = 40; 
  }


</script>


</head>
<body>

<img src="klematis.jpg" 
onmouseover="opaque(this)"
onmouseout="transparent(this)" />

<img src="klematis2.jpg" 
onmouseover="opaque(this)"
onmouseout="transparent(this)" />



</body>
</html>

DaveyErwin · 07-07-2011, 06:51 PM

This might be more like what
you have in mind ....

Code:

<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<script type="text/javascript">
function opaque(){
   this.style.opacity=1;
   if(this.filters)this.filters.alpha.opacity=100
  }
function transparent(){
   this.style.opacity = .4;
   if(this.filters)this.filters.alpha.opacity = 40; 
  }

function init(){
 var x = document.getElementsByTagName("IMG");
 for(var i = x.length;i--;){
  x[i].onmouseover=opaque;
  x[i].onmouseout=transparent;
 }
}
</script>


</head>
<body onload="init()">

<img src="klematis.jpg"  />

<img src="klematis2.jpg" />



</body>
</html>

Rain Lover · 07-07-2011, 09:15 PM

Thank you!