HOW TO USE THE IMAGE MAP LINK MAPPER TOOL IN LMS (BLACKBOARD) AREA By

Mrs. Vasanthi Muniasamy M.Sc., M.Phil Grade: Asst. Prof Department of Information Systems Community College for Girls Khamis Mushyat King Khalid University, Kingdom of Saudi Arabia

TABLE OF CONTENTS
S. No 1 2 3 E Learning Image Mapping Tweak A. Part I B. Part II C. Part III D. Part IV 7 31 Contents Page No 3 4 6

Website Address - You tube KKU Community http://www.youtube.com/watch?v=AaN--C3AvH4

E Learning What is the meaning of E-learning?

E-learning is a new education concept by using the Internet technology, it deliveries the digital content, provides a learner-orient environment for the teachers and students. The e-learning promotes the construction of life-long learning opinions and learning society.

It means:
1. E-learning is a new education concept; it may different from the old educational concept. 2. Delivery of the digital content is the main characters of e-learning. 3. This definition extends the environment on the Internet. We mean that the Internet provides a learning environment for the students and teachers. This environment is learner-oriented, so we can throw out the thoughts of traditionally teacher-center's instruction in classroom. 4. As a new concept of education, e-learning gives a condition for us to realize the lifelong learning principle and help us to build a more real learning society. The e-learning plays more in high education for the reason of fast need of high education.

Image Mapping
It is possible to make one image link to several pages, depending on where the image is clicked. This technique is called Image Mapping. You simply specify which areas of the image should link to where. In other words, an image map is a set of locations within a GIF or JPEG image. These locations are a map on the surface of the image. The map can define active Clickable Areas which link to URLs. These clickable areas can be Rectangles, Circles and Irregular Polygons.

The JPEG image above could use some rectangular maps to link to Areas A thru D, a circle could link from the alien's head, and a polygon could link from the alien's body. There are excellent tools out there to help you create image maps. No one calculates the coordinates by hand. If you want to use image maps on your site you will need to get a program that will allow you to simply drag the mouse over the areas you want to work as links. Most HTML editors have this as a built-in function.

If you do not use an HTML editor, you can still get programs that will do this boring job for you - best thing is - you can get it for free! Now we will see how to use and link this image map in our Blackboard resources.

Tweak
Tweak is a Building Block for the Blackboard LMS which enables academics, designers, programmers and support staff to customize and extend their site presentation, navigation and structure as well as add template page designs, small learning activities and Blackboard functionality. This tweak allows you to customize your Blackboard page by replacing or hiding the standard icons. The main aim of this is to help the teachers how to use the tweak tools to customize their courses. It will help the students for easy access of their courses and gives a nice vision. This Material explains the concept of how to use the Image Map Link Mapper Tweak in LMS Area (Blackboard) in easy manner. I divide the full process into 4 parts and explain with the nice blackboard pictures. So any one can easily understand this concept and utilize it in their LMS Area without any confusion.

Let Start Now

Workshop Title: The Image Map Link Mapper Tweak in Blackboard

2013

Part 1

Steps involved in creating tweak Image 1. Open your MS Word Processor 2. Design an image containing your blackboard folders like Lecture, Quiz, and Assignment etc. It is up to your imagination. 3. Group that objects and Copy that image. 4. Open Your Paint Program and paste it and Save it as a PNG / JPEG file format. Now your image is ready for tweaking.

Part 1 is Over

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU

Page 2

Workshop Title: The Image Map Link Mapper Tweak in Blackboard

2013

Part 2
Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 3

Steps involved in Online Image Map Editor:

Workshop Title: The Image Map Link Mapper Tweak in Blackboard

2013

1. Open the website - www.maschek.hu/imagemap/ You can see the window shown in the Figure 1 Figure 1

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Steps: a. Click the 1 Numberd button and Choose the Image File (Figure 1.1) b. Click the 2 Numbered button and Upload the Choosen File c. Click the 3 Numbered for Accept the Uploaded file Now Your file is uploaded and you can see the window in Figure 2

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU

Page 4

Workshop Title: The Image Map Link Mapper Tweak in Blackboard

2013

Figure 1.1

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU

Page 5

Workshop Title: The Image Map Link Mapper Tweak in Blackboard Figure 2

2013

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Figure 3 Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 6

