Changing Page Content with JQuery

This tutorial is in response to a specific request by someone. Here is the summarized version of their request:

How would you use JQuery to create an image that changes when the mouse is over it and also changes the content (text/image(s)) in a different section of the page dynamically (without refreshing the page)?

In order to change page content with JQuery, you must first import JQuery and know the basics of how to use it, all of which I discussed here.


We will also need two images to test this out with and a section of content to change dynamically when the mouse moves over and out of this image. Here is the code we will use for our initial image:

Importing JQuery into your Website

JQuery is an extension of JavaScript that uses various techniques to virtually extend the capabilities of what you can create with plain JS. The website for JQuery can be found here:

http://jquery.com/

The most recent version of JQuery as of the creation of this tutorial is 1.7.1. You can (and should, if you're going to use it) download the production version of it here:

http://code.jquery.com/jquery-1.7.1.min.js

You can download it by visiting the URL and then clicking File > Save As (or Save Page As) in your browser.

An Overview of Web Pages

Index

I have created this index due to the amount of information present in this tutorial. Feel free to skim past any sections that contain information you already know. This tutorial provides the very basic information about how web pages work in general, and near the end it starts to focus a little bit on how to extend your HTML pages with CSS and JavaScript coding.

An Overview of Web Pages
W3 Schools
HTML
CSS
Extending web page capabilities
JavaScript vs. browser plugin languages
HTML basics
Head tags
Body tags
HTML page example, with CSS and JavaScript
Conclusion