ex1.html: See Sebesta Section 5.4 and Table 5.2
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dynamic JavaScript Example 1</title>
</head>
<body>
<p>
<!-- This is a very simple example shows you how to write a
html react to the motion of the mouse
move the mouse on and you will see an alert-->
<a href="#" onmouseover="alert('Hi')">Move the mouse on me</a>
</p>
</body>
</html>
ex2.html: See Sebesta Section 5.4.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dynamic JavaScript Example 2</title>
</head>
<body>
<!-- move the mouse on the image will change the image -->
<p>
<img alt="[cat]" src="post.gif"
onmouseover="this.src='ice.gif'" onmouseout="this.src='post.gif'"/>
</p>
</body>
</html>
ex3.html: See Sebesta Section 5.3
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Example 3</title>
<script type="text/javascript">
<!--
function changeImage() {
document.cat.src="mouse.gif";
}
// -->
</script>
</head>
<body>
<h3>Move the cursor over the image will change the image</h3>
<p>
<img alt="[image]" src="ice.gif" name="cat" onmouseover="changeImage()"/>
</p>
</body>
</html>
ex4.html: See Sebesta Section 5.3
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Example 4</title>
</head>
<body>
<p>
<a href="#" onmouseover="document.cat1.src='toaster.gif'"
onmouseout="document.cat1.src='post.gif'">
Move the cursor on me changes first picture</a><br/><br/>
<a href="#" onmouseover="document.cat2.src='phone.gif'"
onmouseout="document.cat2.src='phone2.gif'">
Move the cursor on me seconds picture</a><br/><br/>
<img alt="[image]" src="post.gif" name="cat1"/>
<img alt="[image]" src="phone2.gif" name="cat2"/>
</p>
</body>
</html>
ex5.html: See Sebesta Section 5.3
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Example 5</title>
</head>
<body>
<!-- name attribute in img tag is not W3 standard -->
<p>
<a href="#" onmouseover="document.images[0].src='toaster.gif'"
onmouseout="document.images[0].src='post.gif'">
Move the cursor on me changes first picture</a><br/><br/>
<a href="#" onmouseover="document.images[1].src='phone.gif'"
onmouseout="document.images[1].src='phone2.gif'">
Move the cursor on me seconds picture</a><br/><br/>
<img alt="[image]" src="post.gif" />
<img alt="[image]" src="phone2.gif" />
</p>
</body>
</html>
ex6.html: See Sebesta Section 5.3
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Example 6</title>
</head>
<body>
<!-- W3 standard -->
<p>
<a href="#" onmouseover="document.getElementById('cat1').src='toaster.gif'"
onmouseout="document.getElementById('cat1').src='post.gif'">
Move the cursor on me changes first picture</a><br/><br/>
<a href="#" onmouseover="document.getElementById('cat2').src='phone.gif'"
onmouseout="document.getElementById('cat2').src='phone2.gif'">
Move the cursor on me seconds picture</a><br/><br/>
<img alt="[image]" src="post.gif" id="cat1"/>
<img alt="[image]" src="phone2.gif" id="cat2"/>
</p>
</body>
</html>
ex7.html: change background properties.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Example 7</title>
</head>
<body bgcolor="white">
<p>
<ul>
<li><a href="#" onclick="document.bgColor='green'">Green</a></li>
<li><a href="#" onclick="document.bgColor='red'">Red</a></li>
<li><a href="#" onclick="document.bgColor='blue'">Blue</a></li>
<li><a href="#" onclick="document.bgColor='yellow'">Yellow</a></li>
</ul>
</p>
</body>
</html>
ex8.html: change background image
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Example 8</title>
</head>
<body>
<h3>Move mouse on image can change the background</h3>
<p style="border: solid; border-color:blue; background: white">
<img alt="paws" src="paws.gif"
onmouseover="document.body.background='paws.gif'"/>
<img alt="cf-bg" src="cf-bg.gif"
onmouseover="document.body.background='cf-bg.gif'"/>
<img alt="cs-bg" src="cs-bg.gif"
onmouseover="document.body.background='cs-bg.gif'"/>
<img alt="ha-bg" src="ha-bg.gif"
onmouseover="document.body.background='ha-bg.gif'"/>
</p>
</body>
</html>
ex9.html: Change CCS properties
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Example 9</title>
</head>
<body>
<h3 style="color: yellow; background:#33ff3f;" id="test">
Change me</h3>
<ul>
<li><a href="#" onclick="document.getElementById('test').style.color='red'">
Change font to red</a></li>
<li><a href="#" onclick="document.getElementById('test').style.color='yellow'">
Change font to yellow</a></li>
<li><a href="#" onclick="document.getElementById('test').style.background='#f122f3'">
Change background</a></li>
<li><a href="#" onclick="document.getElementById('test').style.background='#33ff3f'">
Change background</a></li>
</ul>
</body>
</html>