quick image based mockup

More Javascript fun!

You can make an image based mockup with simple Javascript that loops over the images everytime you click. First you need to make a bunch of images, similar to a powerpoint slide deck animation, where one thing is different on each slide. Then as you click through the slides it seems interactive, even though the content is actually static. Save the PNG images as "page1", page2", etc. incrementing the numbers in order. The name and numbering scheme will be used to queue the images in the mockup.

jQuery

jQuery just make's everything easier. Here jQuery binds the tag with the id "content" to a click event, and then changes the tags "src" attribute to the page we want to show using the counter variable and the modulus of the total number of pages. We'll output the new "src" attribute value to the console for troubleshooting. On Chrome you can see the console by rightclicking "Inspect element" or ctrl-shft-c.

Puro JS and bad HTML

This kind of code is frowned upon, but you can actually set the callback function of an event in the HTML.

Puro JS another way

Now we do what we did with jQuery, only with pure JS.

Puro JS the right way

According to Mozilla Developer Network, this is the right way to handle a click event.