JavaScript的onmouseover问题(使用django和django-imagekit渲染)
我正在使用Imagekit。View.py包括：
def pics(request):
p = Photo.objects.all()
return render_to_response('Shots.html',
{'p': p}) 模板中的以下简单代码将生成关联的图像：
{% for p in p %}
<img src = "{{ p.display.url }}">
<img src = "{{ p.thumbnail_image.url }}">
{% endfor %}我正在尝试生成一系列缩略图{{ p.thumbnail_image.url }}，当鼠标悬停在这些缩略图上时，将通过Javascript生成图像的稍微大一点的版本{{ p.display.url }}。模板中的以下代码尝试执行此操作：
<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>这将显示一系列缩略图，但当鼠标悬停在上面时不会显示较大的图像。我相信这与我指定变量{{ p.display.url }}的方式有关。
回答 2
Stack Overflow用户
发布于 2012-03-25 01:26:44
我清理了你的代码，但正如@ this 2000提到的，这仍然是一种肮脏的方式。我想出了以下几点：
<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对象预加载图像悬停的方法。
从这里开始，我去掉了您在锚标记中定义的事件处理程序属性，并将其移到了image标记中，这样当用户将鼠标移到image标记上时，我们就可以直接访问image属性。
我通常不会宽恕从服务器端生成动态JavaScript的使用，但我只是试图与您的代码保持一致。
Stack Overflow用户
发布于 2012-03-24 23:08:21
看起来你的JavaScript总体上有点粗糙--一些具体的，例如：
- 您在
<script>标记中使用了折旧的language参数； - 您的第一个脚本块的顶部有一个未闭合的括号
- 我不知道您是否可以像您这样引用在
onmouseover/D9标记中声明的变量；
通常，在标记或参数值之类的东西中间会有换行符，这些可能是合法的(我不确定)，但它们的价值值得怀疑，至少对我来说是这样；它们让我无法理解您在做什么。考虑删除它们。
另外:一般来说，你对引号的使用是一团糟……相信我，如果你清理了它们，你会更好地理解你自己的代码。
但是，在您的案例中，主要内容应该是:查看呈现给浏览器的代码，以解决您的JavaScript问题。首先也是最重要的。这将缩小您试图消除的特定bug是不是由于您的模板语法/逻辑/等与您的客户端JavaScript造成的。无论如何，这本身并不是一个明确的django问题。
https://stackoverflow.com/questions/2497476
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号