Beginning JavaScript with DOM Scripting and AJAX

Chapter 6: Common Uses Of JavaScript (Images and Windows)

Download all as a zip file (1.6 MB)

• Reading and changing image properties

  • exampleImageProperties.html
  • imageProperties.css
  • imageProperties.js

• Simple, old school roll-over

  • exampleSimpleRollover.html

• Automated roll-overs via a trigger class

  • exampleAutomatedRollover.html
  • automatedRollover.css
  • automatedRollover.js

• CSS-only roll-overs

  • exampleCSSonlyRollover.html

• Roll-over on the parent element (programmatic)

  • exampleParentRollover.html
  • parentRollover.css
  • parentRollover.js

• Roll-over on the parent element (via a dynamic CSS class)

  • exampleParentCSSRollover.html
  • parentCSSRollover.css
  • parentCSSRollover.js

• Document embedded slide show

  • examplePhotoListInlineSlideShow.html
  • photoListInlineSlides.css
  • photoListInlineSlides.js

• Document embedded slide show (Fixed)

  • examplePhotoListInlineSlideShowSafariFix.html
  • photoListInlineSlidesSafariFix.css
  • photoListInlineSlidesSafariFix.js

• Dynamic slide show

  • exampleMiniSlides.html
  • miniSlides.css
  • miniSlides.js

• Reading window properties

  • exampleWindowProperties.html

• Pop-up window examples

  • exampleWindowPopUp.html
  • exampleLinkWindowPopUp.html
  • exampleParameterLinkWindowPopUp.html

• Triggering Pop-Ups with a CSS class

  • exampleAutomaticPopupLinks.html
  • automaticPopupLinks.js

• Using timeout to hide a warning message after a certain amount of time

  • exampleTimeout.html
  • timeout.css
  • timeout.js

• Using interval to show an animated slide show

  • exampleAutoSlideShow.html
  • autoSlideShow.css
  • autoSlideShow.js

• Generating links to point to the previous page

  • exampleForBackLink.html
  • exampleBackLink.html

• Replacing Pop-ups: Turning an embedded piece of content into a layer ad

  • exampleLayerAd.html
  • layerAd.css
  • layerAd.js

• Replacing Pop-ups: Showing a photo in a dynamic overlay

  • examplePicturePopup.html
  • picturePopup.css
  • picturePopup.js

• Replacing Pop-ups: Showing another document in a dynamic overlay

  • exampleIframeForPopup.html
  • iframeForPopup.css
  • iframeForPopup.js

• Helper functions

  • DOMhelp.js

Back to index

Go to the homepage