MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Create an Interactive Map with jQuery and Dreamweaver

Course Summary

Design and create a rich interactive map for a web site using the open-source scripting library jQuery and the tools in Dreamweaver.       

  • +

    Course Syllabus

       Previewing the project across browsers and devices
       Using the exercise files
    1. Preparing Web Graphics
       Slicing and optimizing web graphics
    2. Creating the Base Container and Layout with CSS
       Creating and linking HTML and CSS files
       Creating the main container
    3. Adding the Navigation Elements
       Manipulating anchor links with CSS
       Creating the dot states
       Adding custom attributes into HTML
       Positioning the dots on the map
       Adding a dropdown navigation menu
    4. Adding JavaScript
       Downloading jQuery and adding it to your project
       Detecting when the dropdown changes
       Showing and hiding dots based on continents
    5. Creating the City Detail Containers
       Adding the detail containers
       Adding structure for the city details
       Styling the city detail content
       Adding the content for the cities
    6. Changing the Dots and Detail Information
       Changing the state of the clicked dot
       Updating the detail content
    7. Adding the Finishing Design Touches
       Adding the final design details
       Where to go from here


Course Fee:
USD 25

Course Type:


Course Status:



2 - 3 hours / week

This course is listed under Development & Implementations Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top