JavaScript DHTML/Scriptaculous/Highlight
Click to highlight
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script>
<script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
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]);
}
}
</script> <style type="text/css"> 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;}
</style> </head> <body>
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
</body> </html>
</source>
Effect: Highlight
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script>
<script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#d1 { background-color: #888; }
</style>
</head> <body>
script.aculo.us Effects functional test file
<a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("highlight",{duration:1.5}) }); return false;">Highlight</a> |
</body> </html>
</source>
