In lab 6 I had to create a javascript rollover, html rollover, and a gif. In this lab I used the software Dreamweaver and Photoshop CS6. I had a paragraph above each of the 3 sections to have it labelled as to what it is. First I did the html rollover which Dreamweaver did for me. I went to insert, image media, html rollover. Then I selected 2 pictures that were in my lab 6 folder and then Dreamwevaer automatically did it for me. Then to make the gif I went to Photoshop, to the timeline panel and I clicked create a frame animation. In the first frame I had a gradient of black and white which was extended onto the 2nd frame. I created a new layer in which I had an arrow. I put the arrow in only the second frame so the gif just had an arrow popping up. Then I saved it for the web and selected the option for it to loop forever. Then I inserted the image in my html document.
For the javascript rollover, first I made 2 tables. The first table had a bigger image of the first image in the second table. There was only one image in the first table. In the second table I put 5 images. After that I had to put the onmouseover event handler for the images and also I named the image in first table r1. So in my javacript file I had pic1-pic 6 and set it equal to a new image. Then I put its source as the image that I inserted into the second table. I had to use the if else statement. In the else statement it has all the pic1-pic6 equal to each other and the document.r1. I see myself using this in the future for a project to make it automatically enhance my website. This is important to web design because it was kind of like a slideshow but not really and is a rollover instead.
No comments:
Post a Comment