This Material explains the concept of how to use the Image Map Tweak in Blackboard in easy manner. Hope you all like this concept and useful to you.

1. WORKSHOP
WANT TO ENHANCE YOUR BLACKBOARD?
JUST COME AND SPEND 15 MINUTES
TOPIC
“Using the Image Map Link Mapper Tweak in
Blackboard”
Conducted By
Mrs. Vasanthi Muniasamy M.Sc., M.Phil
Grade: Asst. Professor
Dept. of Information Systems
Community College for Girls,
Khamis Mushyat, King Khalid University, SA

2. 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

3. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Part 2
Steps involved in Online Image Map Editor:
1. Open the website - www.maschek.hu/imagemap/
You can see the window shown in the Figure 1
Figure 1
1
2
3
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 3

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 4

5. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 2
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

6. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 3
3
4
1
2
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
-
Give #
Alt
-
Give the Text Box Name displays in the image file [Eg: Lecture Folder]
Target -
Click the drop down list and select New Window
c. Click the Code link and you can see the window one shown in the Figure 4.
Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU
Page 6

7. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 4
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 7

8. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Part 3
Steps involved in embedding your image in blackboard.
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 Editor’s 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 Editor’s 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 8

9. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 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 9

10. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 2
Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU
Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 10

11. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 3
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

12. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 4
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

13. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 5
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

14. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 6
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

15. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 7
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

16. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 8
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

17. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 9
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

18. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Part 4
Steps involved in Final Process
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 18

19. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 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 19

20. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 2
Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU
Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 20

21. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 3
Mrs. Vasanthi Muniasamy, Dept. of Information Systems, Community College for Girls, KKU
Conducted By Mrs. Vasanthi Muniasamy, Dept. of Information Systems, CCG, KKU Page 21

22. Workshop Title: The Image Map Link Mapper Tweak in Blackboard
2013
Figure 4
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