70 lines
1.7 KiB
HTML
Executable File
70 lines
1.7 KiB
HTML
Executable File
<!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="../../lib/prototype.js"></script>
|
|
<script type="text/javascript" src="../../src/scriptaculous.js?load=effects"></script>
|
|
<script type="text/javascript">
|
|
//<![CDATA[
|
|
|
|
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>
|
|
<p>Test of <code>keepBackgroundImage</code> parameter for <code>Effect.Highlight</code>. Click items to show effect.</p>
|
|
<p>With the <code>keepBackgroundImage</code> parameter.</p>
|
|
<ul id="with">
|
|
<li>One</li>
|
|
<li>Two</li>
|
|
<li>Three</li>
|
|
</ul>
|
|
|
|
<p>Without the parameter.</p>
|
|
<ul id="without">
|
|
<li>One</li>
|
|
<li>Two</li>
|
|
<li>Three</li>
|
|
</ul>
|
|
</body>
|
|
</html> |