onmouseover with django / imagekit

I'm using Imagekit. View.py includes:

def pics(request):
    p = Photo.objects.all()
    return render_to_response('Shots.html',
            {'p': p})

The following simple code in the template will generate associated images:

{% for p in p %}
<img src = "{{ p.display.url }}">
<img src = "{{ p.thumbnail_image.url }}">    
{% endfor %}

I'm attempting to generate a series of thumbnails {{ p.thumbnail_image.url }} which, when mouseover'd, will generate the slightly larger version of the image, {{ p.display.url }} via Javascript. The following code in the template attempts to do so:

<html>
<head>
<HEAD>

<script 
language="Javascript"> 
{ image1 = new Image 
image2 = new Image 
image1.src = {{  p.thumbnail_image.url }}             
image2.src = {{ p.display.url }}
</script>
</head>
<body>

{% for p in p %}
<a href=""
onMouseOver="document.rollover.src=
image2.src  
onMouseOut="document.rollover.src=
image1.src"> 
<img src="{{ p.thumbnail_image.url }}" border=0 name="rollover"></a>
{% endfor %}
</body>
</html>

This will display the series of thumbnails, but the larger image will not display when mouseover'd. I believe it has to do with how I'm specifying the variable {{ p.display.url }}.

ansaurus

tags:

views:

answers:

onmouseover with django / imagekit

related questions