000

<!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);
	}
}

//]]>
</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>