I have a editable page that acts as a form, and was wondering how to incorporate images into it.

Currently, it looks like this: Screenshot

Clicking on the spriteId or name fields that have a darker background allows you to edit them inline.

I was thinking that clicking on the image would open a dialog box allowing you to edit or upload, but that seemed clumsy.

How is this generally done?

(The audience of this is generally technical, but not extremely so as it is a learning programming site.)

EDIT: Every user will need to change the image. The hen is a placeholder.

This is not a lesson, but a written version of Scratch, a popular drag and drop language. This is where the user can configure one of their sprites.

The image is one of the costumes for their sprite.


How about this:

User Mouse overs the image and gets a border with 2 action options(button / icon maybe) to edit and upload.

(on click) Upload will open the natural operating system process and can be default to Pictures(windows). User selects the new image from his local machine. You can resize and push it on your interface.

I liked the idea that you click the image and the (manipulation) interaction happens right over there. very contextual.

second option :

Clicking on hen an entire row of images is displayed below on a different background. The entire page below the hen goes down.

The user clicks on the new image and the hen gets replaced. The last image can be a dotted line where the user can upload his or her picture.

The user clicks on the new picture. hen gets replaced and the Div closes bringing up the bottom page.

Clarify :

1) what will edit do

2) What's the likelihood of editing and uploading an image by the user. is it part of learning the lesson or just a idea to personalize. Whats the significance of image manipulation.

  • I added the clarification that you recommended. – Daniel F May 2 '15 at 18:04
  • Maybe I am overthinking : Does the user write Chicken first or the image comes default and the user then types chicken in the name text field – Accidental_Everything May 2 '15 at 19:37
  • It will look like the screenshot when the user starts. then they can change the names or images, or add a new costume and set the new costumes name and image – Daniel F May 2 '15 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.