asked on

Scriptaculous: appear on onmouseover, fade on onmouseout

Hi,

I´m kinda new at the prototype/scriptaculous libraries.

My problem is this.

I have a menu, a few divs that I want to "appear" a background-image in when I mouse over and "fade" the image when I mouse out.

So when I hover the <a> in the <div class="menuItem"> I want the <div id="hover"> to appear once and stay that way until I move the mouse away. Then I want the <div id="hover"> to fade out.

Very thankful for all the help I can get

//HTML
<div id="menuContainer">
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover'));" onmouseout="fadeThis($('hover1'));">menu item 1</a>
        <div id="hover1"></div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover'));" onmouseout="fadeThis($('hover2'));">menu item 2</a>
        <div id="hover2"></div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover'));" onmouseout="fadeThis($('hover3'));">menu item 3</a>
        <div id="hover3"></div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover'));" onmouseout="fadeThis($('hover4'));">menu item 4</a>
        <div id="hover4"></div>
    </div>            
</div>
 
//JAVASCRIPT
function appearThis(target) {
    new Effect.Appear(target, {duration: 0.2});
}
function fadeThis(target) {
    new Effect.Fade(target, {duration: 0.2});
}

Open in new window

ASKER CERTIFIED SOLUTION

Roger Baklund

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tomarse111

all you mouseovers reference appearThis($('hover')); but there is no div with the id hover as far as i can see? each one is hover1, hover2 etc?

Gonzmachine

ASKER

Ah, my bad, my example wasn´t correct.

The problem is not to trig the functions but the appear/fade to work properly.

//HTML
<div id="menuContainer">
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover1'));" onmouseout="fadeThis($('hover1'));">menu item 1</a>
        <div id="hover1"></div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover2'));" onmouseout="fadeThis($('hover2'));">menu item 2</a>
        <div id="hover2"></div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover3'));" onmouseout="fadeThis($('hover3'));">menu item 3</a>
        <div id="hover3"></div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover4'));" onmouseout="fadeThis($('hover4'));">menu item 4</a>
        <div id="hover4"></div>
    </div>            
</div>
 
//JAVASCRIPT
function appearThis(target) {
    new Effect.Appear(target, {duration: 0.2});
}
function fadeThis(target) {
    new Effect.Fade(target, {duration: 0.2});
}

Open in new window

Gonzmachine

ASKER

New core, kinda working...

I use a observer to go over the div with the class .hoverable.

What I need help with Is to get the right div to appear and fade on the right mouseover/mouseout.

//HTML
<div id="globalTopMenu" class="hoverable">            
    <div class="menuItem">
        <div id="hover" style="display: none;"><a href="#">item 1</div>
        <a href="#">item 1</a>                    
    </div>
    <div class="menuItem">
        <div id="hover" style="display: none;"><a href="#">item 2</div>
        <a href="#">item 2</a>                    
    </div>
    <div class="menuItem">
        <div id="hover" style="display: none;"><a href="#">item 3</div>
        <a href="#">item 3</a>                    
    </div>
    <div class="menuItem">
        <div id="hover" style="display: none;"><a href="#">item 4</div>
        <a href="#">item 4</a>                    
    </div>
</div>
 
//JAVASCRIPT (with comments)
Event.observe(window, 'load', function() {
  $$('.hoverable > *').each(function (e) {
    Event.observe(e, 'mouseover', function() {
        //fade in the child <div.hover> under current parent <div.menuItem) (and stay there)
    });  
 
    Event.observe(e, 'mouseout', function() {
        //fade out that same child
    });
  });
});

Open in new window

Roger Baklund

You got the answer, then you change the question? That is not very nice... are you sure you got it right this time? You really want multiple divs with id="hover"? Or did you mean <div class="hover"> ? I suggest you ask a new question.

Gonzmachine

ASKER

cxr: Well, the first code I wrote was just a sample of how my html/js looks. So the experts on this page could get a feeling of what I wanted to do and maybe help me with a solution.

I did not know that I wasn´t allowed to add information to the question. I thought that anyway and are very eager to learn a solution to my problem.

Roger Baklund

You are of course allowed to add information, but that is not what you did. You asked a new question after you got the correct answer on the original question. Why can't you use the working solution we provided? Why do it a different way?

https://www.experts-exchange.com/questionTips.jsp#qt7

Gonzmachine

ASKER

cxr: The solution is not correct, the mouseover works, but doesn´t behave like it should.

I understrand that my question was badly written. I probably should have asked for the right way of solving this type of problem instead of writing example code that didn´t work.

I´ll try to write a better question next time.

Gonzmachine

ASKER

I´ll be more precise with my next question, sorry for the misunderstanding.

Roger Baklund

It works on my computer. You must of course include the prototype and scriptacolous scripts, and have some content in the divs, and the divs must be hidden initially. Complete code:

<html>
<head>
<title>scriptaculous hover</title>
 
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/effects.js"></script>
 
<script type="text/javascript">
function appearThis(target) {
    new Effect.Appear(target, {duration: 0.2});
}
function fadeThis(target) {
    new Effect.Fade(target, {duration: 0.2});
}
</script>
</head>
<body>
<div id="menuContainer">
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover1'));" onmouseout="fadeThis($('hover1'));">menu item 1</a>
        <div id="hover1" style="display:none">hover1</div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover2'));" onmouseout="fadeThis($('hover2'));">menu item 2</a>
        <div id="hover2" style="display:none">hover2</div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover3'));" onmouseout="fadeThis($('hover3'));">menu item 3</a>
        <div id="hover3" style="display:none">hover3</div>
    </div>
    <div class="menuItem">
        <a href="link" onmouseover="appearThis($('hover4'));" onmouseout="fadeThis($('hover4'));">menu item 4</a>
        <div id="hover4" style="display:none">hover4</div>
    </div>
</div>
</body>
</html>

Open in new window