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?
quincydudeConnect With a Mentor Commented:
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

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.   :-)
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.