homepage Welcome to WebmasterWorld Guest from 54.166.104.226
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Put inline JavaScript in the head
Rain_Lover

5+ Year Member



 
Msg#: 4336451 posted 4:49 pm on Jul 7, 2011 (gmt 0)

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

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4336451 posted 5:23 pm on Jul 7, 2011 (gmt 0)

First, the head is not the best place for scripts. Instead, put them in external .js files and include them just before the closing </body> tag.

Next, it's best not to use inline event handlers, but instead attach event listeners to the elements you want from within the JavaScript. This keeps a nice separation of content (HTML) and behavior (JavaScript).

In your code, you are doing:

var x = document.getElementsByTagName("img");

That will return a NodeList (not a single element). You then go on to treat it as though you're acting on a single element:

x.style.opacity=1;

But that won't work because x is a NodeList.

Here's an updated approach which does what you want. Note, I was rushed for time and I specify event handlers in my script file vs. attaching event listeners. If I was to do this correctly, I would replace the img.onmouseover and img.onmouseout code with event listeners instead. That way, if someone modifies the HTML to define onmouseover or onmouseout inline (as you have in your example), it won't overwrite the handler (you can have multiple event listeners, but there's only one handler).
HTML File

<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" />
<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis" />
<script src="main.js" type="text/javascript"></script>
</body>
</html>

main.js


(function () {
var i,
imgList = document.getElementsByTagName("img"),
n;
// Attach event listeners
for (i = 0, n = imgList.length; i < n; i++) {
imgList[i].onmouseover = (function (img) {
return function(){
img.style.opacity = 1;
img.filters.alpha.opacity = 100;
};
})(imgList[i]);
imgList[i].onmouseout = (function (img) {
return function(){
img.style.opacity = 0.4;
img.filters.alpha.opacity = 40;
};
})(imgList[i]);
}
})();


Note, I would also remove the CSS from within the HTML, but that's off topic. :)

Rain_Lover

5+ Year Member



 
Msg#: 4336451 posted 8:18 pm on Jul 7, 2011 (gmt 0)

Thank you! :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved