Star wars return of the jedi alamy stock photo

#Star wars return of the jedi alamy stock photo how to#

Let's add some basic styles to our ul element.Д«ackground: url(images/map-color.png) no-repeat 0 0 What we have here is a simple unordered list containing our 6 continents and links to their information on. Fire up your text-editor of choice and create a new html document with the following markup in it: What we're going to do is create an unordered list and use our map-color.png as its background-image. map-color.pngДЄpparently Wikipedia didn't want to include Antarctica in the continents map so we'll be working with 6 instead of 7! Oh well, the important lesson here is CSS image maps, not geography.

In our CSS image map, we're only going to use one image. In the table based image map, I used Photoshop to slice my continents map into 17 different images to be used for my 6 hotspots, or clickable links. Today, image maps created in CSS are not only a much leaner and cleaner markup, but they're also easily editable and are often used for displaying additional content when hovered, not just as a means of navigation. During this time, these hotspots were used mostly for navigational purposes.

They were used to define clickable areas, or 'hotspots', within several sliced images (coming together to form one image). In the days of table based web design, using image maps in your web layouts were quite common.

#Star wars return of the jedi alamy stock photo how to#

We're not only going to get you up to speed on how to create a CSS image map, but, we're also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a 'tooltip' like popup.