attaching events to enumerated elements (prototype/scriptaculous)

Evidently I'm failing to grasp something... I'm trying to grab all the <div> elements below, add an opacity effect to the images in them, and add mouseover handlers to the enclosing hrefs to turn the opacity on and off.

But the code below has the effect that mousing over ANY of the hrefs toggles the opacity effect on just the bottom image.

Event.observe(window, 'load', function() {

$$("div.insetcontent").each(function(oBox){
oLink = oBox.childElements()[0];
oLinkImg = oLink.childElements()[0];
new Effect.Opacity(oLinkImg, {duration:0, from:1.0, to:0.5});
Event.observe(oLink, 'mouseover', function() {new Effect.Opacity(oLinkImg, {duration:0, from:0.5, to:1.0})});
Event.observe(oLink, 'mouseout', function() {new Effect.Opacity(oLinkImg, {duration:0, from:1.0, to:0.5})});
});

});


<div class="insetcontent" id="b1"><a id="l1" href="/about/simon.html" title="Read more"><img id="i1" src="/img/snippets/pc5.jpg" width="107" height="57" alt="Simons experience is focussed on portfolio and asset management" /><p>Simons experience is focussed on portfolio and asset management</p></a></div>

<div class="insetcontent" id="b2"><a id="l2" href="/about/simon.html" title="Read more"><img id="i2" src="/img/snippets/pc5.jpg" width="107" height="57" alt="Simons experience is focussed on portfolio and asset management" /><p>Simons experience is focussed on portfolio and asset management</p></a></div>

<div class="insetcontent" id="b3"><a id="l3" href="/about/simon.html" title="Read more"><img id="i3" src="/img/snippets/pc5.jpg" width="107" height="57" alt="Simons experience is focussed on portfolio and asset management" /><p>Simons experience is focussed on portfolio and asset management</p></a></div>

<div class="insetcontent" id="b4"><a id="l4" href="/about/simon.html" title="Read more"><img id="i4" src="/img/snippets/pc5.jpg" width="107" height="57" alt="Simons experience is focussed on portfolio and asset management" /><p>Simons experience is focussed on portfolio and asset management</p></a></div>

without 'var' in front, oLink and oLinkImg will be global, and over-written each iteration.

Additionally, you might want to consider using prototype's down() method, rather than childElements()[0], with a tagname of 'a' and 'img' to avoid fetching entire arrays when you know you only want one element.

Aha. Of course - I was thinking that those vars needed to be global, cos I'm iterating through them. Didn't occur to me that in putting them inside a function, I'm making them specific to each instance of the function. If that makes sense :) Thank you.

On a kind-of-related matter - it's the same code, anyhow - this is what I've currently got:

$$("div.insetcontent").each(function(oBox){
var oLinkImg = oBox.down('img');
new Effect.Opacity(oLinkImg, {duration:0, from:1.0, to:0.5});
Event.observe(oBox, 'mouseover', function() {new Effect.Opacity(oLinkImg, {duration:0, from:0.5, to:1.0})});
Event.observe(oBox, 'mouseout', function() {new Effect.Opacity(oLinkImg, {duration:0, from:1.0, to:0.5})});
});

And, while it works as it should, it doesn't work as I want. I've attached the mouseover/out handlers to the containing div. This does highlight the image as you rollover the box, but as you move your mouse between the image and the paragraph, it flickers between opacity. And even worse, sometimes it seems to get mixed up and the image doesn't always return to semi-opaque when you mouse out of the box.

Is there a way to avoid this? I have a feeling it's... event bubbling, or something, but don't know enough about it.