On 17 Jul., 23:52, iMatto <mat...@essentialebizsolutions.net> wrote:
> Is it possible to use this to set a way that when a user hover's over
> an image i.e. a thumbnail, a larger version of the image is
> revealed???
> Many thanks
Should be no problem, example:
// MyThumb is an Image
$(MyThumb).addListener('mouseover', function(e) {
// create new Image and set source
var I;
if (!this._I) {
I = this._I = $(new Image());
I.src = 'pathToBiggerImage.jpg';
// listener for hiding the bigger Image on mouseout
I.addListener('mouseout', function(e) {
this.hide(); // simple, no animation ..
});
}
else
I = this._I;
// get Position of thumb
var p = Position.page(this);
// set position
I.style.position = 'absolute';
I.stye.left = p[0]+'px';
I.stye.top = p[1]+'px';
// I haven't tested this, so try it ;)
// U se run to show it smoothly
new Run({
elements: I,
time: 0.5,
flow: Run.SMOOTH,
style: {
opacity: [0, 1],
width: [this.offsetWidth+'px', null],
height: [this.offsetHeight+'px', null]
}
});
});
addListener is a method that simplifiers event handling. It is based
on prototype's Event.observe and is part of prototype_extended.js.
Give me feedback if my example works. I surely forgot something ;)
Andi
|
