Voyage Project Development Stage

After extensive online research into jquery I have managed to put together my Voyage idea in Dreamweaver. The website does exactly what I intended it to do but in a very simple yet interactive way.

Here are screen shots of the two main pages of my website:

The image above is my index page which acts as an introductory splash screen. I have incorporated two separate javascript elements into this page; one is the slideshow and the second is the rollover button. The slideshow is a simple jquery script which enabled me to layer 5 images of the same size on top of each other on the z axis and then cross-fade between these images every 2 seconds. The rollover button is a simple javascript element which switches the image from a red button to a green button when the mouse hovers over it.

The image above is my map page which is the main section of my website. Instead of having 5 separate html pages for each city, I have created one page with a separate div area for each city; as you click on the city name on the navigation or click on the red location pointers the screen scrolls across to the selected area and brings up a text box with a little information about each city. At the bottom of each text box there is also a link to a Wikipedia page with extensive information about that city.

Unfortunately my knowledge of javascript is very limited at the moment and it would have been impossible for me to write a code from scratch that would achieve this effect; therefore I downloaded a jquery plug-in from the following website: http://www.jscraft.net/plugins/craftmap.html

I made adjustments to the code to tailor the website to my own design and content. I changed the navigation list to the specific cities I was using, changed the background image to a large world map image of my own choice, changed the co-ordinates of the city markers and the content within each text box. Finding the exact co-ordinates for each city was the lengthiest process as I had to cross reference with google maps and used trial and error to get the pointers as close to the actual city locations as possible; this was tricky over a map that was 8192 px by 4096 px.

I now have a better understanding of how image mapping and scrolling using jquery works.

Evaluation 

Overall I am very happy with the outcome of this project. I feel my final website conveys my original idea effectively. I will seek feedback from my peers and lecturers before the project deadline and make any necessary changes.