Solved

Div contents to appear or disappear gradually

Posted on 2008-06-25
2
1,770 Views
Last Modified: 2010-04-21
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
Comment
Question by:Dada44
2 Comments
 
LVL 29

Accepted Solution

by:
David H.H.Lee earned 500 total points
ID: 21865898
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
 

Author Closing Comment

by:Dada44
ID: 31470487
Thanks!
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now