Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Div contents to appear or disappear gradually

Posted on 2008-06-25
2
Medium Priority
?
1,810 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 2000 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

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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…

610 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