Advanced Web Tools: jQuery

jQuery: Selecting & Events Fun!

Directions:

Each of the following exercises can be completed in the same file. You can write all your style rules and script in your html page or in external files as you wish. Once completed, these files should be uploaded and linked from your index. Please test your work as you go (i.e. don't wait until you've tried to implement every single thing to actually see if it works!)

Exercises:

1) When an image is clicked, it will toggle a border on or off based on the following rules:

  • all borders will be solid 5 pixels in weight
  • .png images will toggle to a yellow border
  • .gif images will toggle to a green border
  • .jpg images will toggle to a red border
  • Only the image actually clicked should toggle, regardless of whether there are other images of the same file type on the page
  • Note: You will actually need to either find or create two of each file format

Example:

Before any toggling After some toggling

2) When any image experiences a mouse over (i.e. you move your mouse over it), it should grow to 120% of its current size. When the mouse moves off the image, it should go back to its original size.

3) When any image is double-clicked, its filename is added to an ever-growing numbered list of images that have been double-clicked.

Example:

Before any double-clicksAfter 4 double-clicks

4) Add a form and textbox to the top of the page. The user can enter a percentage value in this textbox. Edit the dblclick event of the images, and configure it so that when an image is double-clicked, that image is scaled by the percentage the user has entered into the textbox. If s/he has entered 50, for example, then the height and width of the image should be scaled down to 50% of their current values. If the user enters 200, then the image should be scaled to 200% its current size (i.e. doubled in size).

Example:

BeforeAfter

5) Add to the bottom of the page a set of three small div's with dimensions 100x100 pixels each. They should sit side by side. Style them so they are three colors of your choosing other than white or black. When the user clicks on one of the div's the page background should be set to match the color of the div that was clicked.

Example:

BeforeAfter

6) Write some script that will, when an image is clicked, make that image the tiled background of the entire page.

Example:

BeforeAfter