Li = {
onMouseDown_image: function(event) {
new Effect.Highlight(this, {keepBackgroundImage:true});
},
onMouseDown_without: function(event) {
new Effect.Highlight(this);
}
}
window.onload = function() {
var li = $("with").getElementsByTagName('LI');
for (var i = 0; i < li.length; i++) {
li[i].onmousedown = Li.onMouseDown_image.bindAsEventListener(li[i]);
}
var li = $("without").getElementsByTagName('LI');
for (i = 0; i < li.length; i++) {
li[i].onmousedown = Li.onMouseDown_without.bindAsEventListener(li[i]);
}
}
body {
color: black;
background-color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul {
list-style: none;
margin:0; padding:0;
}
li {
margin: 3px 0; padding: 3px 3em 3px 24px;
border: 2px solid #456;
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: 3px 3px;
}
#with li {background-color: #cde;}
#without li {background-color: #ced;}
Test of keepBackgroundImage parameter for Effect.Highlight. Click items to show effect.
With the keepBackgroundImage parameter.
One
Two
Three
Without the parameter.
One
Two
Three