Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- </style>
- <script language="javascript" type="text/javascript">
- /* toggle() checks to see if the images has already been faded
- or not and sends the appropriate variables to opacity(); */
- function toggle(el,milli) {
- // Get the opacity style parameter from the image
- var currOpacity = document.getElementById(el).style.opacity;
- if(currOpacity != 0) { // if not faded
- fade(el, milli, 100, 0);
- } else { // else the images is already faded
- fade(el, milli, 0, 100);
- }
- }
- /* changeOpacity() uses three different opacity settings to
- achieve a cross-browser opacity changing function. This
- function can also be used to directly change the opacity
- of an element. */
- function changeOpacity(el,opacity) {
- var image = document.getElementById(el);
- // For Mozilla
- image.style.MozOpacity = (opacity / 100);
- // For IE
- image.style.filter = "alpha(opacity=" + opacity + ")";
- // For others
- image.style.opacity = (opacity / 100);
- }
- /* fade() will fade the image in or out based on the starting
- and ending opacity settings. The speed of the fade is
- determined by the variable milli (total time of the fade
- in milliseconds)*/
- function fade(el,milli,start,end) {
- var fadeTime = Math.round(milli/100);
- var i = 0; // Fade Timer
- // Fade in
- if(start < end) {
- for(j = start; j <= end; j++) {
- // define the expression to be called in setTimeout()
- var expr = "changeOpacity('" + el + "'," + j + ")";
- var timeout = i * fadeTime;
- // setTimeout will call 'expr' after 'timeout' milliseconds
- setTimeout(expr,timeout);
- i++;
- }
- }
- // Fade out
- else if(start > end) {
- for(j = start; j >= end; j--) {
- var expr = "changeOpacity('" + el + "'," + j + ")";
- var timeout = i * fadeTime;
- setTimeout(expr,timeout);
- i++;
- }
- }
- }
- </script>
- <div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
- document.getElementById('june').style.display=''">
- <img src="PICTURE URL"
- style="opacity:0.4;filter:alpha(opacity=40)"
- onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
- onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/>
- </div>
- <div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
- <div id="june" style="display : none;">
- <body>
Add Comment
Please, Sign In to add comment