Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Sexy fading effect 1

Status
Not open for further replies.
kaht

kaht

Programmer
Aug 18, 2003
4,156
US
On my company's main webpage, I decided to put some info about each of the applications when you hover over the links to them. Using the basic function from this page, I came up with this - which works out pretty nice:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Opacity Test</title>
<link rel="shortcut icon" href="./images/arch-icon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

/*<![CDATA[*/

var showInterval = [false, false, false];
var hideInterval = [false, false, false];
var opacityValue = [0, 0, 0];

function showDiv(objNum) {
   //check to see if we're currently hiding this div, if so we stop execution on that interval
   if (hideInterval[objNum]) {
      clearInterval(hideInterval[objNum]);
      hideInterval[objNum] = false;
   }
   //store a reference to this interval so we can stop it later
   showInterval[objNum] = setInterval("showDivFunction(" + objNum + ")", 50);
}

function showDivFunction(objNum) {
   var obj = document.getElementById("link" + objNum);
   //if the div is not fully shown, we increase the opacity in 10% increments
   if (opacityValue[objNum] < 100) {
      opacityValue[objNum] += 10;
      obj.style.opacity = (opacityValue[objNum] / 100); 
      obj.style.MozOpacity = (opacityValue[objNum] / 100); 
      obj.style.KhtmlOpacity = (opacityValue[objNum] / 100); 
      obj.style.filter = "alpha(opacity=" + opacityValue[objNum] + ")"; 
   }
   //if the div is fully shown we clear the interval and set the reference to false
   else {
      clearInterval(showInterval[objNum]);
      showInterval[objNum] = false;
   }
}

function hideDiv(objNum) {
   //check to see if we're currently showing this div, if so we stop execution on that interval
   if (showInterval[objNum]) {
      clearInterval(showInterval[objNum]);
      showInterval[objNum] = false;
   }
   hideInterval[objNum] = setInterval("hideDivFunction(" + objNum + ")", 50);
}

function hideDivFunction(objNum) {
   var obj = document.getElementById("link" + objNum);
   //if the div is not fully hidden, we decrease the opacity in 10% increments
   if (opacityValue[objNum] > 0) {
      opacityValue[objNum] -= 10;
      obj.style.opacity = (opacityValue[objNum] / 100); 
      obj.style.MozOpacity = (opacityValue[objNum] / 100); 
      obj.style.KhtmlOpacity = (opacityValue[objNum] / 100); 
      obj.style.filter = "alpha(opacity=" + opacityValue[objNum] + ")"; 
   }
   //if the div is fully hidden we clear the interval and set the reference to false
   else {
      clearInterval(hideInterval[objNum]);
      hideInterval[objNum] = false;
   }
}

/*]]>*/

</script>
<style type="text/css">

* {
   border:0px;
   margin:0px;
   padding:0px;
}

ul {
   list-style-type:none;
}

ul li {
   display:inline;
   padding:0px 10px;
   border-left:1px solid black;
}

ul li.first {
   border-left:0px;
}

div#link0, div#link1, div#link2 {
   height:100px;
   width:100px;
   opacity: 0.0;
   -moz-opacity: 0.0;
   -khtml-opacity: 0.0;
   filter: alpha(opacity=0);
}

div#link1, div#link2 {
   margin-top:-102px;
   margin-left:50px;
}

div#link0 {
   margin-top:30px;
   margin-left:50px;
   border:1px solid blue;
}

div#link1 {
   border:1px solid green;
}

div#link2 {
   border:1px solid red;
}

</style>
</head>
<body>

<ul>
   <li class="first"><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="showDiv(0)" onmouseout="hideDiv(0)">Hover over me!</a></li>
   <li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="showDiv(1)" onmouseout="hideDiv(1)">And me too!</a></li>
   <li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="showDiv(2)" onmouseout="hideDiv(2)">Don&#39;t forget me, I&#39;m link number3</a></li>
</ul>

<div id="link0">This is the first div</div>
<div id="link1">Hello, I am div number 2</div>
<div id="link2">And of course you can&#39;t forget me<br />I&#39;m lucky number 3</div>

</body>
</html>

Enjoy

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]
[banghead]
 
ty ty

I don't know the answer but my good friend Google does.
 
Hi Kaht
Liked your posting, except the program is quite large for what is a relatively simple effect. I was wondering if this feature/program could be incorporated into a slide show, such as that mentioned on:
Would it be a simple matter of placing the Javascript functions in the <head> section and relating the relative variable names in the <body>? Can you foresee any problems, before I go ahead & try this?
Cheers
David
 
That's cute. Very nice. :)



Just my 2¢

"In order to start solving a problem, one must first identify its owner." --Me
--Greg
 
das1406, all I can say is try it out and see how it works for you. After all, it is a "relatively simple effect" so you shouldn't have a problem getting it implemented.

gbaughma, thanks [thumbsup2]

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]
 
kaht, Just an explanation of my words "relatively simple effect." I sensed that you were upset at these words. It was in no way meant to be derogatory of you or the Javascript code. I was thinking along the lines of the time involved in incorporating this in the slide show, and in particular the likely results. In the slide show there is a time interval (5s) to download the image: the fading effect will add to this time, as well as almost doubling the size of the slide show program, adding the extra JS needed.
My choice of words "relatively simple effect" could have been better - maybe replace them with "cool, sexy effect." Some things are conceptually simple yet difficult to put into practice - and sometimes the reverse is true. As far as programming is concerned, the length of a program is not necessarily an indication of its complexity (chaos theory, fractals and the 20 line Javascript competition are testimony to this.)
All I was expecting was your opinion as to how the slide show night be affected performance-wise. Hope I'm forgiven. Cheers.
David
 
Status
Not open for further replies.

Similar threads

ralphonzo
  • Locked
  • Question
Fading fullscreen background-image rotator
Replies
15
Views
292
ralphonzo
ralphonzo
lantiqo
  • Locked
  • Question
Hover effect does not work, need clicks instead
Replies
8
Views
310
jpadie
jpadie
ImEdu
  • Locked
  • Question
Glowing/Pulsating effect
Replies
0
Views
67
ImEdu
ImEdu
gazza52
  • Locked
  • Question
Image Effect Slideshow
Replies
0
Views
67
gazza52
gazza52
southbeach
  • Locked
  • Question
Why is my script disrupting the onmouseover effect?
Replies
1
Views
104
BillyRayPreachersSon
BillyRayPreachersSon

Part and Inventory Search

Sponsor

Back
Top