[jQuery] Fade IN/OUT images onClick

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>emailsig.html</title><meta name="viewport" content="width = 400, minimum-scale = 0.25, maximum-scale = 1.60"><meta name="title" content="html email signature"><style type="text/css">  </style></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div apple-content-edited="true"><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Eurostile; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Eurostile; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; "><div><div><font class="Apple-style-span" color="#358271" size="6"><span class="Apple-style-span" style="font-size: 24px; "><span class="Apple-style-span" style="font-size: medium;">
</span></span></font></div><div><font class="Apple-style-span" color="#AEAEAE" size="6"><span class="Apple-style-span" style="font-size: 24px;"><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-size: 13px; ">I'm new to jquery so I hope you'll forgive my ignorance...
I have a div on a page that I'm hoping can contain multiple images that would fade in and replace an out-going image based on an onClick event.
Each image is dedicated to it's a href (there are about 30) and they would all be initially hidden...
I've given the images id's:
<div style="margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "><div class="smallfont" style="font: normal normal normal 11px/normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; margin-bottom: 2px; ">Code:</div><pre class="alt2" dir="ltr" style="background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(235, 235, 235); color: rgb(0, 0, 0); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-right: 6px; padding-bottom: 6px; padding-left: 6px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: inset; border-right-style: inset; border-bottom-style: inset; border-left-style: inset; border-color: initial; width: 750px; height: 82px; text-align: left; overflow-x: auto; overflow-y: auto; background-position: initial initial; "><div id="creditTray" class="fadeThis3">
<img id="zs1" class="movtitle" src="directors/dir_resources/zs/zs_t1.png" />
<img id="zs2" class="movtitle" src="directors/dir_resources/zs/zs_t2.png" />
</div></pre></div>the a href's have a class name:
<div style="margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "><div class="smallfont" style="font: normal normal normal 11px/normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; margin-bottom: 2px; ">Code:</div><pre class="alt2" dir="ltr" style="background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(235, 235, 235); color: rgb(0, 0, 0); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-right: 6px; padding-bottom: 6px; padding-left: 6px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: inset; border-right-style: inset; border-bottom-style: inset; border-left-style: inset; border-color: initial; width: 750px; height: 34px; text-align: left; overflow-x: auto; overflow-y: auto; background-position: initial initial; "><a class="title" href="javascript<b></b>:document.movie.SetURL('mov1.mov');" onclick="$('#mediaPlayer').fadeIn(1500);"></pre></div>And, because I want to display a title for each one...
I've been working with:
<div style="margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 5px; "><div class="smallfont" style="font: normal normal normal 11px/normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; margin-bottom: 2px; ">Code:</div><pre class="alt2" dir="ltr" style="background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(235, 235, 235); color: rgb(0, 0, 0); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-right: 6px; padding-bottom: 6px; padding-left: 6px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: inset; border-right-style: inset; border-bottom-style: inset; border-left-style: inset; border-color: initial; width: 750px; height: 98px; text-align: left; overflow-x: auto; overflow-y: auto; background-position: initial initial; ">$(document).ready(function() {
$(".title a").click(function() {
// do something...
});
});</pre></div>but I can't seem to get anything to work... any help would be much appreciated!</span></span></font></div></div><div>
</div></span><br class="Apple-interchange-newline"></div></span><br class="Apple-interchange-newline"> </div>
</body></html>