Lab 9

In this Lab what I was tasked with with was creating a page that contained two rollovers, one created in fireworks the other through java script on an html. So I will first start off by explaining how I made the rollover  in fireworks. In the fire works I started off with a base document, in this base document I made a star using one of the vector tools. Afterwards. in the states panel I added a second state to the states panel causing  there to be state 1, with the star, and state 2 with a blank document. In state 2 I made a doughnut of the same size as the star in state 1. After that I added a rectangular slice by right clicking after wards a hot spot  to initiate the the rollover once that was done I exported the file which ended up having both images in state 1 and 2 becomes gifs. Once that was over the way I added this rollover to dream weaver was simple. what I did was go to insert>image objects>rollover image then I chose the first image by browsing and second image by browsing, once that was done, I added position coding to make it so it would be in te center along with the other roll over.

Now moving on to the second roll over. This is the code(java script) I used to apply the change in images on the page as you can see where it says " if(document images) {". So to go more into detail the code is basically saying that the source for pic1 is sora.jpg, however it will be treated as a new image since sora.jpg is what will appear after applying the roll over.

<script>
	if (document.images) {
	pic1 = new Image();
	pic1.src ='../../sora.jpg';
	pic2 = new Image();
	pic2.src = '../../deathnote.jpg';
	pic3 = new Image();
	pic3.src = '../../assassins.jpg';
	pic4 = new Image();
	pic4.src = '../../batman.jpg';
	pic5 = new Image();
	pic5.src = '../../charizardx.jpg';
	pic6 = new Image();
	pic6.src = '../../hollow mask.png';
	} else {
	pic1 = pic2 = pic3 = pic4 = pic5 = pic6 = document.r1 = "";
	}
	</script> Here is the rest of the code for the html rollover. For this code, this is basically taking the images from a root directory, a folder which explains the ../../ and putting it inside a table along with the other roll over. Also not only does this code give the height and width of the image but it makes sure that these images link with thecode above as you can see where it says : onmouseover="document.r1.src=pic1.src;"></td>

<table border="1">

<br />

<br />

<tr>

<td><img src="../../sora.jpg" width="174" height="157"

onmouseover="document.r1.src=pic1.src;"></td>

<td><img src="../../deathnote.jpg"width="178" height="159"

onmouseover="document.r1.src=pic2.src;"></td>

<td><img src="../../assassins.jpg" width="191" height="156"

onmouseover="document.r1.src=pic3.src;"></td>

<td><img src="../../batman.jpg" width="172" height="158"

onmouseover="document.r1.src=pic4.src;"></td>

<td><img src="../../charizardx.jpg" width="176" height="157"

onmouseover="document.r1.src=pic5.src;"></td>

<td><img src="../../hollow mask.png" width="177" height="166"

onmouseover="document.r1.src=pic6.src;"></td>

</tr>

</table>