I figured it out just in case someone ends up looking here for the
answer!
<script type="text/javascript">
$(document).ready(function(){
$(".small").hover(function(){
var hoverObj = this;
$("#big").fadeOut("fast", function(){
$(this).css("backgroundImage", "url(" +
$(hoverObj).attr("big") +
")");
$(this).fadeIn("fast");
});
});
});
</script>
On May 7, 11:27 am, Stuart Mullen <[EMAIL PROTECTED]> wrote:
> Hi all
>
> I've just started using jQuery (it's great!) and I'm looking to re-
> factor what I have written to have a fade transition between each
> image change. Any ideas would be greatly appreciated!
>
> My code is below, many thanks in advance! :)
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> <title></title>
>
> <script type="text/javascript" src="jquery/jquery-1.2.3.pack.js"></
> script>
>
> <script type="text/javascript">
> $(document).ready(function(){
> $(".small")
> .hover(function(){
> $("#big").css("backgroundImage", "url(" +
> $(this).attr("big") +
> ")");
> });});
>
> </script>
>
> </head>
>
> <body>
>
> <table>
> <tr>
> <td id="big" style="background:url(img/amazing-cars.jpg); height:
> 200px; width: 200px;"></td>
> </tr>
> </table>
>
> <br />
> <br />
> <br />
>
> <img class="small" src="img/t_amazing-cars.jpg" big="img/amazing-
> cars.jpg" />
> <img class="small" src="img/t_Cars.jpg" big="img/Cars.jpg" />
> <img class="small" src="img/t_ethel-cars.jpg" big="img/ethel-
> cars.jpg" />
>
> </body>
> </html>