Workshop Title: The Image Map Link Mapper Tweak in Blackboard

2013

3 4

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Steps: a. Using Mouse pointer, just make a rectangle over the items you want the link in the Image File. [See 1 and 2 numbers] in Figure 3. b. Automatically we get the co-ordinate points and we have to fill up three boxes Href Alt Give # Give the Text Box Name displays in the image file [Eg: Lecture Folder] Click the drop down list and select New Window

Target -

c. Click the Code link and you can see the window one shown in the Figure 4.

Figure 4 Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 7

Workshop Title: The Image Map Link Mapper Tweak in Blackboard

2013

Click Here

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Steps: 1. Copy the Code and save it in notepad. This code will be used in Blackboard. The Code is looking like the one shown below: <map id="imgmap201393161913" name="imgmap201393161913"> <area shape="rect" alt="Lecture Folder" title="" coords="24,64,246,151" href="#" target="_blank" /> <area shape="rect" alt="Assignment" title="" coords="486,51,703,143" href="#" target="_blank" /> <!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -></map>

Part 2 is Over

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU

Page 8

Workshop Title: The Image Map Link Mapper Tweak in Blackboard

2013

Part 3
Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 9

Steps involved in embedding your image in blackboard.

Workshop Title: The Image Map Link Mapper Tweak in Blackboard

2013

1. Open your blackboard and create the folders like Lectures, Quiz, and Assignment etc. shown in Figure 1. 2. Click the Tools and select Tweak option shown in Figure 2. 3. You can see the window shown in Figure 3. From that select Image Map Link Mapper from the Structure Tab. You will get the screen one shown in the Figure 4. 4. Select Item option from the Build Content Menu shown in Figure 5. 5. The item window is open like one shown in Figure 6. a. Give the name as COURSE MAP or any other name you wish. b. Click the Text Editors Third Icon Image Option in Third Row Menu. It will open a window like one shown in Figure 7. And upload the tweak image file which we designed earlier in Part 1. c. Give an Image Description and Title if you want. Click the Insert Button shown in Figure 8. d. Next, click the Text Editors Second Icon HTML positioned from the Right to Left. You will see the window shown in Figure 9.

Part 3 Over

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 10

Workshop Title: The Image Map Link Mapper Tweak in Blackboard Figure 1

2013

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 11

Workshop Title: The Image Map Link Mapper Tweak in Blackboard Figure 2

2013

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 12

Workshop Title: The Image Map Link Mapper Tweak in Blackboard Figure 3

2013

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 13

Workshop Title: The Image Map Link Mapper Tweak in Blackboard Figure 4

2013

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 14

Workshop Title: The Image Map Link Mapper Tweak in Blackboard Figure 5

2013

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 15

Workshop Title: The Image Map Link Mapper Tweak in Blackboard Figure 6

2013

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 16

Workshop Title: The Image Map Link Mapper Tweak in Blackboard Figure 7

2013

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 17

Workshop Title: The Image Map Link Mapper Tweak in Blackboard Figure 8

2013

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 18

Workshop Title: The Image Map Link Mapper Tweak in Blackboard Figure 9

2013

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 19

Workshop Title: The Image Map Link Mapper Tweak in Blackboard

2013

Part 4 Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 20

Steps involved in Final Process

Workshop Title: The Image Map Link Mapper Tweak in Blackboard

2013

1. Paste the code we already copy from the Image Map Link Editor 2. Copy the map id number shown in Figure 1. 3. Paste the map id in alt =copied map id number and type the following at the end before

/. usemap = # copied map id number shown in Figure 2.

4. Click the Update Button. Now it will lead to the Screen shown in Figure 3. 5. Now turnoff the Edit Mode [Must] 6. Now Your Course Map is ready for functioning. If you move your mouse pointer over the image folders it will become a hand symbol, if you click it will open the folders in new window.

Part 4 Over

Thank You Have a Nice Day

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 21

Workshop Title: The Image Map Link Mapper Tweak in Blackboard Figure 1

2013

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 22

Workshop Title: The Image Map Link Mapper Tweak in Blackboard Figure 2

2013

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 23

Workshop Title: The Image Map Link Mapper Tweak in Blackboard Figure 3

2013

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 24

Workshop Title: The Image Map Link Mapper Tweak in Blackboard Figure 4

2013

Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU

Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 25