|
|
inset or outset border buttons
So when you’ve learned to use bulleted lists, you were introduced to the concept of inset and outset placed buttons. Each bulleted item is placed in relation to the beginning location of the UL or OL tag. Each list item is then stated with an LI tag. Inset bullets are set to the right of the starting location specified by the OL or UL tag. Outset bullets are further to the left.
The style.borderStyle attribute works the same way. You are able to position the border in an inset or outset styled display. The easiest way to understand this is to simply run the script given below.
<html>
<head>
<script type="text/javascript">
function inset(elmnt) {
elmnt.style.borderStyle="inset";
}
function outset(elmnt) {
elmnt.style.borderStyle="outset";
}
</script>
<style>
td {
background:C0C0C0;
border:2px outset;
}
</style>
</head>
<body>
<table width="80">
<tr>
<td onmouseover="inset(this)" onmouseout="outset(this)">Item One</td>
</tr><tr>
<td onmouseover="inset(this)" onmouseout="outset(this)”>Item Two</td>
</tr><tr>
<td onmouseover="inset(this)" onmouseout="outset(this)”>Item Three</td>
</tr><tr>
<td onmouseover="inset(this)" onmouseout="outset(this)”>Item Four</td>
</tr>
</table>
</body>
</html>
We used the onMouseOver and onMouseOut to trigger the different border styles. You don’t have to go back to the original style, however, and can adjust the bordering styles as needed. A good example of this is to create a display of the sections of a document the user has read or reviewed. When they’re finished reviewing the entire document, all of the border styles will be the same, letting them know in an easy way that they’re finished what they started.
|
|
