src=”first.jpg”
style=”filter:progid:DXImageTransform.Microsoft.
fade(Duration=2);
border= 14px solid peru inset; position=relative; left=20%;”>
<br><br>
<INPUT type=button style=”position=relative;left=83%;font-
weight: lighter;
font-size: 20px; width: 120px; font-family: ‘times new
roman’; height: 44px”
value=”See More” onClick=”fadethem()”>
<IMG src=”first.jpg” style=”width:1;
height:1;visibility:hidden”>
<IMG src=”second.jpg” style=”width:1; height:1;
visibility:hidden”>
</BODY>
</html>
The script in this example is simple because you merely click the button
once to exchange the images — no toggling. But it’s all as smooth as butter,
and looks pretty impressive. Sites that use this effect stand out from the
crowd. Notice that the two images are defined as having a hidden value for
their visibilityproperty, but the first image is in the code twice. The first
occurrence defines the size, border, and position for both images. That
occurrence also seeds the first image so that the visitor to your site sees the
first image when the page loads.
Figures 13-7 through 13-9 illustrate the transition effect, where one “house”
gradually changes places with the other:
If you prefer to use JavaScript in the above code, you just need to dump a
bunch of extraneous punctuation into the preceding VBScript code:
<SCRIPT LANGUAGE=JavaScript>
function fadethem()
{
myimage.filters.item(0).Apply();
myimage.src=”second.jpg”;
myimage.filters.item(0).Play();
}
</SCRIPT>
244 Part III: Adding Artistry: Design and Composition with CSS
