Join Chris Converse for an in-depth discussion in this video Adding custom attributes into HTML, part of Creating an Interactive Map with jQuery and Dreamweaver.
Now that we have the three different states for the dots defined in the CSS,…let's come back to the CSS panel and let's open up the rule a.dot.…Now in here let's come down to positioning.…Let's set the position to absolute.…Let's set the Top placement to 20 and the Left placement to 20.…Now when we come down here and click Apply, we'll see in the background now, that…dot is now positioning itself 20 pixels from the top and 20 pixels from the…left-hand side. Now let's click OK.…Now all of the position properties are being set inside of the CSS file.…
What this means is that when we add additional dots onto map, every one of…those dots is going to have the same top and left setting.…So what we are going to do is come up to the interactive_map.css file.…Let's scroll down until we see the a.dot class, and let's come down here and…select left and top, and let's cut these to the clipboard.…So we are going to leave the value of position absolute, along with all of the…other settings for the anchor tag with the dot class,…
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