Creating an Image Map what? An image map adds one or more hyperlinked areas (or hotspots) to a single image. why? You have a group photo as an exhibit.

Slides:



Advertisements
Similar presentations
1 FrontPage 2000 Online Tutorial The following tutorial aims to help you get started with FrontPage 2000 for the creation of basic web pages. The different.
Advertisements

Interaction Design: Visio
DREAMWEAVER Welcome to our website!
Learning the Basics – Lesson 1
An Introduction to Using
Creating Dynamic Communities. Objectives that will be covered: 1.Creating your communityCreating your community 2.Styling your communityStyling your community.
Click to edit Master title style How to Create a Discussion Silver & VIP members
Customizing the MOSS 2007 Search Results November 2007 Rafael Perez.
Chapter 5 Creating an Image Map
OpenCMS and the MSASS Website. A Note on Terminology Locking a file for editing: No lockNOT locked You have write/edit access Someone else has write.
Newsletter Plugin The newsletter plugin allows you to create and send newsletters to a managed list or multiple lists of users. Your users can subscribe.
How to post to Wordpress Chruton Budd. Click on the Login link.
Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.
Images By Tara Frieszell By Tara Frieszell. Adding images to your website will make it more interesting and add to the design. However, some viewers aren’t.
FIRST COURSE Creating Web Pages with Microsoft Office 2007.
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
INSTRUCTIONAL SUPPORT SERVICES (ISS) SHORT COURSE, FALL 2012 UMSL Introduction to Web Page Design.
Working with SharePoint Document Libraries. What are document libraries? Document libraries are collections of files that you can share with team members.
Review of last session The Weebly Dashboard The Weebly Dashboard Controls your account and your sites Controls your account and your sites From here you.
Google Earth How to create a Google Earth Tour and place it in your Wiki.
Creating a Web Page HTML, FrontPage, Word, Composer.
Website Tutorial. Administration  Log on by clicking Login on the footer of almost any page  Your Username is.
Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
KJOlinski.com - RapidHMI INTRODUCING RapidHMI AND PLCExplorer.
Web Technologies Website Development Trade & Industrial Education
Tutorial 1: Getting Started with Adobe Dreamweaver CS4.
Create an Image Map Web Publishing & Design. Hot Spots  hot spot: An area on an object containing a hyperlink. An entire object can be a single hot spot,
Adding Content to the Agency Web Site - Part 2. Adding individual web pages for success stories Agency Web Site Adding Content 2, Slide 2Copyright © 2004,
A Power Point Presentation For... A Power Point Presentation ( click to advance slides )
Website Development with Dreamweaver
HTML presentation Embedding Graphics in Web Pages n HTML uses an empty tag called the (image tag) n n n or n n n Note: all web production tools do insert.
HTML, Third Edition--Illustrated Brief 1 HTML, Third Edition Illustrated Brief Unit D Adding Graphics and Multimedia.
WEBiT Adding a new page. 1. View a page like the one you wish to create a. Navigate to a page with a similar layout to the new page you wish to create.
Chapter 10 Fireworks: Part II The Web Warrior Guide to Web Design Technologies.
Sharepoint Getting started. Please log on to the Adult and Family Education website: adulted.d11.org Then go to AFE Teaching Staff and click on Valerie.
Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating Documents.
Creating and Publishing Your own web site PC Version SEAS 001 Professor Ahmadi.
Creating Links – Lesson 31 Creating Links Lesson 3.
Slide 1 of 24 1) Launch Fireworks 2) Under File, choose New 3) In the New Document dialog box, enter Width: 100, Height 160, Resolution 72, and choose.
AUTO-BUSINESS HOW DO WE USE HYPERLINKS?. Edit an image that represents a hyperlink If a picture, AutoShape, or other graphic is used to represent a hyperlink,
Office 2003 Advanced Concepts and Techniques M i c r o s o f t Access Project 5 Enhancing Forms with OLE Fields, Hyperlinks, and Subforms.
1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.
HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.
A STUDENT’S GUIDE TO ADDING IMAGES TO NEW OR EXISTING BLOG POSTS Adding Images to Your Blog Post Presented by Michelle Krummel.
Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki.
Teacher Web Page Creation Eileen Musselman. Log on to Muhlenberg’s Intranet Click Submit button.
Slide 1 (of 16) 1) Launch Dreamweaver 8. 2)Under Site, choose New Site. Stanford Continuing Studies CS 22 · Enhanced Web Site Design Week Two DREAMWEAVER.
January 2006Colby College ITS Setting Up Course Pages.
Double –Click on the Netscape Icon on your desktop The following are a series of steps to help you get started with Netscape Composer.
WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Variables, Functions and Events (NON-Audio version) © Dr. David C. Gibbs WDMD.
1. Chapter 8 Inserting Elements and Navigating in a Document.
1 Mapping Coordinates Find the x- and y- coordinates for the images, relative to the x-axis and y-axis In a coordinate pair, the first number is the x-coordinate.
Summary Slide Printing Handouts Animations Slide Transitions Animate text Hyperlinks Action Buttons Adding sound to your PowerPoint presentationAdding.
Microsoft PowerPoint Prepared by the Academic Faculty Members of IT.
Page 1 of 15 1) Launch Dreamweaver. 2)Under Site, choose Manage Sites Click New, then Site. Continuing Studies CS 22 ·Stanford University EXERCISE 3: IMAGEMAPS.
Chapter 29. Copyright 2003, Paradigm Publishing Inc. CHAPTER 29 BACKNEXTEND 29-2 LINKS TO OBJECTIVES Attach an XML Schema Attach an XML Schema Load XML.
Creating Web Pages with Links, Images, and Embedded Style Sheets
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
XP New Perspectives on Creating Web Pages With Word Tutorial 1 1 Creating Web Pages With Word Tutorial 1.
Instructional Design Center Embedding Google Documents in Blackboard.
Weebly is Your Friend. * To Enhance And Promote Your Curriculum * To Provide A Student Resource * Add Efficiency to Your Planning * Informational * Promote.
Creating Links – Lesson 3
Continuing Studies CS22 • Stanford University
USING DREAMWEAVER Contents: Assigning a Root Folder
Tutorial Tutorial Read all the directions before proceeding
USING DREAMWEAVER MX 2004 Contents: Assigning a Root Folder
Introduction to the ISB Intranet
Project 4 Creating an Image Map.
Presentation transcript:

