MyPlace

I have been set the task of creating a website that is an exploration of a space. The user will be able to interact with the website to explore the environment. The project is called MyPlace as the space involved will be personal to me. I have chosen to make the website about my own flat. Viewers will be able to navigate between rooms in search for my keys and wallet by moving things to see what is under them.
The website will be created using HTML and JavaScript. I am planning on using JavaScript rollover image swaps to reveal what is under objects in the search for my keys, as well as text fields to display messages to the user.

Test

Using a WYSIWYG JavaScript generator I created a test for my rollover images using the table in my flat. I photographed the table with all of the objects on it and again with no objects on it. I used the first image of a full table as the background to my page. Then I created individual rollover images for each object using both images of the table and placed these on the background image. When the viewer scrolls their mouse over the web page the rollover images give the appearance of the objects disappearing, and revealing the table underneath.

I realised two problems;



As can be seen in the image above the second image of the image swap does not convincingly show the viewer what is underneath and is clearly from a different photograph. This is because i didn't use a tripod meaning the image does not match the original one for positioning. And because when i took the objects off the table the colour of the table changed in the image because of the variation in the amount of light reflecting off it. To counteract this i was going to have to use a tripod and take the same image lots of times with only one object removed at a time to maintain the brightness of the images.
This test has allowed me to iron out all the problems encountered with the images for this project. I now need to work on the JavaScript.