Solved

Div contents to appear or disappear gradually

Posted on 2008-06-25
2
1,787 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

756 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