Picture of Make popup text on Instructable images
Images on Instructables have a feature where they pop up text when you move your mouse
over outlined regions of the pictures. This is used to label particularly interesting parts of the
picture. It's quite a nice feature, and someone asked exacty how such a thing is done.

So here's an instructable. :-)

Unfortunately, this Instructable is mostly Obsolete

Remove these adsRemove these ads by Signing Up

Step 1: Starting point

Picture of Starting point
Here we are at a typical instructable "explore" page. I'm logged in under my
instructables username, of course.

Click on the "upload images" link to get to your image library.

Step 2: Go to image library

Picture of Go to image library
Presumably you've already loaded some images, based on the other instructable by 'something'.

Click on the "image libary" link to get to the page showing the files you've already uploaded.

Step 3: Pick a picture

Picture of Pick a picture
Select and click the picture you want to add popup text to.
This will switch Instructables to "image edit" mode at the default resolution.

You'll be in the same sort of "image edit" mode when you add an image to an Instructable you are creating or editing, so you don't have to add the popups right after uploading, separately from entering an instructable. In fact, it probably makes more sense to do it as part of the instructable creation (the remaining steps are all the same), where you have the context of your ... text.

Step 4: Create the mouse-over area

Picture of Create the mouse-over area
Click on a point and drag to the other corner of a rectangle containing the portion of the image where you wish to have pop-up text.

Step 5: Add the text

Picture of Add the text
When you release the mouse button, the Instructables editor will pop up a box for you to fill with text.

nerd126 years ago
it didnt work for me i draged but nothing happened
Arbitror nerd126 years ago
Instructables mostly only works in Firefox. IE sucks.
nerd12 Arbitror6 years ago
i have fire fox the only good thing about IE is the google tool bar which i cant put in fire fox
Arbitror nerd126 years ago
Search it in the add-ons.
nerd12 Arbitror6 years ago
wenpherd nerd126 years ago
me to
westfw (author)  nerd126 years ago
Yeah, I've had trouble recently as well. I think these days you can only add the popups in the instructable editor, and there may be additional restrictions on exactly when. It does seem to work if you have pictures in an un-published instructable, and then either EDIT or PREVIEW that instructable...
cant you just add these when u are making an instrucable?
westfw (author)  BuffaloNickel7 years ago
Apparently. You USED to be able to edit the pictures via your photo library, but now it looks like you can only edit them in the instructable editor after you've added them to a step. (So I guess this instructable is obsolete. :-()
westfw (author) 8 years ago
I can no longer add popups to pictures from the libary and/or upload pages, only in the instructable editor. I've submitted a bug, although this may be intentional behavior.
westfw (author) 8 years ago
BTW, does anyone know whether the popup text capability is standardized for the image formats that support ancillary data? Seem like a JPG EXIF item or PNG text item could store the text and the popup box location, and then everyone could use it...
Run N Gun8 years ago
Very well explained Instructable, it sure did help me a lot!
Thanks. I have been curious about this for some time. Odd how this is a hidden feature. I had no reason to ever go to edit pics.
westfw (author)  ColumbusCOOK8 years ago
It's not really hidden. As I said in step 3, and fungus emphasized, you have the same picture editing capability whenever you add a picture to an instructable, in the main project editor.
If you're creating or editing a project you can add notes to the current image on the page. Just click and drag to create a box.
Liganic8 years ago
Good that someone finally did an instructable about that since there were some requests about that. I think you should mention that a box in a box doesn't work, meaning that the viewers can only see the Text of the larger box, not that from the enclosed one.
westfw (author)  Liganic8 years ago
Good idea; it made me notice I didn't even say you could have more than one popup in each picture. Added to step 6...