# Ruby Rails Images & Lowpro

**URL:** <https://www.ruby-forum.com/t/ruby-rails-images-lowpro/140450>\
**Category:** Rails\
**Created:** [June 14, 2008, 5:37am UTC](https://www.ruby-forum.com/t/ruby-rails-images-lowpro/140450 "2008-06-14T05:37:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![freaknasty](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/f/a8b319/32.png) [@freaknasty](https://www.ruby-forum.com/u/freaknasty)\
**Post date:** [June 14, 2008, 5:37am UTC](https://www.ruby-forum.com/t/ruby-rails-images-lowpro/140450/1 "2008-06-14T05:37:15Z")

</div>

I’ve been reading around and found out lowpro but with few examples. I  
was wondering if anyone here could give elaborate examples of some AJAX  
calls and lowpro. How about a mouseover an image? Also how about  
link\_to\_remote and update a div with a partial?

---

<div class="post-metadata">

**Author:** ![freaknasty](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/f/a8b319/32.png) [@freaknasty](https://www.ruby-forum.com/u/freaknasty)\
**Post date:** [June 14, 2008, 10:34am UTC](https://www.ruby-forum.com/t/ruby-rails-images-lowpro/140450/2 "2008-06-14T10:34:04Z")

</div>

All the things you list are very easy with LowPro. I will provide some  
psuedo-code / aircoded.

1. Mouseover an image

// options ‘hovered’ : ‘path/to/image’  
HoverImage = Behavior.create({  
initialize : function(options) {  
this.options = options || {};  
this.options.idle = this.element.src;  
},  
onmouseover : function(e) {  
this.element.src = this.options.hovered;  
},  
onmouseout : function(e) {  
this.element.src = this.options.idle;  
}  
})

Use:

Event.addBehavior({  
‘#img1’ : HoverImage({ hovered : “/images/somepic.png” })  
})

1. Link to Remote (Request)

HTML:

= link\_to “caption”, some\_action\_url, :class =\> “remote-request”

JS:

Event.addBehavior({  
‘.remote-request’ : Remote.Link  
})

1. Link to Remote (update a div)

HTML:

= link\_to “caption”, some\_action\_url, :class =\> “remote-update”

JS:

Event.addBehavior({  
‘.remote-request’ : Remote.Link({ “update” : “some\_div\_to\_update” })  
})

Or you can even do complex remote links with stuff happening before and  
after:

HTML:

= link\_to “Delete”, delete\_something\_url, :id =\> “delete\_link”

JS:

DeleteRemoteItem = Remote.Link({  
onLoading : function() {  
$(‘someid’).doSomething();  
},  
onComplete : function(e) {  
$(‘someid’).doSomething();  
}  
})

Event.addBehavior({  
‘#delete\_link’ : DeleteRemoteItem  
})