Join Chris Converse for an in-depth discussion in this video Slicing and optimizing web graphics, part of Create an Interactive Map with jQuery.
To begin our project we're going to create a folder on the desktop.…We're going to name this myInteractiveMap.…Once that's created we'll open up this folder and we are going to create four…additional folders inside.…One called includes, one called the images, one called cities, and…one called template.…Next we'll take the cities and template folders and drag them inside of the images folder.…
Now once we've our folder structure in place let's come over to the exercise…files. Let's open up City Photography.…I am going to select the first city, scroll down and hold Shift, and select all…of the cities, and Option+Drag or cut and paste the copy of all of these JPEGs…into the cities directory we just created inside of the images directory.…Now with those in place let's close up cities inside of the images directory.…Back in the Exercise Files we'll close the folder City Photography.…Let's open up the folder Art Templates.…Now inside of Art Templates let's open up the map.psd file.…
Now all of the artwork inside of this file is contained in all of these…
Take a look at the finished web site here.
- Preparing web graphics
- Creating the main container
- Manipulating links with CSS
- Adding a drop-down menu
- Downloading jQuery and adding interactivity to a project
- Creating city details
- Overriding click events of anchor tags with jQuery