Join Chris Converse for an in-depth discussion in this video Positioning the dots on the map, part of Create an Interactive Map with jQuery and Dreamweaver.
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 HTML-compliant.
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.
Take a look at the finished web site here.
- 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