Make image map

Graphics work - image mapping and text font display

I want to setup a web simulator of my product. Go to this web page:

[url removed, login to view]

Here you will see a web page showing a keyboard and a display. If you type something either directly into the text box or by clicking on the simulated keyboard and then press "Enter", you will hear synthesized speech playback.

I want this web page to look and work like the real product shown below: (see uploaded jpg)

Your task is to implement both the keyboard and display as follow:

1. Replace the graphical keyboard with the photo of the keyboard. Make an image map of the keys from the photo of the keyboard so that it now functions the same way as the graphical keyboard. Please show some visual feedback when the keys are clicked on the screen using a mouse such as highlighting or depression. The "Clear" function needs to be moved to the "Esc" key. You only need to map the keys showing on the graphical keyboard, for example, there is no need to map the function keys etc. Caps Lock key does need to be implemented. The "G" key is currently shown in red, that "red-ness" is not wanted so do not make the G key red on the new keyboard layout.

2. For the display, the LCD has 2 lines of 16 characters. The current font shown is not satisfactory, I want a larger non-serif, non-proportional font similar to the LCD display. It need not be dot-matrix font unless you can do it very simply without adding much to the project cost. It also need not be italicized as shown on the LCD display. I guess you will somehow have to "cut a hole" in the photo image to display the text box or something like that so the entered text will show in place of the LCD. Note that there is no automatic wrapping of text where the whole word jumps to the next line when it cannot fit on the existing line, this is what I want so don't change it. Basically, do not change any behavior of the program before discussing with me.

3. The "Voice Selection" can be moved to the left side of the LCD display.

4. I want the product display to be close to real-life size as possible. For your information, the keyboard is 8-3/4" wide.

5 This website needs to work with all of the commonly used browsers and versions such as IE, Firefox, Safari etc..

6. I want an introductory page at "" which says:


This is a web simulation of the KeyboardCommunicator KC200. This site has limited bandwidth so please limit your evaluation to 5 minutes at a time. Note: only free tying function is implemented on this web simulation. Memo function, text-substitution, SETUP etc. are NOT implemented.

This page is only for use by customers contemplating the purchase of the KeyboardCommunicator. Other uses of this site is strictly prohibited.



Only if the user click on I AGREE, then take them to the simulation page.

Any question, please ask now! :-) Thanks.

Ron Hu

Taidot: verkkosivujen suunnittelu

Näytä lisää: www free line com, www ask com what is your question, what does it cost to design a website, web design using word press, serif web design, on line map, memo design, matrix design, make new website to you free now, make my photo graphics, make my graphics, make line, make a web side, make $5, lock&lock product design, key selection, image free for design web, image design graphics, image by design, graphics design image, graphical design free, free lines, free line com, feedback time limit, design matrix

Tietoa työnantajasta:
( 0 arvostelua ) Gloucester, Canada

Projektin tunnus: #397401