All geek questions in one place

Onmouseover problems with JavaScript (using django and django-imagekit)

I am 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 related images:

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

I am trying to create a series of thumbnails {{p.thumbnail_image.url}} that, when mouseover'd, will generate a slightly larger version of the image, {{p.display.url}} via Javascript, The following code in the template tries to do this:

<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 a series of thumbnails, but a larger image will not display when you click mouseover'd. I believe this is due to the way I specify the variable {{p.display.url}}.

+3
source share
2 answers

, , @fish2000, . :

<html>
<head>

<script>
var thumbs = [];
var hovers = [];

{% for p in p %}
thumbs.push(new Image());
thumbs[thumbs.length - 1].src = p.thumbnail_image.url;
hovers.push(new Image());
hovers[hovers.length - 1].src = p.display.url;
{% endfor %}

</script>
</head>
<body>

{% for idx, p in enumerate(p) %}
<a href=""> 
    <img src="{{ p.thumbnail_image.url }}" border=0 name="rollover" onmouseover="this.src = window.hovers[{{ idx }}].src" onmouseout="this.src = window.thumbs[{{ idx }}].src">
</a>
{% endfor %}
</body>
</html>

JSFiddle, Python: http://jsfiddle.net/TeEHU/

, , JavaScript, , . , URL-, , Image, .

, , , , .

JavaScript , .

+1

, JavaScript gnarly - , :

  • language <script>;
  • , script
  • , , onmouseover/onmouseout, ;

, , ( ), , ; , . .

: , - ... , , .

: , , JavaScript. . , , , , - / / .. JavaScript. , .

0

Source: https://habr.com/ru/post/1738124/

More articles:


All Articles