Using ‘hotspots’ to swap images is pretty straight forward, and can be really effective…. try this method from Stackoverflow

Like .click(), the params are normally other functions. .hover() is pretty much the same as mouseover() however… .hover() can have it’s ‘re-set’ function in the same block of code, whereas .mouseover() needs .mouseout() to reset it….

Event handler that gets attached to a jQuery object thats targeting an element… i.e.

$(h4).click();

The above triggers when you click on a h4 tag, but to get it to actually do something, you need to add a function… i.e.

.click(function({ //do something }));

Or a full example…

$(h4).click(function(){
    $(this).css("background", "#000000");
});

:first The first match of the page. li a:first returns the first link also under a list item

:last The last match of the page. li a:last returns the last link also under a list item

:first-child The first child element. li:first-child returns the first item of each list

:last-child The last child element. li:last-child returns the last item of each list

:only-child Returns all elements that have no siblings.

Here are a few examples of tag selectors that go between the ‘magic’ jQuery $();…..

* Matches any element

E Matches all elements with tag name E i.e. $(‘img’);

E F Matches all elements with tag name F That are descendents of E i.e. $(‘li a’);

E>F Matches all elements with tag name F That are direct children of E i.e. $(‘li>a’);

To ‘get’ and element ID or CLASS you can use the same functions as CSS i.e.

$('#id-name');

or

$('.class-name');

You can use single or double quotes too, i.e.

$('#single-quotes');

or

$("#double-quotes");

You can also drill down by leaving a gap between CSS names. i.e. If you had an ‘a’ tag in a div with an id of #myDiv, you could use:

$('#myDiv a');

To call jQuery you can either download it or use the Google content network…

If you download it, you’ll need to call it in the head like:

<script type="text/javascript"  src="script/jquery-1.3.2.min.js"></script>

and you’ll need to trigger the ‘document ready’ funtion like this:

$(document).ready(function() {
     place code here
);

If you reference the Google Network version you’ll need to call it in the head like this:

Like an image to have a reflection beneath it?

Don’t want to process all your images, or maybe images are dynamically added to your site and you want the effect done automatically?

Visit this site… http://www.digitalia.be/software/reflectionjs-for-jquery

Common problem when trying to get code to validate via W3C, just wrap it in CDATA tags…

<script type="text/javascript">
    /*<![CDATA[*/
          
          // place javascript here i.e.
          function myFunction () {
                 // do something
          }

    /*]]>*/
</script>

Sometimes you need to change something depending on the browser size. Often this means that you’ll need to check for the browser being resized too… To do this you use:

window.onresize = nameOfAFunction;

For an example, make sure you have a <div> with an id of ‘footer’, with a <p> tag inside and try the following:

function checkPageDims(){
    var pageW = $(window).width();
    var pageH = $(window).height();
    $('#footer p').html('w:'+pageW+', h:'+pageH);
}

Then below type:

window.onresize = checkPageDims;