<! 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">
<Head>
<Title> </title>
<Style type = "text/css">
# Img1
{
Width: 500px;
Height: 400px;
Border: solid 1px # ccc;
Display: none;
}
</Style>
<Script src = "jquery-1.9.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('# Button1'). click (function (){
$ ('# Img1'). show (5000 );
});
$ ('# Button2'). click (function (){
$ ('# Img1'). hide (5000 );
})
$ ('# Button3'). click (function (){
$ ('# Img1'). fadeIn (2000 );
})
$ ('# Button4'). click (function (){
$ ('# Img1'). fadeOut (1000 );
})
})
</Script>
</Head>
<Body>
<Input id = "Button1" type = "button" value = "expand image"/>
<Input id = "Button2" type = "button" value = "shrink image"/>
<Input id = "Button3" type = "button" value = "image"/>
<Input id = "Button4" type = "button" value = "Image 1"/>
</Body>
</Html>