Answer to jhalligan's question
In answer to http://forum.jquery.com/topic/help-please-i-think-this-is-a-relatively-easy-image-swap-solution-but-for-the-life-of-me-i-cant-seem-to-get-it#14737000003574523
Simply, all you need to do is create a new class called something like "show" and write a quick jQuery event handler (or plain JavaScript if you'd prefer) to add the class to the <p> element when mouse enters an element.
When mouse enters an element the first action should be to remove the "show" class from all <p>'s before then setting the single one you want.
You'll notice I have removed all the styling into the CSS because I couldn't see wood from trees, and I have removed the <span> which isn't presently being used. When you productionise your code you'd also probably benefit from using repeating relative positioning instead of using absolute positions each time.
HTML
<table id="testimonials">
<tr>
<td><a href="#"><blockquote> <h3>Ryan Smith</h3>
<p>Director of Product Marketing <br/>
Avanquest North America Inc. </p></blockquote>
<p id="text1" class="testimonial hide">"testimonial content goes here"</p>
</a>
</td><td ><a href="#"><blockquote><h3>Christine Seelye</h3>
<p>President, CEO <br/>
Maximum Games Inc.</p></blockquote>
<p id="text2" class="testimonial hide">“My experience with Kander Design has been phenomenal. George is the definition of a
team player, taking notes and input from multiple sources and creating exceptional work
from the word ‘Go.’ He not only brings a creative direction to the table, but is amazingly
fast and flexible – qualities needed in our busy and demanding business. I have worked
with George for many years now. His thoughtful eye and dependability have made him
someone I have turned to for any number of projects on a day-to-day basis.”</p>
</a>
</td><td><a href="#"><blockquote><h3>Bob Wolf</h3>
<p>
Owner, CEO <br/>
Synergy Erotic Inc.</p></blockquote>
<p id="text3" class="testimonial hide">"something else"</p>
</a>
</td>
</tr>
</table>
<article>
</article>
<!--end Bottom Div--> </div>
CSS
#testimonials {
width:880px;
border:none;
padding-top:10px;
}
#testimonials td {
width:220px;
padding-top:120px;
padding-left:4px;
padding-right:4px;
padding-bottom:300px;
}
#testimonials td:first-of-type {
width:500px;
}
#testimonials a:link {
font-family:Arial;
display:block;
width:200px;
height:120px;
margin:0;
padding:0;
}
#testimonials td:first-of-type a {
margin-left:260px;
}
#testimonials td:nth-of-type(2) a {
margin-left:20px;
}
#testimonials h3 {
font-size:14px;
font-weight:bold;
}
#testimonials p.testimonial {
display:none;
text-align: center;
color:#fff;
height:108px;
width:890px;
position:absolute;
top:10px;
float:left;
}
#testimonials p#text1 {
left:50px;
padding-left:10px;
padding-top:4px;
background:transparent url(http://www.jhalligandesigns.com/test/kander/Images/tooltipBkgrnd.png) center no-repeat;}
#testimonials p#text2 {
left:100px;
padding-left:15px;
padding-top:10px;
background:transparent url(http://www.jhalligandesigns.com/test/kander/Images/tooltipBkgrnd2.png) center no-repeat;
}
#testimonials p#text3 {
left:50px;
padding-left:10px;
padding-top:4px;
background:transparent url(http://www.jhalligandesigns.com/test/kander/Images/tooltipBkgrnd3.png) center no-repeat;
}
#testimonials p.testimonial.show { display:block; }
JavaScript
$(document).ready(function(){
$("#testimonials a").mouseenter(function() {
$("#testimonials p.testimonial").removeClass("show");
$("p.testimonial", this).addClass("show");
});
});