Advanced design tips

Advanced Design

In the next tutorial it is assumed you have a copy of Dreamweaver or a similar web program if you do not, don't worry this part isn't an actual tutorial and more of a copy and paste exercise. The first thing we are going to do is event handlers, below you will find a demo and code, the images for this tutorial are not supplied.

Hover your mouse over the matchstick guy below.

Another example of a mouse over, try hovering your mouse over the arrow below.

Now for the code.

<script type="text/JavaScript">

</script>

<body onload="MM_preloadImages('images/matchstick2.gif')">
<img src="images/matchstick1.gif" alt="matchstick" name="matchstick" width="22" height="68" id="matchstick" onmouseover="MM_swapImage('matchstick','','images/matchstick2.gif',1)" onmouseout="MM_swapImgRestore()" />

Next up click on the button to see a framed version of a site. (To close the open framed version please click the close window button.)

This is a complex idea but can be very cool looking, we do cover this but if you aren't copying and pasting this, it will require a lot of scripting .

You can also try this out below, mouse over the thumbnail and you will see a bigger version of the thumbnail.

The Code

<script type="text/JavaScript">

</script>
<style type="text/css">
#Demo1 {
position:absolute;
left:230px;
top:580px;
width:300px;
height:123px;
z-index:4;
visibility: hidden;
}
#Demo2 {
position:absolute;
left:230px;
top:580px;
width:300px;
height:123px;
z-index:4;
visibility: hidden;
}
#Demo3 {
position:absolute;
left:230px;
top:580px;
width:300px;
height:123px;
z-index:4;
visibility: hidden;
}
</style>

<form id="form1" name="form1" method="post" action="">
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="button" onclick="MM_showHideLayers('logo','','show','navbar','','show','mainmenu','','hide','submenu','','hide','search','','show','content','','show','Demo1','','show','Demo2','','hide','Demo3','','hide')" value="Zen Garden" /></td>
</tr>
<tr>
<td><input type="button" onclick="MM_showHideLayers('logo','','show','navbar','','show','mainmenu','','hide','submenu','','hide','search','','show','content','','show','Demo1','','hide','Demo2','','show','Demo3','','hide')" value="W3C" /></td>
</tr>
<tr>
<td><input type="button" onclick="MM_showHideLayers('logo','','show','navbar','','show','mainmenu','','hide','submenu','','hide','search','','show','content','','show','Demo1','','hide','Demo2','','hide','Demo3','','show')" value="Google" /></td>
</tr>
<tr>
<td><input type="button" onclick="MM_showHideLayers('logo','','show','navbar','','show','mainmenu','','hide','submenu','','hide','search','','show','content','','show','Demo1','','hide','Demo2','','hide','Demo3','','hide')" value="Close Window" /></td>
</tr>
</table>
</form>
<div id="Demo1">
<iframe src="http://www.csszengarden.com" width="295" height="121"></iframe></div>
<div id="Demo2">
<iframe src="http://www.w3c.org" width="295" height="121"></iframe></div>
<div id="Demo3">
<iframe src="http://www.google.com/" width="295" height="121"></iframe></div>
</div>

Lastly here is a demo of an image map you can try hand coding this although it is not very practical and is much easier with web design software like Dreamweaver. An image map is parts of a picture used to make links to another site or page,in this example if you click on either Edwin Van der sar (goalkeeper), Ruud Van nistlerooy (number 9), Arjern Robben (number 11) or Robin van persie (number 17) it will take you to a bio of that player on Wikipedia.

holland

The Code

And that concludes the advanced design tips, we now move onto a short introduction into CSS.

Tables

CSS