Create an Interactive Map with jQuery and Dreamweaver

with Chris Converse
please wait ...
Create an Interactive Map with jQuery and Dreamweaver
Video duration: 0s 1h 12m Intermediate Updated Aug 31, 2011

Viewers:

In Create an Interactive Map with jQuery and Dreamweaver, Chris Converse shows how to design and create a rich interactive map for a web site using the open-source scripting library jQuery and the tools in Dreamweaver. The course covers creating web-optimized images using the slicing tools in Photoshop, implementing the HTML and CSS to assemble an infographic page layout, and adding interactivity with JavaScript and jQuery's fast and concise code library. Exercise files are included with the course.

Take a look at the finished web site here.

Topics include:
  • 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
Subject:
Web
Software:
Dreamweaver jQuery
Author:

Previewing the project across browsers and devices

Hi! This is Chris Converse, and this is a course on creating in interactive map for your web site. I want to start by showing the final project inside of the exercise files that you can download as part of the course. So inside of the Final Project folder I am going to open up the html file. So what we are going to be creating is this interactive map. We are going to have a dropdown menu in the lower left-hand area. Selecting different items in the dropdown menu will change the dots that are plotted across the map. So if I come over here and select Europe, for example, any dot that is not on Europe will fade away and only the dots that are assigned to Europe will show up.

In addition, if we come over to the dots and click on them, we are going to fade the city detail information over on the right. We are going to fade it down, change the content, and then fade it back up. All of this content is going to be in this web page, hidden through CSS, and as I go to the different dots, we can fade that information, change it, and bring it back up. Now to create this user experience we are going to be using HTML, CSS, and JavaScript. We are also going to be hooking jQuery into our project to give us the ability to create a dynamic relationship between the dropdown menu and the dots, and the dots and their city detail information.

Now one of the advantages of a framework like jQuery is that the code that we develop for one platform will work across the other platform and devices as well. So here we are looking at the exact same user experience over in Windows 7 on IE 9, and I can come in here and click on the individual dots, change the form menu, and get exactly the same user experience we were just looking at over on the Mac platform in Safari. Now in addition to computer screens, we can also take a look at this across mobile devices. So I want to bring up an Android simulator here showing us the handheld device.

I can come in here and tap the individual dots on an Android phone and see the same exact user experience or even come in to a Tablet simulator and take a look at the same user experience running on an iPad simulator as well. I can hit Command+Right Arrow to rotate this, hold the option to pinch up, tap and move around, tap on the individual dots and see the content change here as well. So I hope this sound interesting to you and if so, let's get started with the first movie.

There are currently no FAQs about Create an Interactive Map with jQuery and Dreamweaver.

please wait ...