creating an Image Map what? An image map adds one or more hyperlinked areas (or hotspots) to a single image. why? You have a group photo as an exhibit in TMG, you are building a web site, and would like the users to be able to identify the people by running their mouse over each person and by clicking on the individual be taken to their entry. Navigation: Page Down to advance Page up to return

creating an Image Map

what you need  TMG  Images  TMG Utility  where to get it  Navigation: Page Down to advance Page up to return

in TMG  Attach Exhibit make some notes about the image  you will need each person’s TMG id#  if the group is large and you want to attach the image to everybody you may want to consider using a custom photo tag with everyone added as a witness, the History tag or a custom tag in the history group * might be a good choice.  this method will be described first, the subsequent method will describe applying an image map to an image attached to multiple individuals. close TMG  TMG & TMG Utility may not run simultaneously *History group tags have only witnesses

in TMG Utility  Open the dataset  Under Exhibits select Edit Image Map  Click the Edit Exhibit Image Map button  Choose the Image

TMG Utility continued The image opens in TMG Utility  Drag a rectangle around a person or area  Click Edit Properties  Enter information in the Area Properties dialog box HREF: the person’s TMG id# in the form p#nnn Title: the person’s name (or other text) Alt: the person’s name (or other text)* Click OK * Technically the ALT attribute is required, and is designed to be an alternative text description for images. ALT text displays before the image is loaded (if it's loaded at all) and is displayed instead of the image in text-based browsers. The TITLE attribute is optional. In a standards compliant web browser, like Firefox, the ALT text does NOT display unless the link to the image is broken, where Internet Explorer(6) will display the ALT text if the TITLE attribute is not present, therefore you should enter something in both attributes. Information in the ALT attribute is also an accessibility enhancement for vision impaired users.

TMG Utility continued Repeat the process of drawing a rectangle around each person, and completing the Area Properties for each When finished click File, then Save Image Map & Close  If Log only mode is enabled you will be prompted to save changes to image map *In this example the image was attached to a custom Group Photo tag created in the history group the reason will be evident after seeing the next example.

TMG Utility continued In this example an image is attached to 3 people (#63, #127, & #129) Create the image map as previously described (note the id# of the person you are creating image map for [#63] in this example.) Before Saving & Closing  Click File then Show HTML  A TMG Utility dialog box will open Click Copy Text to Clipboard  then click Save & Close Close TMG Utility & Open TMG

in TMG Navigate to one of the other people who have the image attached (#127 or #129 in this example.)  Activate the Exhibit Log  Select the image  Right click and select Properties  Click the Description tab  Position the insertion point in the Description field, right click, and select paste, placing the HTML for the image map in the description field.  Click OK Navigate to the next person and repeat the process.

Conclusion As you may have noticed had I attached the first group photo as an exhibit to each individual I would have had to open the exhibit log for each person, and paste the image map into the description field 9 times. (TMG Utility did the first one.) A tedious and error prone process to say the least.  Please see the addendum for an easier but slightly more advanced method.

Conclusion Map is a standard HTML Tag  Image maps may be used in any image.  Image maps may be built manually.  Other software is available to build image maps.  TMG Utility can be used to build image maps for use outside TMG and Second Site. Any HTML where an image is used (the other button ~ Edit Image Map.)  Image map areas may be other shapes, circles, and polygons, for example, but TMG Utility only supports rectangular areas. Second Site recognizes p#nnn in the HREF attribute of the image map and constructs the links accordingly.

addendum:  Another method Found on Secondsite-L “If you want the image to stay attached via person exhibits, here's a trick... Attach the image to all the people as you have done. Don't bother creating any image maps yet. Set the Alternate Image Folder option to a folder on your PC. You may want to create a special folder for this if you haven't already. Copy the image file to the Alternate Image Folder. In TMG Utility, use the [Edit Image Map] button. NOTE THAT YOU DON'T WANT THE [Edit _Exhibit_ Image Map] button; use the lower button. Navigate to the copy of the image that is stored in the Alternate Image Folder. Use the Image Map Editor to define the map. Save the image map. When you use the Image Map Editor on an image file by navigating directly to it, rather than through an Exhibit, the map is stored in a.MAP file with the same name as the image file. For images in the Alternate Image Folder, SS will see the.MAP file and will use it for the image. If the same file is attached to multiple exhibits, I am pretty sure SS will use the map for all the exhibits.” The article says this method is untested, however I did test it, and it works.