Viewers: in countries Watching now:
Take a look at the finished web site here.
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.
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.
There are currently no FAQs about Create an Interactive Map with jQuery and Dreamweaver.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.