Guest User

Untitled

a guest
Jul 22nd, 2018
71
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.17 KB | None | 0 0
  1. </style>
  2. <script language="javascript" type="text/javascript">
  3. /* toggle() checks to see if the images has already been faded
  4. or not and sends the appropriate variables to opacity(); */
  5. function toggle(el,milli) {
  6. // Get the opacity style parameter from the image
  7. var currOpacity = document.getElementById(el).style.opacity;
  8. if(currOpacity != 0) { // if not faded
  9. fade(el, milli, 100, 0);
  10. } else { // else the images is already faded
  11. fade(el, milli, 0, 100);
  12. }
  13. }
  14. /* changeOpacity() uses three different opacity settings to
  15. achieve a cross-browser opacity changing function. This
  16. function can also be used to directly change the opacity
  17. of an element. */
  18. function changeOpacity(el,opacity) {
  19. var image = document.getElementById(el);
  20. // For Mozilla
  21. image.style.MozOpacity = (opacity / 100);
  22. // For IE
  23. image.style.filter = "alpha(opacity=" + opacity + ")";
  24. // For others
  25. image.style.opacity = (opacity / 100);
  26. }
  27. /* fade() will fade the image in or out based on the starting
  28. and ending opacity settings. The speed of the fade is
  29. determined by the variable milli (total time of the fade
  30. in milliseconds)*/
  31. function fade(el,milli,start,end) {
  32. var fadeTime = Math.round(milli/100);
  33. var i = 0; // Fade Timer
  34. // Fade in
  35. if(start < end) {
  36. for(j = start; j <= end; j++) {
  37. // define the expression to be called in setTimeout()
  38. var expr = "changeOpacity('" + el + "'," + j + ")";
  39. var timeout = i * fadeTime;
  40. // setTimeout will call 'expr' after 'timeout' milliseconds
  41. setTimeout(expr,timeout);
  42. i++;
  43. }
  44. }
  45. // Fade out
  46. else if(start > end) {
  47. for(j = start; j >= end; j--) {
  48. var expr = "changeOpacity('" + el + "'," + j + ")";
  49. var timeout = i * fadeTime;
  50. setTimeout(expr,timeout);
  51. i++;
  52. }
  53. }
  54. }
  55. </script>
  56. <div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
  57. document.getElementById('june').style.display=''">
  58. <img src="PICTURE URL"
  59. style="opacity:0.4;filter:alpha(opacity=40)"
  60. onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
  61. onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/>
  62. </div>
  63. <div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
  64. <div id="june" style="display : none;">
  65. <body>
Add Comment
Please, Sign In to add comment