Hello,
Despite Sergio''s excellent documentation on prototype, I’m still
struggling
to get started. I hope somebody is able to help me a with a little example
to get me going.
Please see html code below – I have this little navigation bar and I like to
add some events/functions to the buttons.
Let’s say, onmouseover, I like to change e.g. the background-color of the
button and onclick, I like to execute a specific function. How would I do
that using prototype?
Thank you in advance for your help.
<div id="fm-navbar">
<ul>
<li><img class="fm-btn-home" onmouseover="return
escape(this.alt)"
src="images/spacer.gif" alt="Top level" title="Top
level" width="16"
height="16" /> </li>
<li><img src="images/btn_spacer.gif" alt=""
width="2" height="16" />
</li>
<li><img class="fm-btn-dirup"
src="images/spacer.gif" alt="Up level"
title="Up level" width="16" height="16" />
</li>
<li><img src="images/btn_spacer.gif" alt=""
width="2" height="16" />
</li>
<li><img class="fm-btn-search"
src="images/spacer.gif" alt="Search"
title="Search" width="16" height="16" />
</li>
<li><img src="images/btn_spacer.gif" alt=""
width="2" height="16" />
</li>
<li><img class="fm-btn-refresh"
src="images/spacer.gif" alt="Refresh
screen" title="Refresh screen" width="16"
height="16" /> </li>
<li><img src="images/btn_spacer.gif" alt=""
width="2" height="16" />
</li>
<li><img class="fm-btn-filter"
src="images/spacer.gif" alt="Filter"
title="Filter" width="16" height="16"
/></li>
<li><img src="images/btn_spacer.gif" alt=""
width="2" height="16" />
</li>
<li><img class="fm-btn-config"
src="images/spacer.gif"
alt="Settings" title="Settings" width="16"
height="16" /> </li>
<li><img src="images/btn_spacer.gif" alt=""
width="2" height="16" />
</li>
<li><img class="fm-btn-info"
src="images/spacer.gif" alt="Info"
title="Info" width="16" height="16" />
</li>
</ul>
</div>
_________________________________________________________________
Express yourself instantly with MSN Messenger! Download today - it''s
FREE!
http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/
personally I would do the hover in css. for the onclick you would add this: onclick="function();" where function is the name of the function you want to fire onHover="" Marco M. Jaeger wrote:> Hello, > > Despite Sergio''s excellent documentation on prototype, I’m still > struggling to get started. I hope somebody is able to help me a with a > little example to get me going. > > Please see html code below – I have this little navigation bar and I > like to add some events/functions to the buttons. > > Let’s say, onmouseover, I like to change e.g. the background-color of > the button and onclick, I like to execute a specific function. How > would I do that using prototype? > > > Thank you in advance for your help. > > <div id="fm-navbar"> > <ul> > <li><img class="fm-btn-home" onmouseover="return escape(this.alt)" > src="images/spacer.gif" alt="Top level" title="Top level" width="16" > height="16" /> </li> > <li><img src="images/btn_spacer.gif" alt="" width="2" height="16" /> > </li> > <li><img class="fm-btn-dirup" src="images/spacer.gif" alt="Up level" > title="Up level" width="16" height="16" /> </li> > <li><img src="images/btn_spacer.gif" alt="" width="2" height="16" /> > </li> > <li><img class="fm-btn-search" src="images/spacer.gif" alt="Search" > title="Search" width="16" height="16" /> </li> > <li><img src="images/btn_spacer.gif" alt="" width="2" height="16" /> > </li> > <li><img class="fm-btn-refresh" src="images/spacer.gif" alt="Refresh > screen" title="Refresh screen" width="16" height="16" /> </li> > <li><img src="images/btn_spacer.gif" alt="" width="2" height="16" /> > </li> > <li><img class="fm-btn-filter" src="images/spacer.gif" alt="Filter" > title="Filter" width="16" height="16" /></li> > <li><img src="images/btn_spacer.gif" alt="" width="2" height="16" /> > </li> > <li><img class="fm-btn-config" src="images/spacer.gif" alt="Settings" > title="Settings" width="16" height="16" /> </li> > <li><img src="images/btn_spacer.gif" alt="" width="2" height="16" /> > </li> > <li><img class="fm-btn-info" src="images/spacer.gif" alt="Info" > title="Info" width="16" height="16" /> </li> > </ul> > </div> > > _________________________________________________________________ > Express yourself instantly with MSN Messenger! Download today - it''s > FREE! http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/ > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > >