portrait - cartoon

Roll the mouse over the prompts above and see what happens.

For example, see how the layout changes under different conditions. When you roll over each of the above prompts, notice what happens to this paragraph. Then try re-sizing the browser window and rolling over the prompts again. what changes? What changes first under what circumstances, and why? Where is the state of the img tag kept? What happens if you go on to another page, and then you hit the back button to return to this page, and why?

As always, you should ask yourself: what could be done to make this more generalized and thus more easily reusable, without making it too complex?

• what could be done to make this work for placing an unlimited number of alternative images in one place on one page? (one script, one target location in the document, many images)
• what could be done to make this work for manipulating the contents of an unlimited number of img tags in an unlimited number of places on one page? (one script, many target locations in the document, many images)

view the JavaScript