Put inline JavaScript in the head

**Rain Lover** · 07-07-2011, 04:28 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

**jscheuer1** · 07-07-2011, 06:10 PM

Code:

var x=document.getElementsByTagName("img");
  x.style.opacity=1; x.filters.alpha.opacity=100;

does nothing because x is a node list of all img tags on the page. It has no style property. You could iterate over the node list like an array and change them all, but that's not what the original script did.

I would take it at least a step further, but here's one way to consolidate:

Code:

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

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

</body>
</html>

**Rain Lover** · 07-07-2011, 08:16 PM

Thanks John!

Thread: Put inline JavaScript in the head

Thread Tools

Search Thread

Put inline JavaScript in the head

Bookmarks

Bookmarks

Posting Permissions