Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
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
Skill Level Intermediate
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.