The Manhatten Project wrote:
Hi Ken/Christophe,
I actually did this in the end ..
Event.observe('mydiv', 'mouseover', function(e){
Element.setStyle('mydiv', { border: '1px solid red;' } ); });
Event.observe('mydiv', 'mouseout', function(e){
Element.setStyle('mydiv', { border: '0px solid red;' } ); });
I am sure it can be cleaned up ;) but it does work....
You are much better off to change the class rather than the border
directly, and to just change the colour rather than add/remove it -
otherwise you'll see a 'jump' as it's added and removed, e.g.
<style type="text/css">
.whiteBorder {border: 1px solid white;}
.redBorder {border: 1px solid red;}
</style>
Give your div a class of 'whiteBorder' (or some other colour, whatever
suits), then use mouseover/out events to add/remove the redBorder
class:
function addBorderEffect(){
var i=0, el;
while ((el = arguments[i++])){
$(el).onmouseover = function (){
Element.classNames(this).add('redBorder');
};
$(el).onmouseout = function (){
Element.classNames(this).remove('redBorder');
};
}
}
window.onload = function(){ addBorderEffect('id0','id1');};
Give the call as many IDs as you like. If you want to do it completely
without Prototype then try:
function addClass(el, cssClass){
var re = new RegExp('(^|\\s)' + cssClass + '(\\s|$)');
if (!re.test(el.className))
el.className += ' ' + cssClass;
}
function remClass(el, cssClass){
var re = new RegExp('(^|\\s)' + cssClass + '(\\s|$)','g');
el.className = el.className.replace(re,' ')
.replace(/\s+/g,' ')
.replace(/(^\s|\s$)/g,'');
}
function addBorderEffect(){
var i=0, el;
while (( el = document.getElementById(arguments[i++]) )){
el.onmouseover = function (){addClass(this, 'redBorder');};
el.onmouseout = function (){remClass(this, 'redBorder');};
}
}
window.onload = function(){ addBorderEffect('d0','d1');};
--
Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby on
Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
