Join Chris Converse for an in-depth discussion in this video Updating the detail content, part of Create an Interactive Map with jQuery and Dreamweaver.
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 it…into 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, and…again this object is being defined up here in this variable as being the…
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