Rollover DIV's using Scriptaculous's appear effect.

Hi everyone,

First off, thanks in advance to anyone that takes a look at this and second an even bigger thank you to anyone able to contribute to a solution.

I am trying to make a series of DIV's have a hover effect (one div shows with it's styling intact and then on rollover that div changes to another div with that div's styling intact).

If possible I was hoping to utilise the scriptactulous appear effect (fade over I believe is the best description, not fade out/in).

If anyone could point me in the right direction for this it would be greatly appreciated.

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

For the rollover thing, do you mean you have some links and when people hover on each and a DIV in the page will has it's style changed?

say the div is like <div id="sample">

and on the link you can have something like

<a href="#" onmouseover="toSomeStyle();">toSomeStyle</a>

and the script setting style of the div sample like
function toSomeStyle()
    document.getElementById("sample").style.backgroundColor = "#FF0000";
    document.getElementById("sample").style.border="thick solid #0000FF";

Open in new window

RichardMassAuthor Commented:
That would probably do the trick though I was hoping to have something like below.

<div id="div1" style="height:200px;width:200px;background-color:#ccc">Div one here</div>
<div id="div2" style="height:200px;width:200px;background-color:#ddd;display:none">Div two here</div>

#Div1 stays visible until user rollover it and then #Div2 fades in over the top. At this particular point your version will work as I don't need to change the contents of the DIV however the idea above means in the future I can have the rollover actually change what appears in the DIV as it is a new DIV over the top.

Did that make any sense, I think I've confused myself.   :-)
Then I think this is what you may need

I didnt make the fade in thing as I m not familar with making it and it's still not a standard that has cross-browser support.
function toDiv1()
    document.getElementById("div2").style.visibility = "hidden";
    document.getElementById("div1").style.visibility = "visible";
function toDiv2()
    document.getElementById("div1").style.visibility = "hidden";
    document.getElementById("div2").style.visibility = "visible";

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.