Join Chris Converse for an in-depth discussion in this video Positioning the dots on the map, part of Creating an Interactive Map with jQuery.
Now in order to position these anchor tags across the map we're going to need to…modify the CSS rule.…So let's get back to map.css, let's go into the a.dot class, let's hit Return,…and let's add position: absolute.…Let's hit Save. Let's come back to index.html.…Now the other CSS we're to be adding is going to be on these elements…themselves, so we're going to be using a technique called inline styling.…So inside of the anchor tag outside of the class attribute let's hit a space,…let's type style="" and what we're going to do in here is type top:71px; left:236px;.…
So what we're doing here is we're adding CSS on the object itself.…We need to do this because the class of dot globally has to have…an absolute position set.…In addition to the background graphics and the other properties; however, the…absolute position values have to be set on a dot-by-dot basis, so we're going to…add the top and left attributes on the elements themselves.…And since we're adding attributes inside of this tag, we're going to add two…
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