jQuery rollover with some php

I'm trying to get some rollovers working using jQuery. The trouble is that the image source has to be got using some php code.

If I do it inline like this with javascript it works:

<a href="<?php the_permalink(); ?>"
   <?php $thumburl = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
   onmouseover="document.roll<?php the_ID(); ?>.src='<?php thumbGen($thumburl,300,0,1,0,0); ?>'"
   onmouseout="document.roll<?php the_ID(); ?>.src='<?php thumbGen($thumburl,300,0,1,0,1); ?>'"
   <img src="<?php thumbGen($thumburl,300,0,1,0,1); ?>" name="roll<?php the_ID(); ?>"/>
</a>

$thumburl variable is the exactly that; url of the particular thumbnail. The thumbgen bit does some size and colour conversions. When together they give me a url of a b&w and colour images that get swapped. I'm using WordPress so I have to use the php rather than just specify the image src because the size and colour co开发者_如何转开发nversions are done automatically for the user.

First question, is doing the code inline like this bad? Second. I'm struggling to write a jQuery function for the rollover because of the php. I presume it would be like this:

$(document).ready(function() {
   $('.project img').hover(
    funcation(){
    this.src = '<?php thumbGen($thumburl,300,0,1,0,1); ?>';},
    function (){
    this.src = '<?php thumbGen($thumburl,300,0,1,0,1); ?>';});

But I have no idea where to include this: $thumburl = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );

can you even combine php and jQuery in one?

Thanks

You can simplify the PHP a bit like this:

<a href="<?php the_permalink(); ?>"
   <?php $thumburl = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
   <img src="<?php thumbGen($thumburl,300,0,1,0,1); ?>" data-hover="<?php thumbGen($thumburl,300,0,1,0,0); ?>" />
</a>

Then do something like this in jQuery, using that data attribute:

$(function() {
   $('.project img').each(function() { 
     $.data(this, 'orig', this.src); 
   }).hover(function() {
     this.src = $(this).attr('data-hover');
   }, function () { 
     this.src = $.data(this, 'orig');
   });
});

What this does is store the original src for each image using $.data(), then on hover we grab whatever new src attribute is, which we store in data-hover (a data attribute we created), and when hovering out we get that original src and restore it.