...

View Full Version : Put inline JavaScript in the head



Rain Lover
07-07-2011, 06:26 PM
Hi,

The following code works:


<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:


<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, 07:35 PM
<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, 07:51 PM
This might be more like what
you have in mind ....


<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, 10:15 PM
Thank you! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum