Create an Interactive Map with jQuery and Dreamweaver
1h 12m Intermediate Mar 24, 2011 Updated Aug 31, 2011
Viewers: 14,939
In Create an Interactive Map with jQuery and Dreamweaver, Chris Converse shows how to
design and create a rich interactive map for a web site using the open-source scripting library
jQuery and the tools in Dreamweaver. The course covers creating web-optimized images using
the slicing tools in Photoshop, implementing the HTML and CSS to assemble an infographic page
layout, and adding interactivity with JavaScript and jQuery's fast and concise code library.
Exercise files are included with the course.








Topics include:
Preparing web graphics
Preparing the base 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
Enhancing the design with CSS3
Using the exercise files
When you download the exercise files, there is going to be four folders inside of the folder. The
first one is Art Templates, which has the source Photoshop files for creating the dots and the map
graphic. The next one is City Photography, where we have the whole bunch of different city
photographs. These two have watermarks on them, but of course you can replace these with their
own graphics. Next is the Code Snippets folder. This has two HTML files that contain some
source code for placing in the anchor tags and the city details. We will code the first anchor tag
and city details so that we can see the structure, and then we'll use these HTML files to replicate
out all of the different cities.
And then lastly is the Final Project folder. This is the folder we looked at in the introduction video
and by the end of the course you will have created all of the files that are inside of this Final
Project folder. Now in the next movie we'll create our project folders and start by creating our
graphics from the Art Templates directory.
Slicing and optimizing web graphics
Now to begin our project, let's create a folder on the desktop. We'll call this myInteractiveMap.
Let's open that folder up, and then inside we are going to create four additional folders: once
called images, one called template, one called includes, and one called cities. Next, let's take the
template and cities folders and just drag those inside of images.
Let's go over to the exercise files. Inside of this City Photography folder, I'm going to select the
very first city, scroll down, hold Shift, select all of the cities. I am going to Option+Drag a copy of
all these cities into the cities folder we created on the desktop. Let's close that. Let's go back to
our exercise files. Close up City Photography. Now inside of art templates we have those two
Photoshop files: dots.psd and map.psd. Let's start by double-clicking and opening up the
map.psd file up in Photoshop.
Now in this Photoshop file here we have everything separated on layers, if you want to change
any of the artwork or make your own modifications to it. But this is already sized to the proper
size we are going to use in our project. So we are going to come up to the File menu, choose
Save for Web & Devices. This will bring up Photoshop's Image Optimization tool. This is the
same dialog box you'll also see in illustrator, and it looks very similar to what you see inside of
Dreamweaver and Fireworks except for some of the controls are on the other side of the
screen. So what we are going to do here is save this out, PNG-24 so we'll get some semitransparency in the background here.
Let's choose Save. On the desktop, let's choose InteractiveMap/images directory, and this is
going to be in our template folder, and choose Save and close our file. Next let's open up the
dots.psd file. I am going to zoom up on this a little bit so we can see it. So what we are going to
do with this graphic is use a technique called CSS sprite, which means we're going to have one
image that we are going to use inside of an anchor tag and we are actually going to shift this
graphic up and down with CSS.
So I am going to get my Marquee Selection tool, hold Shift, and just click and drag out a perfect
square here. And notice over here in the info panel the size is 20x20 pixels. That's the size of the
anchor tags we are going to create with our CSS file. Now if I take this 20-pixel marquee and just
drag it down to the next 20-pixel mark, you can see that the yellow dot is in the same position as
the red dot, and the green dot is also in the same position as the yellow and red. So you can
imagine this graphic moving up and down inside of the anchor tags as we roll over the different
dots.
At this point, let's come up to the File menu > Save for Web & Devices. We are also going to set
this to a PNG-24. Hit save. We are going to save this into template directory as well. It's going to
be called dots.png, Hit File > Save. Now we can close our file. So now in the InteractiveMap
folder we created on desktop we should have all of our cities in the cities folder, our two template
PNGs inside of the template directory, and both of those are inside of the images directory. With
all of our graphical assets in place, in the next movie we'll start creating our HTML and CSS files.
Creating and linking HTML and CSS files
Now that we have all of our graphics created, let's switch over to Dreamweaver. Now this course
is also being offered as a code-only course as well. So if you prefer to not use a visual tool like
Adobe Dreamweaver, you can find the same course in on lynda.com library as a code-only
course. So now inside of Dreamweaver let's come to the File menu, choose New. Let's choose
HTML. Under DocType we are going to come over and choose XHTML Transitional. We want to
make sure that this will also work in IE 7 and 8. Let's click create.
Right away let's choose File > Save. Now in the Desktop, my InteractiveMap, right in the root of
there we are going to save this as index.html. Hit Save. Let's come to the File menu, choose
New, new CSS document. Let's say create. Right away let's save this. File > Save. Let's put that
in the includes directory. We'll call this interactive_map.css and click Save.
Now we have our two files created in Dreamweaver. We have our HTML file and our CSS
file.Now what I want to do is hook the CSS file into the HTML file. So let's come over to the HTML
file. Let's come up to the Format > CSS Styles, choose Attach Style Sheet. Click Browse. From
the Desktop choose InteractiveMap > includes, choose interactive_map.css. Then hit Choose
and say OK. Now there is two indications Dreamweaver is going to give us that we've
actuallyhooked the CSS file into our document.
The first one is I can see along here the related files area shows me that interactive_map is also
a file that's being referenced by index.html. I can also see in the CSS Styles panel that
interactive_map.CSS file now shows up here, so any rules that we start creating are going to
show up in the CSS Styles panel as well. Let's come up to the File menu, choose File > Save All,
just to make sure all the files are saved. Now that we have our HTML and CSS files created and
the CSS hooked into the index.html file, in the next movie we are going to start creating some
CSS rules, and we are actually going to base some of those properties on a sketch that we've
created to help us sort of map out this project.
Creating the main container
Now, the first thing we need to do in our HTML is create a map container. This is going to be a div
that's going to hold all the anchor tags and all the form elements and city detail divs. Now before
we do that, or before we create any CSS, I want to refer back to a sketch. So I always
recommend creating a sketch for your projects. This gives you the ability to sort of draw out
where the items are going to be placed, some the dimensions of the different items, and will
inform us when we create some of our CSS properties. So now in this sketch we have an
outermost container of 760 pixels wide by 325 tall. We're also going to use anchor tags for the
dots, and those are to be 20 pixels by 20 pixels.
We're actually going to use that background graphic we created in Photoshop called dots.png
inside of there, and we're going to shift it up and down, using it as a sprite. Over on the right-hand
side we're going to have our little city photography at 75 pixels and then a 130-pixel- wide column
of text next to those. So now, back in Dreamweaver, in the CSS Styles panel we're going to start
by creating our first rule. So let's come down and create new CSS rule. Inside of the New CSS
Rule dialog, make sure at the bottom, instead of This document only, we want to make sure and
target this tule into the interactive_map.css file.
We're going to leave this setting up here as a class, and the name of the first class is going to be
map_container. Click Choose. The first item, Type, let's choose the Arial family set
Arial,Helvetica, sans-serif. For font size we will choose 12 pixels, and for color we come down
and choose white. Next, let's go to the Box properties. Under Box, for Width, 760, 325 for the
Height.
Let's set a float-right. For Padding let's leave zero for all the settings. For margin left uncheck
Same for all, and let's put in 0 for Top, Right, Bottom, and 20 pixels on the left. Since our object is
going to be floating to the right, this means that text or any other items on the page that are on
the left-hand side are not going to get within 20 pixels of our container. Next, let's go to
Background. Under Background-image let's choose Browse. From the desktop, choose
myInteractiveMap/images/template.
Let's choose map.png. Click Choose. Let's set no repeat and a 0 on the X and a 0 on the Y
forbackground composition. Lastly, let's come over to Positioning. Now since those anchor tags
inside of this map container are going to be absolute positioned, they have to have something to
position themselves from. If we don't set a position setting for the container, they're going to
position themselves based on the body tag or the main viewport of the browser. So it's coming in
here under Position and set this to relative.
This means that the positioning attributes of the map container will still position itself relative
based on the other items in the page, but anything inside of it with absolute position will reference
the map container instead. Then let's choose OK. Now we can see up here in the CSS Styles
panel I have a little arrow here. I can toggle down and see all the classes. There's the first class
here. From the Insert menu, let's come over to Layout, and the very first item here is called Insert
Div Tag. I'll click Insert Div, At insertion point, which is where my cursor is in theDesign view. For
class let's choose map_container and then choose OK.
Dreamweaver is going to place a div right in the page. It's also going to put some default text up
here, which I can't quite see here unless I switch over to Code view. It says, "Content for class
'map_container' Goes Here." We set our type to white, since some of the content on the righthand side needs to be white. Now Dreamweaver puts this default text in here to give me a way to
be able to target inside of the div, select an item inside of here, and be able to make changes. In
the next movie we will use this default text to create our anchor links and start creating our dots.
Adding the Navigation Elements
Manipulating anchor links with CSS
Now that we have our map container div in the page here, we can see the map background
showing up, and Dreamweaver put that default text at the top. Let's click and drag some of that
default white text, and down here in the link field in the Properties panel let's enter Shift+3, or a
hash sign. Hit Return. This is going to create a self-link inside of HTML and it's also going to
turn the type blue and give us a blue underline. So now at this point let's come over to the Code
view, and inside of Dreamweaver's Code view I want to format our content a little bit.
So let's add a tab before the div tag here. After the div tag, let's hit Return, tab in the content, and
at the end of the line let's hit another Return and put the ending div on another line. This will give
us some more visual representation of what's happening. This outermost container is our map
container here, this div, and inside of here is all the content. Now let's come over here and delete
that default text Dreamweaver put in, let's delete the text that's inside of the anchor tag, and let's
delete the text that's outside of the anchor tag.
Now in addition, inside of the anchor tag let's come in here and delete the href = "#", and let's
replace that with class equals two quotes and then the word dot. That's going to be a CSS name
we are going to create. Now that that's done, let's come back to Design view. Now in Design view
we can't see that anchor link at all. It doesn't have any content inside of it, and there is no content
around it either. So let's come over to the CSS Styles panel. Let's come down and create a new
CSS rule.
We are going to create a compound rule. We are going to type a.dot. What this compound rule
means is that this rule is only going to target anchor tags if that anchor that has a.class
associated to it, which is the class that we manually typed in the code. Let's choose OK. I'm going
to move this a little over to the side so we can see what happens in the background. Let's come
down to the Box properties. We're going to set the Width to 20 and the Height to 20.
Next let's come over to the Block properties. Now one thing about anchor tags is they have a
display type of inline by default, so they're only as tall or as wide as the content that's inside of
them. Under the Block properties we're going to come down to Display and we are going to
change this to be a block display type and then click Apply. Once we do that, notice in the
background here I can see the outline of that anchor tag. Dreamweaver is outlining that object the
same way it outlines a div, because it has block properties assigned to it. Now let's come over to
the Background settings.
Let's choose background image. Let's pick the dots.png. Let's click Choose. Under repeat, let's
say no repeat. Let's choose a zero for the X and Y position. And then one more setting we
aregoing to want to pick, let's come down to Extensions. Some browsers, like Safari, will not
show a hand cursor if we rollover an anchor link that doesn't have a href. Since we are going to
be controlling what happens on click with JavaScript and jQuery, we don't want to have the href
getting in the way as well. So under Cursor, we are going to come in here and type pointer.
This is going to tell Safari and any other browser that when your cursor rolls over this item to
change our cursor into the pointer cursor. Now we can click Apply and we'll see the dot now show
place. Let's choose OK. Now that we have our dot created out of an anchor tag where we've
redefined the anchor tag's display type from inline to block and we have our background
graphics we created in Photoshop, showing the first 20 pixels, in the next movie we are going to
create two additional CSS rules that are going to lock onto that background graphic and use that
as a CSS sprite while we create the different states of our map dots.
Creating the dot states
Now with our anchor link showing the dot properly, let's come over to our CSS and create the
different states for the states for this dot. The first one is going to be the hover state. So let's
come over here to our CSS rule, create a new CSS rule. Let's come down to Compound,
a.dot:hover. The colon defines the pseudo-class of hover. All we are going to set in here under
the background settings is we are going to set the X to 0 and the Y value to -20. Now some
browsers don't support setting only one background position without setting both, so just to make
sure this works in all the browsers. Let's set 0 for X, which is what it by default, and -20 for the Y.
So this is going to shift this vertically 20 pixels, which matches the same 20 pixels that we
measured out in Photoshop.
Let's click OK. To test this, let's choose File > Save All. Let's choose File > Preview in
Browser.Now we'll hit reload to make sure the style sheet is reloaded. And now what's happening
when I roll over this is the hover state that we just created is now shifting that background graphic
that we created in Photoshop -20 pixels on the Y axis, so it's moving it up to reveal the yellow
dot.Now that that works, let's close our browser. Let's come back. Let's go over to our CSS rules
and create one more rule, one more compound rule.
This is going to be a.dot.selected. So now we want to create a rule that's going to show dots in
their selected state. Let's choose OK. Let's go to background. Let's set 0 on the X and -40 on the
Y. Let's choose OK. Now in order to see this work, we can't assign multiple classes to an object
in Dreamweaver's interface; however, we can certainly do it in Code view.
So let's switch over to Code view. Let's find our anchor tag. Inside of the class definition for dot,
let's hit a space. Type selected. Now let's switch back to Design view and we'll see that the dot is
now showing up in its green state, which means the background graphic is being shifted -40
pixels vertically. Now this is the selected state we are going to be setting inside of jQuery. So
when somebody clicks on the dot we are going to add the selected class to the dot and the CSS
will automatically turn them green.
So let's go back to Code view now that we know that that works, and let's come in here and
delete the selected class. Again, we'll add that later with JavaScript. Switch back to Design
view.Let's choose File > Save All, make sure you save all of your work, and now with all three
states of our dots created with CSS, in the next movie we are going to work on absolutepositioning the dots across the map.
Adding custom attributes into HTML
Now that we have the three different states for the dots defined in the CSS, let's come back to the
CSS panel and let's open up the rule a.dot. Now in here let's come down to positioning.Let's set
the position to absolute. Let's set the Top placement to 20 and the Left placement to 20. Now
when we come down here and click Apply, we'll see in the background now, that dot is now
positioning itself 20 pixels from the top and 20 pixels from the left-hand side. Now let's click
OK. Now all of the position properties are being set inside of the CSS file.
What this means is that when we add additional dots onto map, every one of those dots is going
to have the same top and left setting. So what we are going to do is come up to the
interactive_map.css file. Let's scroll down until we see the a.dot class, and let's come down here
and select left and top, and let's cut these to the clipboard. So we are going to leave the value of
position absolute, along with all of the other settings for the anchor tag with the dot class, but the
absolute-positioned values for top and left we want to set on the actual anchor tags themselves.
So let's switch back to the index.html file. Let's switch into Code view, and what we are going to
do in Code view is inside of the anchor tag, after the dot class, I am going to hit a space, and I am
going to type style. As soon as you start typing some of the letters, Dreamweaver's code hinting
will come up. I can Return to accept that style attribute. And now I am going to hit Command+V or
Ctrl+V to paste the left and top settings. Let me delete that extra line space in there.
So at this point let's switch to Split Screen view where Dreamweaver will show us the Design
view in one part of the screen and the Code view in the other part of the screen. And also notice
that Dreamweaver gives me little hash symbol here. When we have an absolute-positioned object
inside of Dreamweaver we can actually click on this and drag this around on the stage. So I am
going to drag this onto the map and when I let go, notice the Dreamweaver is updating the
references in the inline style based on where I let go that div. So if I come down here and move it
again, let go, I can see that it's now been changed to 178 and 166.
This gives us a very nice sort of visual way to be able to plot the dots on our screen. So I am
going to come down here and grab this dot. I am going to move it up into the corner here and with
it up here in the corner, I am going to select the entire anchor tag, and let's choose Edit and copy
it to the clipboard. Now down in Design view, let me click on this dot, and let's place the first
dot. We'll bring this down to where Rio de Janeiro is. I'm going to come up into Code view, hit my
cursor after the anchor tag, hit a Return, paste another dot. When I click down on the map I can
see the second dot now in that same place.
Let's click and move this around. Let's move this over to London. Let's come up into Code view,
hit Return, place another dot, come down into Design view. Let's move this over to Sydney.Code
view, paste another dot, click down on Design view. Let's grab this dot and drop it over near
Tokyo. Let's come back into Code view, hit one more Return, click down into Design view, select
this guy, and let's bring this over to Johannesburg.
So at this point we simply have five anchor tags inside of the main map container up here. We
have a CSS global rule that's setting that positioning as well as the background graphics and the
inline style redefined as block for the anchor tags. And in addition we taken some of the
properties from the absolute positioning, the left and top attributes, and have applied them directly
to the individual anchor tags. In the next movie we'll add some additional attributes into the
anchor tags that we can lock onto with jQuery.
Positioning the dots on the map
Now in order for us to be able to turn dots on and off depending on the menu item that's selected,
or bring up city detail depending on the actual dot that was selected, we're going to need to add
more information into our HTML about these particular dots. So what we're going to do is, on the
first dot, let's come up here, and after the inline style, before the end of the tag, let's click in here
to get our cursor after the inline style attribute. And notice that Dreamweaver will show me the
highlight down here, so I know that I'm on top of Rio de Janeiro. So what we're going to do is add
in some attributes into here, and as long as we format these properly, these will remain HTMLcompliant.
So let's hit a space, and let's use an attribute that we're making up called continent="", and we're
going to use two-letter indications for each of the continents. So I'm going to type SA for South
America. Outside of the attribute let's hit a space and let's add another one: city="", and inside
here were in a type the name of the city, riodejaneiro.
Im going to leave this lowercase, all as one name, because we're actually going to use this
particular city to pick out an ID name, so that we can tell jQuery where to pull the data from
elsewhere in the page. So no the next line, let's get our cursor after the inline style attribute
here.Sometimes you might have to click into Design view and then back out to get Dreamweaver
to highlight it. This is London. So we're going to type continent=. Inside we're going to type EU for
Europe. city="".
Type london. Next one we'll click back down into Design view and then back into Code view. This
is going to be Sydney. continent="AU" for Australia, space, city="", sydney. Next one. This is
going to be Tokyo. continent="AS" for Asia, space, city="", tokyo. Last one, this is Johannesburg.
continent="" AF for Africa, space, city="" johannesburg. Now that we have our additional data in
place for the five dots we've placed, let's switch to full Code view for the index.html page. Next,
let's go to the File menu, choose Open. On the desktop let's go into our Exercise Files, let's go
into Code Snippets, and let's open the 1-anchor_tags.html file.
Inside of here are additional anchor tags with all the continent information and the cities and the
plotting points. Let's select all of these anchor links. Let's choose Edit > Copy. Close that file.Let's
go back to our index.html file. After Johannesburg, let's hit a return, and then let's paste all of the
links. Now to keep the formatting nice, I'm going to get my cursor inside of here. As long as I have
a selection on every one of the different lines, I can simply hit Tab and Dreamweaver will tab
these all into place.
Now let's switch back out to Design view. So here we have all the dots plotted across all of the
different continents. Every single dot has a continent assignment and a city assignment. Now with
all of our dots in place, in the next movie we will create the dropdown form menu.
Adding a dropdown navigation menu
Now we are going to add a dropdown menu into our interactive map. I'm going to click my cursor
inside of this div to make sure my insertion point is inside of the map_container div. I can also see
that in the lower left-hand area of the document structure here; div.map container is where my
insertion point is. Now up in the Insert panel let's switch over to Forms and let's come over
here and select the Select (List/menu) item. When I click on this I'll be asked for the name of the
Select List item. Let's call it continent. Let's click OK.
Dreamweaver will next ask if we want to add a form tag. Choose Yes. Now the dialog box goes
away, the form element will be selected, and in the Properties panel here I can see that
Dreamweaver has named this form 1. Let's rename that mapForm with a capital F. Hit Tab to
make the selection stick. Now let's come up here into the document and let's click on and select
the dropdown menu itself. We'll see down here the continent label that we gave that in the dialog
box. Let's come up over here to List Values. Click on that and that's going to bring up a dialog box
allowing us to add in all of this select items.
Let's start by typing Africa, hit a Tab, go over to the Value, AF, hit Tab again to create a new
menu item, Asia, hit Tab. That's going to be AS, hit tab again, type Australia. That's going to be
AU. Hit tab. Europe is going to be EU.
Next one, North America, NA. Next is going to be Middle East. That's is going to be ME. Next is
going to be South America, SA. And then the last one is going to say "Show all continents," and
we're going to have that value be All.
Now let's click OK. Now in the Properties panel, let's, under Initially selected, let's scroll this all
the way down and let's select Show all continents. That way when somebody first hits the page
the show all continents item will be selected, which will make sense because all the dots will be
on the stage at the same time as well. With our form elements still selected, let's come over to the
Code view. If we have an element selected in the Design view and switch to Code
view,Dreamweaver will automatically highlight all of that information in the Code view.
First let's come in here and let's delete the label element, and then secondly, inside of the form
element here, after the action attribute, let's add a space. We are going to add a class, equals,
two quotes. Type form_continent. Then switch back to Design view. Now that we've added a
class onto this element, let's come over and create a new CSS rule. I am going to create a new
class, .form_continent. Let's choose OK.
Let's go into positioning. Let's turn on absolute positioning for this. Let's set a Top value of 265
and a Left value of 30, and we'll click Apply. So now we can see that menu drop down into place.
Let's click OK. If Dreamweaver doesn't update properly for you, you can switch between
Designand Code view a few times until the menu drops into place. Now that we have all of our
dots and menu in place, in the next movie we are going to add jQuery into our project.
Adding Javascript
Downloading jQuery and adding it to your project
Now we can add jQuery to our project by simply going to jquery.com and clicking on the button on
the right that says download jQuery, but we've also included a copy of jQuery in the exercise files
as well. So if we open up the Final Project folder, open up Includes, we see a file here called
jquery-1.5.min.js. The min stands for minified, which means all of the whites space has been
taken out of the JavaScript file to make it as small as possible. So I am going to Option+Drag a
copy from the exercise files over to our project folder, inside of the Includes directory.
Now the jQuery file is not meant to be opened. We include this into our page and then we write
another JavaScript file with all of our jQuery instructions. So let's go back over to
Dreamweaver,let's go to the File menu, choose New, and under the page type let's come
down and choose JavaScript and click Create. Right away, let's choose File > Save on the
Desktop/interactiveMap/Includes and let's name this interactive_map.js and click Save.
Now we have two JavaScript files in our project. Let's come back to the index.html file. Let's
switch to Code view, and at the top of the document, after the line that includes the CSS file, let's
hit a return. Up in the Insert panel let's come over to Common and let's come over to the Script
icon. We want to insert a script. The Type is going to be text/javascript. Under source, let's click
the little folder here, Desktop/ myInteractiveMap/Includes and we need to first bring in the jQuery
file.
Click Choose, click OK. Now we can see Dreamweaver now wrote the necessary script tag to
bring in the jQuery file. Let's hit Return. Let's come back up to Script. Let's insert our script. Click
on the folder. Let's choose interactive_ map.js, then choose, then OK. Now that we've added
jQuery to our project in our own custom JavaScript file that we are going to be writing our scripts
in, we'll start in the next movie by writing scripts to activate the dropdown menu.
Detecting when the dropdown changes
Now we are ready to write our first scripts, so let's come over to the interactive_map.js file. Let's
add a few lines in here. Let's start by using jQuery's built-in Document Ready function. Startwith a
dollar sign, beginning and ending parentheses. Inside the parentheses two single tick marks. For
a string literal we are going to type document. After the parentheses, .ready, beginning and
ending parentheses, and a semicolon. Inside of the ready parentheses we are going to type
function, beginning and ending parentheses, beginning and ending bracket, hit the cursor inside
the brackets, and let's split this open.
Now inside of this document ready area is everything that's going to happen once all of the HTML
and JavaScript have been downloaded. So this is sort of the pre-loading capability of jQuery. The
first thing we want to do is detect whether or not that form item has been changed,so we are
going to start with the dollar sign, beginning and ending the parentheses, two tick marks inside.
We are going to type the hash symbol, mapForm. This has sign tells jQuery to look for an id
named mapform.
After the parentheses we are going to type .change, beginning and ending parentheses, and then
a semicolon. Inside of the parentheses we are going to type "function," beginning and ending
parentheses, beginning and ending bracket. Now let's split that open. So now, any rules we put
inside of here are going to happen if the form has been changed, which means user has clicked
on it and made a different selection. What I am going to do is type "alert," beginning and ending
parentheses, semicolon. So if the map changes, we want to give ourselves an alert.
This way we can sort of test out to make sure the map is working properly. Inside of the alert I'll
put a few spaces, and what we are going to do is we want to have the alert tell us the name of the
item that the user selected. So we'll type dollar sign, beginning and ending parentheses, inside
two tick marks for a string literal, pound sign, mapForm. Now inside of the tick marks, so that we
are still inside of this string literal, we are going to type a space, option, colon, selected, and
outside of the parentheses, dot.val for value, beginning and ending parentheses.
So what this is going to do is give us an alert that's going to tell us the name of the map form and
the option that was actually selected only if the map is changed. Let's choose File > Save
Al. Next, let's switch to the index file. We can switch back to Design view here. Let's go to the File
menu and come down to Preview in Browser. Let's hit reload to make sure all of our style sheet
and JavaScript have been reloaded. Let's come down the continents and let's select a different
continent item.
As soon as I do that, a JavaScript pop-up window comes up and gives me the value of that
item. So we selected Europe and it gave us a value of EU. Let's select Asia. A pop-up window
comes up tells us the value is AS. And then lastly, let's come down to show all continents. It tells
us all has been selected. So now we have a jQuery statement that's looking at that form item and
it's giving us an alert telling us exactly what the user selected.
In the next movie we'll tie this into the actual dots.
Showing and hiding dots based on continents
Now that we have a script that's paying attention to whether or not the form has been changed,
now we want to change the dots based on what the user has selected. So let's hit a few
Returns. Let's type "var" for variable. Let's type "selectedContinent," space, equals, space. So
this is a variable name that we are making up, and we are going to set the value of that to this
item here that we ran in the alert. So let's come up here and copy that statement. Let's come
down here after selectedContinent = and let's just paste that in place and add a semicolon at the
end.
So now with that in place, let's just get rid of the alert altogether. So now we are declaring a new
variable called selected continent, and the value of that is going to be whatever the user has
selected. Let's add a few more lines. Let's type if, beginning and ending parentheses, beginning
and ending bracket. Split that open. Inside of the parentheses we can put a few spaces in
here. We are going to say if selectedContinent, two equal signs, two tick marks and then ALL.
So if the selected continent equals All, we're going to type a dollar sign, beginning and ending
parentheses, two tick marks for a string literal, a.dot. That's out of the parentheses, .show,
beginning and ending parentheses, semicolon, and inside of the parentheses for show we are
going to put 1,000 ms, or one second. So what this is going to do is it's basically going to say if
the selected continent value equals ALL, which means the user has selected the last item in our
menu that said Show all continents, we are going to run this function, which is basically going to
take every dot and show them, or make them visible.
On the next line after that bracket we are going to type else, beginning and ending bracket. Let's
split that bracket open. So if the user did not select all, we need to make a distinction now on
what item they selected and decide which dots to turn on and off. So let's start with the dollar
sign, beginning and ending parentheses, inside two tick marks, for string literal, a.dot. Let's put in
two square brackets, beginning and ending.
Inside of the brackets we are going to type "continent*equals" and then two full quotes, and let's
put a letter x in there for the moment. So these square brackets here allow us to ask about
specific attributes on these anchor tags. Outside of the parentheses we are going to type ".show"
beginning and ending parenthesis, thousand ticks, and then a semicolon at the end.
So now the asterisk equals means that these characters are contained inside of this continents
attribute value. So what we are going to do is replace this X with this variable name. so let's come
up here and select selectedContinent. Let's copy that to the clipboard. Let's come down here for
the letter X. Let's delete that. Let's put two single tick marks, and inside of the single tick marks
let's put two plus signs. In between the plus signs we'll paste the selected continent name.
So what we are doing here is work concatenating the string literal of the element we are
selecting, the a.dot, checking to see if the continent contains whatever the value is of the item in
the mapform once it's been changed. At this point, let's select the entire line. Let's copy that.Let's
paste it again. On the second line let's change the asterisk to an exclamation point, which
means does not equal, and let's change show to hide.
Let's choose File > Save All. Now, let's switch back over to our web browser. I left that file still
open. If you close that window, you can go back to the main index.html file and choose Preview in
Browser. So over here in the browser I am going to hit reload, now come up here and change the
continent. I am going to select Europe, and notice all the dots that are not on Europe goaway and
Europe stays. Here is Australia, Asia, and then Show all continents will bring all of the dots
back. So now we have a dynamic relationship between the menu and all of the different dots.
In the next movie we are going to start creating our container elements for the right-hand side, so
we can bring in city details.
Creating the City Detail Containers
Adding the detail containers
Now we need to create the CSS and the divs that's going to hold the city_detail confirmation. So
let's switch back over to index.html, and inside of our CSS panel, let's come over here and create
a new rule. I am going to create a new class, and the first class is going to be called
.detail_container. Let's choose OK. Let's come down to Positioning. The first thing we are going
to set here is the Position is absolute. We are going to set a Top value of 35 and a Left of 480.
We are also going to set a Width of 240 pixels and a Height of 260. Let's choose OK. Let's click
inside of the map container to make sure that our insertion point is inside of div map
container.Let's come up to our Insert panel. Let's come over to Layout > insert a div. Let's come
down and choose detail_container and click OK.
Now we'll see that div pop over into place. Now we can see our white photography there as well,
which is the color we wanted. Now let's come over to our CSS. Let's create a new rule, new
Class, .city_detail. Let's click OK. Let's go to Positioning. This will also be set to absolute
positioning. We are going to set a Top of 0. We want to set a Width of 230 pixels.
Let's switch over to Box properties. For Padding, let's uncheck Same for all. Next, let's go to the
Border settings. Let's uncheck Same for all for Style, Width, and Color. On Border Left, we are
going to set solid one pixel, and for the color we are going to type # A9B5C8, hit Tab.
That will give us that light cobalt blue color. Now for the Top, we are going to set the same
properties, solid, one pixel. Let's come down here and copy that same color, paste it up in the first
one. Once we are done, we are going to click. Let's get our cursor inside of the detail_container
div, and we can make sure down here in the documentary, we can see that we are inside of
detail_container. Let's choose Insert a div, city_detail, click OK.
Once that's in place, let's come in here and delete the default text that we got from the first div for
detail_container, hit Delete. Let's create one more rule. This one is going to be a rule to help our
float settings. We are going to type .clear_both, click OK. What we are going to set inside up
here, under Box properties, let's come over to Clear and set both and then choose OK.
Now we have the containers for the .city_details and in the next movie we'll start create the HTML
markup that goes inside of these containers.
Adding structure for the city details
Now we are going to create the CSS rules for the information that goes inside of this
.city_detail. So let's come over to our CSS panel. Let's create a new rule. New class. This one is
going to be called city photo, .city_photo. Let's click OK. Next, let's go down to the Box settings.
Under Float, let's set a float-left. Under Margin, uncheck Same for all. We are going to set 0 on
the Top, 15 on the Right, 0 on the Bottom, 0 on the Left.
Let's come over to our Border settings. For Same for all, we are going to click solid, 1 pixel,
choose white, click OK. Let's create one more CSS rule, Class, .city_info. Underscore info. Let's
click OK. Box property is here. We are going to set a Width of 130 pixels, and we are going to set
a float-left on this as well.
Then we are going to say OK. I am going to get my cursor inside of this .city_detail div. Let's
delete some of this default text first. I'll leave one letter there, just to make sure my cursor can still
be inside of this area. From the Insert menu, let's switch over to the Common group. Let's come
over to Image. Let's click to insert an Image. From the Desktop, myInteractiveMap/images/ cities,
and let's just pick the first one. Click Choose. We're going to skip the Alternate text for now. Click
OK.
Now with this item selected, down in the Properties panel, let's come down to the Class settings
and let's assign city_photo as the class. Let's deselect that. Make sure my cursor is inside of
city_detail. Let's come up to the Layout items inside of the Insert panel. Let's come over to Insert
a Div. We are going to insert city_info and click OK. Now if your cursor was not after the image
tag here, we can simply grab this and drag the image so that it's in front of the city_info. Then
also, let's get rid of that last letter that we had inside of the area.
Now we do need to add one more piece of code into here, but we need to do this inside of Code
view. So let's come over to Code. Now inside of this city_detail, we have our image and our
city_info. I am going to just format this a little bit. Now what we want to do is add that clear_both
div after both of these items, since city_info and city_photo classes are floating. So let's get our
cursor after the city_info div. Let's hit a Return. Let's type div, space, type cl for class.
Dreamweaver's code hinting work again.
I can hit Return, and then I can even use Dreamweaver's code hinting to pick the actual class we
want to assign. So I am going to come down here and select clear_both, end the tag, hit a
forward slash, and end the rest of the div tag. So now what this is going to do is this is going to
force the height of city_detail to be as tall as the city_photo class and the city_info class, andthis
will ensure that the border that we put around on city_detail will be as tall as all the items inside.
Since they are floating, the outermost container will not pay attention to the overall height, unless
we have an element in here with a clear_both set to it. Let's come to the Design view, and now
that we have these city_detail divs in place, in the next movie we'll start by adding some content
into here and create some CSS styling for those.
Styling the city detail content
Inside the city_info div, let's come in here and delete that default text, and let's start by typing
City. We'll hit a Return, type Country, hit Return. Description goes here. Now let's select City. In
the Properties panel let's come down under Format and let's choose Heading 2. For Country let's
select Country and come down to Format and choose Heading 3. And then for Description goes
here...let's just make sure that's set to a Paragraph setting.
With that in place, let's come over to the CSS Styles panel. Let's create a new rule. I'll move this
over a little bit. We are going to create a compound rule. We are going to type .city_info h2. We
want to target h2 tags only if they are inside of the city_info div. Let's click OK. Move this over.For
Font-size, we want to choose 18 pixels. Let's come over to Box properties.
For Margin we are going to put 0 for all. Let's click Apply. Now we'll see city actually goes away
up to the top of that container, since there's no margin across the top. Let's click OK. Let's create
another new rule, Compound, city_info h3. Let's click OK. These are going to have a Font-size of
12. We are going to transform the text to be all uppercase.
Next, for Color, let's type #2C3748. This is going to give us that really dark cobalt blue
color.Lastly, let's go over to the Block settings. For Letter-spacing we are going to type 4
pixels. Click Apply. We'll see the Country text to be transformed to all uppercase, 12 pixels,
letters are spaced out 4 pixels.
Lastly, let's go to Box properties. For Margin, let's turn off Same for all. For the Top and the Right
we are going to choose 0. For the bottom we are going to put 12 pixels and then 0 on the Left.
Click Apply. That will make the h3 tuck up right underneath the h2. Let's click OK. One more rule.
Compound, city_info p. All we are going to set in here under the Box properties for Margin, turn
off Same for all, Top and Right, 0, 12 on the Bottom, 0 on the Left. Click OK.
Now that we have all of the city information styled in the next movie we'll add specific city
information into the HTML code that corresponds to each of the dots on the map.
Adding the content for the cities
Before we add additional city_detail information into the HTML of our file, I want to go through
and isolate all of our CSS rules. So let's come over to the interactive_map.css file. A lot of times
when you are going to create an interactive component that goes into somebody else's web site,
you want to isolate all of your CSS rules, which means we want to have every rule start with the
name of our outermost container. So in here I am going to select .map_container at the very top
of the CSS rule, copy this to the clipboard, and inside of this CSS I want to paste.map_container
and space before each one of the different rules.
This means that these rules will only take effect if they're inside of our .map_container. One
before .form_continent. I am going to add this before each one of the different classes. Basically
this is turning every one of these rules into a compound CSS rule.
Now that we have .map_container in front of each one of these items, let's come back to the
index.html file. Let's click on the photo and let's switch over to Code view. Now inside of Code
view all of the city detail information that we just dialed they are showing up here inside of the
city_detail, so we have our img and our class, our h2, h3, and paragraph tag. Every time we click
on one of the dots we are going to want to take all of this HTML and change it, based on the
individual dots that we've selected.
So in order to do that, we are going to need to bring in city_detail information. So let's go to the
File menu. Let's choose Open. From the Desktop, exercise files. Let's go into Code Snippets, and
let's grab the file city_details.html and click Open. So what I have done here is set up a whole
bunch of divs that have all of the city information for all of the dots on the map. These follow
exactly the same code structure that we were just looking at. There is one difference here. Inside
of each one of these items I have added an id to each one of the city_detail divs, and I've set the
id name to match the city attribute we set inside of each anchor tag.
So each anchor tag says city=sydney or city=london. I am setting the id of this item to match that
same name. I've also put all of these inside of a parent div called city_detail_container. So at this
point, let's choose Command+A, or Ctrl+A, to select all of the content. Let's come down here to
Edit and choose Copy. Let's go back to our HTML. After the ending div for the .map_ container,
before the body tag, let's hit Command+V, or Ctrl+V, to paste all of that content, in and then let's
switch back out to Design view.
Now in Design view we can see all of the photos, all of the h2, h3s, and paragraphs tags for the
descriptions, and notice that all of the Float properties and the Styling properties are now taking
effect. Since we isolated the CSS rules to only be affected up there inside of this area, inside of
.map_container, all of this content will flow out here. So we can actually come in here and use
Dreamweaver's WYSIWYG environment to come in here and make text changes. Now when
somebody comes to this page, I don't want them to see all of this content.
So let's come over to our CSS Rules. Let's create a new CSS rule. I am going to create a new
class called city_detail_container. Let's choose OK. Let's come out to the Block properties. Under
Display, let's set none and choose OK. That's going to hide all of that initial content when
somebody first visits the page. However, JavaScript will still see that since it's only hidden for
through and will be able to access those city details based on the dot we've clicked.
Now that we have all of the content in the page, in the next movie we'll go back into our
JavaScript and pull out that HTML and set it based on the dots that the user clicks.
Changing the Dots and Detail Information
Changing the state of the clicked dot
Now we have the JavaScript in place that's paying attention to the form element and making sure
that when it changes we show and hide the different dots. Now we want to add a script that's
going to pay attention to the dots and check to see if the user clicked on them. So let's come back
to the interactive_map.js file. Now inside of here I am going to clean up the formatting here a little
bit, get rid of some of the whitespace, get rid of some of these extra lines.I am doing this because
I need to make sure that I add the click events for the anchor tags inside of the document ready
but outside of the mapForm.
So let's hit a few returns. So again I am outside of the mapForm but inside of the
('document').ready. Let's start by typing $('a.dot') as a string literal, so for every time there is an
anchor tag with a dot class, outside of the parentheses we are going to type .click();. Inside of the
click we are going to type function(), beginning and ending bracket.
Let's split that open. So every time somebody clicks on that dot, we want to do these
instructions. So first let's type an alert, just to make sure this is working properly. Inside the
parentheses, inside of alert, let's type $(). I am going to type the word "this." So since we are
assigning a click to everyone of the anchor tags with a dot class, by returning "this," this is going
to let us know the exact dot that was actually clicked on.
So regardless of how many dots are on the map, when we type "this," it's going to return
whatever one actually triggers this click event. So after the "this," we are going to type
.attr().Inside of attr, for attribute, two tick marks for a string literal. We are going to type "city,"
which is the name of the attribute we put inside of every one of the anchor tags. Let's choose File
> Save All.
I still have the file running in my browser, so let's go over to our browser. Let's hit Reload. Now if I
click on the dot, it should give me a pop-up window that tells me that dot I clicked on. So there is
New York city. There is Rome. There is Tokyo. So the click events are working. Let's go back to
our JavaScript. So the first thing I want to do when somebody clicks on that dot is I want to
change the color. So let's start by $('a.dot').
What we are going to do is set .removeClass('selected');. This is the name of that CSS class we
created that takes the PNG file in the background and moves it -40 pixels on the Y, turning the
selection green. We are going to go through first and make sure that none of the dots have that
class assigned.
Next line $(this).addClass('selected');. Lastly, let's delete the alert. So now what's going to
happen is every time somebody clicks on an anchor link, every one of the dots is going to have
the class of selected removed, and then we are going to add "selected" to whatever dot was
actually clicked.
Let's choose File > Save All. Let's go back to our browser. Let's hit Reload. Now if I click on the
dot, whatever dot I click gets the selected class applied to it, and it turns green. And when I click
another dot, whatever dot was green gets reset because we are taking that class off of all of the
dots and then assigning it to the one we clicked on. So this gives us gives us direct user feedback
based on the dot they clicked, in addition to the map function automatically changing the state of
the dots and changing itself, which is built into the HTML forms.
In the next movie, we are going to go grab the HTML content and add it into the city detail area.
Updating the detail content
Now that the dots are behaving the way we want, let's come into the click function. Let's add a
few more lines. Now what we want to do is go grab the HTML from the detail area and populate
itinto the .map_container. So we are going to start by creating a variable, var city. This is a
variable name we are making up. We are going city =, two tick marks for a string literal. Inside of
the string literal we are going to type '.city_detail#'.
Outside of the string literal we are going to type + $(this).attr('city');. So what this is going to do is
this is going to set up a variable called city that's going to equal city_detail with a pound sign and
then the attribute of the city of the item we clicked on.
If you remember, this attribute here, city, was what we first set the alert to. So if we clicked on
London, this value is going to be .city_detail# London. Next line, new variable, htmlCode =
$(city).html();. So this .html is jQuery's way of grabbing all of the HTML out of this object,
andagain this object is being defined up here in this variable as being the city_detail plus the id of
the individual city that was clicked on.
Now that we have all of that HTML data stored in the htmlCode variable we just created, let's add
a few more lines. Let's type $('.detail_container').fadeOut( 500,
function($('.detail_container.city_detail').html(); and let's come up here on line 20 and let's copy
the htmlCode variable name and let's paste it inside of the parentheses for HTML.
And then one more line: $('.detail_container').fadeIn(500);. So basically what's going to happen
here is we are going to take the main detail_container, we are going to fade it out over half a
second, and then once it's faded out, we are going to run this function, and this function won't
happen until after this is faded out.
So once it's faded out and we can't see it, we are going to take all of the city_detail htmlCode and
switch it for all of the code that we've defined here based on the dot that the user clicked on. And
then once all the code has been changed, we are going to take the detail_container and then
fade it back up. So clicking a dot is going to fade it out, switch to code, and then fade it back
up.Let's go test this. Let's choose File > Save All. So I still have this running in a browser, so let's
switch over to our browser. Let's hit Reload. Let's come through and click on a few cities.
Every time I click a city, the detail information fades down, the HTML content switches, and then
the detail area fades back up again. So this is working exactly as expected. Now in the next
movie, we'll add some final CSS3 tweaks to make some of the divs behave a little bit more like
the styling we have of the map that we created in Photoshop.
Adding the Finishing Design Touches
Adding the final design details
Now I want to make some design adjustments to the project, and this is going to require some
CSS3. I want to add some rounded corners and a drop shadow onto the city photography, and I
want to add some rounded corners on the city_detail_container as well. So let's move up to the
interactive_ map.css file, and I want to scroll down until we see city_detail. Now inside of the
city_detail CSS rule, let's get our cursor down here. After the last attribute, I am going to hit a
Return and start typing border-radius. If you are using Dreamweaver CS5 or CS5.5, there is builtin support for CSS3 in Code view for editing CSS.
So when I start border-radius, I can see this code hinting come up and allowed me to hit Return
to select border-radius. If you are using an earlier version than CS5, you can simply type "borderradius: 10px;." Now CSS3 is not a finished specification yet, so we do need to add anadditional
attribute for the Mozilla rendering engine, which powers Firefox and the WebKit rendering engine
which powers Live view inside of Dreamweaver, Safari, and Chrome.
So now I'll hit Return. I'll start typing "-moz" for the Mozilla rendering engine and hit Return.
Start typing border-radius: 10px;. Next line, start typing -webkit-border-radius: 10px. Now to test
this, let's choose File > Save. We are going to switch over to our web browser and hit Reload.
Now I can see the rounded corners showing up here. Let's go back to Dreamweaver. Now let's
scroll down to the .city_photo. Now in .city_photo I mentioned we want to add rounded corners
and a drop shadow. So after the last attribute, let's hit Return, start typing border-radius. This is
going to be 8 pixels, hit a Return, -moz-border-radius: 8px;, hit a Return, -webkit-border-radius:
8px.
Next, we are going to add a drop shadow. That's actually specified as box-shadow. Hit a
space.We are going to use the shorthand method here, which means we are going to have each
of the attributes with individual spaces, so let's start with 0px. This is the X position, or the
horizontal offset. So by setting 0 that's going to keep it right in the middle. Hit a Space.
We are going to put 5 pixels on the Y, which means this is going to move this vertically down.This
is going to us a 90-degree drop shadow straight down with no horizontal offset. Hit a Space, 3
pixels is going to be the amount of blurring. Hit a space and the color, #4e5d74;.That's going to
give us a dark cobalt color. I am going to select this whole line, copy to the clipboard, paste it,
move my cursor to the beginning.
I am going to add -moz. Next line, I am going to paste it one more time, and before this I am
going to add -webkit. Let's come to the File menu, choose Save. Let's go out through our browser
again and check this. Now, the last thing I want to do is set it up so that the initial load of this will
not have a city photograph in there, and I want to stretch out the text field here a little bit so we
can put some instructions in there. So let's go back over to Dreamweaver.
Let's go back to the index.html file. I am going to click on the photograph and then come over to
Code view. Dreamweaver will automatically highlight this in the HTML view. So with the image
selected, I am simply going to hit Delete. We want to get rid of that. Let's get rid of the h2 tag as
well, so we'll just leave the h3 tag. We are going to change the word "country" to "choose a city"
and then lastly, we are going to need a little bit more room for this to work.
And so on the city_info class only on the initial state, I want to override this, so that it's a little bit
wider, since we don't have that photograph there. So we are going to put a style attribute on here
and override this one particular div's width. So let's hit a Space, Style="width:200px;". Let's switch
back to Design view. So now we have a wider area here to put some initial instructions.
Let's choose File > Save All. Let's go back to our browser. Let's this Reload. So this is the initial
state with the div in there, with the city_info having an element override on the style. So now in
the initial load that text is much wider, but now when the new city_detail loads, the new city_info
that's getting replaced does not have that style attribute on there, so the regular style sheet picks
up. So at this point, our project is complete. In the next movie, we will talk about some additional
features you might want to add to this project to take it even further.
Where to go from here
Now, in this project all of the information for the city_details is contained inside of HTML, and it's
inside of this document and hidden with CSS. Now one of the things you might want to start to
expand on is, on the jQuery site, looking at using things like Ajax or load. This way you can
actually take content from an external source, maybe an outside HTML file or a database, and
pull data in. On the jQuery's site, you want to go to Documentation and down to the Ajax
linkunder the API Reference. And in here one of the quickest ways you can load external content
in is to use the load command.
If you already worked with databases and any kind of asynchronous connection, you might want
to come up and start looking at some of the Ajax capabilities built into jQuery. To add some
additional special effects when you actually change the city_detail, you can look at two other
courses that I have up on lynda.com. On is the photo gallery and this works similar to the map in
that when I click these individual photographs we actually load and change data on the right-hand
side. You can see down here the caption actually scrolls up, changes, and then scrolls back
down, and there is also a homepage marquee where when we change between different states,
we actually move different elements, and we use to animate commands inside of jQuery to
change larger areas of the screen.
So these are two additional user experiences that you can hook into the interactive map and start
combining some of these interactive experiences in your future projects. Well, I hope you found
this course helpful, and I really appreciate you watching.