<style type="text/css">
ul {
list-style-type:none;
}
</style>
<body>
<div id="slideShow">
<ul>
<li>
<img src="stockboat.png" alt="Steam Boat" id="boat" />
</li>
</ul>
</div>
<script type="text/javascript" src="getElementsByClassName.js"></script>
<script type="text/javascript">
var image = document.getElementsByTagName('img');
for (i = 0, ii = image.length; i < ii; i++) {
image[i].style.opacity = "0.5";
image[i].addEventListener('mouseover', imageIn, 'false');
image[i].addEventListener('mouseout', imageOut, 'false');
}
function imageIn() {
image[i].style.opacity = "1";
}
function imageOut() {
image[i].style.opacity = "0.5";
}
</script>
</body>
</html>
function imageIn() {
this.style.opacity = "1"; // use "this" instead of image array
}
function imageOut() {
this.style.opacity = "0.5"; // use "this" instead of image array
}
image[i].addEventListener('mouseover'
, (function(obj){return function(){imageIn(obj)};})(image[i])
, 'false');
image[i].addEventListener('mouseout'
, (function(obj){return function(){imageOut(obj)};})(image[i])
, 'false');
function imageIn(obj) { // added parameters "obj"
obj.style.opacity = "1";
}
window.addEventListener('load', function () {
. . . // Your code
});
image[i].addEventListener('mouseover', imageIn.bind(image[i]), false);
this.style.opacity = "1";
<style type="text/css">
ul {
list-style-type:none;
}
</style>
<body>
<div id="slideShow">
<ul>
<li>
<img src="http://placekitten.com/100/100" alt="Steam Boat" id="boat" />
</li>
<li>
<img src="http://placekitten.com/200/100" alt="Steam Boat" id="boat" />
</li>
<li>
<img src="http://placekitten.com/300/60" alt="Steam Boat" id="boat" />
</li>
</ul>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var image = document.getElementsByTagName('img');
for (i = 0, ii = image.length; i < ii; i++) {
image[i].style.opacity = "0.5";
$(image[i]).hover(function(){$(this).css({"opacity":"1.0"})},
function(){$(this).css({"opacity":"0.5"})});
}
</script>
</body>
</html>