Scriptaculous help

Forum Moderators: open

Message Too Old, No Replies

Scriptaculous help

hOtTiGeR123

2:09 pm on Jan 14, 2009 (gmt 0)

Hi i'm using prototype to switch an image on hover, but I'm also trying to fade in a div at the same time.

I've got the mouseover code:

Event.observe(window, 'load', function () {
var logos = $$('img.logo');
logos.each(
function(logo) {
logo.observe('mouseover', 
function(event) {
event.element().src = event.element().src.replace('2_fullsize','3_fullsize');
}
);
}
);
});

and the html:


<a href="#"><img src="2_fullsize.gif" class="logo"/></a> 
<div class="tooltip" style="display:none">foo</div>

but how would i get a div to fade in? i tried adding $$('div.tooltip').appear(); to the mouseover but it failed.

astupidname

4:49 am on Jan 15, 2009 (gmt 0)

The same way you got the .logo class images to work, you need to do an 'each' on the .tooltip class div/s also (and be sure you have the src script tags to the scriptaculous and prototype libraries right), and do it inside the mouseover function for the .logo class img's:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>astupidtitle</title>
<script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/
Event.observe(window, 'load', function () {
var logos = $$('img.logo');
logos.each( function(logo) {
logo.observe('mouseover', function(event) {
event.element().src = event.element().src.replace('1m','2m');
var ttDivs = $$('div.tooltip');
ttDivs.each( function (el) {
el.appear();
});
});
});
});

/*]]>*/
</script>
</head>
<body>
<p><a href="#"><img src="images/1m.gif" id="image1" alt="1m.gif" class="logo" /></a></p>
<p><a href="#"><img src="images/1m.gif" id="image2" alt="1m.gif" class="logo" /></a></p>
<div class="tooltip" style="display:none">foo</div>
<div class="tooltip" style="display:none">foo too</div>
</body>
</html>

astupidname

4:54 am on Jan 15, 2009 (gmt 0)

Oh, and instead of what I did here:

var ttDivs = $$('div.tooltip');
ttDivs.each( function (el) {
el.appear();
});

You could also do it like:

$$('div.tooltip').each( function (el) {
el.appear();
});