Task 1 - DHTML
in the example that you could show English and Swedish text, hold the pointer over two different links. This example illustrates the principles behind DHTML, but you will certainly find weaknesses:
•
When the page loads first time, both English and Swedish text.
•
When you enable the Swedish text, and then remove the mouse from the link text is left until you come upon the second text again.
Create a modified version which do not show a text before the user moves the mouse over one of the links and showing only text until the cursor is over the current link. That is, the text is displayed only when the pointer is over one of the links.
Task 2 - View one of three images
Create a page that has three small pictures. When you click on one of these is a larger version appears. It is not allowed to use the link to the image, not <a href…>
Tip: You can, but need not, use the same technique as in the previous task.
The example:
<html>
<head>
<script type="text/javascript">
function engelska()
{
document.getElementById("engelsk_text").style.visibility = "visible"
document.getElementById("svensk_text").style.visibility = "hidden"
}
function svenska()
{
document.getElementById("engelsk_text").style.visibility = "hidden"
document.getElementById("svensk_text").style.visibility = "visible"
}
</script>
</head>
<body>
<p>Chose langua:
<a href="#" onMouseOver="engelska()">English</a>
<a href="#" onMouseOver="svenska()">Swedish</a>
</p>
<div id="engelsk_text">Here is the english version</div>
<div id="svensk_text">here is the swedish version</div>
</body>
</html>