Roll the mouse over the images before clicking the mouse - no descriptive text
is visible.
Then click the button and roll the mouse over the images - a descriptive text appears.
<script type="text/javascript"
src="http://code.jquery.com/
jquery-latest.js">
</script>
<script type="text/javascript">
function addTitle() {
$("img").each(function(m){
this.alt="Image " + (m + 1);
});
}
</script>
<style type="text/css">
.code {color: red;}
.back {background-color: yellow;}
</style>
</head>
<body>
<h1>Adding IMG title attribute</h1>
<img src="images/image1.jpg" alt="flower1"/>
<img src="images/image2.jpg" alt="flower2"/>
<img src="images/image3.jpg" alt="flower3"/>
<img src="images/image4.jpg" alt="flower4"/>
<br />
<form action="">
<input type="button"
value="Add alt attributes"
onclick="addTitle()"></input>
</form>