Join Chris Converse for an in-depth discussion in this video Manipulating anchor links with CSS, part of Creating an Interactive Map with jQuery.
Now we're going to create the CSS necessary to take these anchor tags with the…dot class and turn these into blocks that have the background graphic inside.…So let's go over to map.css. After the map_container rule, let's hit a few…returns, and let's start by typing map_container a.dot.…So in this course we're going to be referencing all of our CSS by declaring the…very first map container.…This is going to isolate all of our CSS rules and make every one of our rules a…compound rule, which means all of the CSS rules are only going to pertain to…anything inside of the map container.…
This is a really good practice, especially if you want to take this interactive…piece and move it into somebody else's website where they might be using some…of the same CSS rules.…So after map_container a.dot, beginning and ending bracket, let's…split that open, let's start by creating our first attribute, which is going to…be background and we'll start by typing URL.…I'm going to come out to the images directory inside of template, dots.png.…
Take a look at the finished web site here.
- Preparing web graphics
- Creating the main 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