Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement