Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1823
  • Last Modified:

Div contents to appear or disappear gradually

Dear all,

I have the scrip below that shows or hides the divMain contents if you put the mouse over some text.
Now the contents appear or disappear abruptly, and I would like them to show or hide gradually,  with certain opacity. How can it be done??

Also, I have to place the mouse over the "***Show or hide divMain***" text in order to make the script work.
Could it be possible to place the mouse over the div (divMain) to make it show or hide???

Thanks a million in advance!!!!
<head>
   <script type="text/javascript" language="JavaScript"><!--
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>
  </head>
  <body>
 
 
<a onmouseover="ReverseContentDisplay('divMain'); return true;"
   href="javascript:ReverseContentDisplay('divMain')">
***Show or hide divMain***
</a>
 
<br><br>
<div id="divMain">
I have a picture and some text here in divMain <br><img src="picture.jpg">
</div>
  </body>

Open in new window

0
Dada44
Asked:
Dada44
1 Solution
 
David H.H.LeeCommented:
Hi Dada44,
You can apply that on image object only based on the opacity settings that you required.
Here is the sample article show how you can do that:
http://www.dynamicdrive.com/dynamicindex4/highlightgrad.htm

You need to set a timer to repeat reduce the image's opacity gradually until the final effect that you needed.
You can apply the code according based on your current situation. Hope that helps.
0
 
Dada44Author Commented:
Thanks!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now