JavaScript的onmouseover问题（使用django和django imagekit呈现）_Javascript_Html_Url_Onmouseover

JavaScript的onmouseover问题（使用django和django imagekit呈现）

javascript html url

JavaScript的onmouseover问题（使用django和django imagekit呈现）,javascript,html,url,onmouseover,Javascript,Html,Url,Onmouseover,我用的是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_ima

我用的是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中的p%}
{%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>


{image1=新图像
image2=新图像
image1.src={p.thumbnail\u image.url}
image2.src={p.display.url}
{p%中的p为%p}
{%endfor%}

这将显示一系列的缩略图，但当鼠标移过时，不会显示较大的图像。我相信这与我如何指定变量{p.display.url}有关。

看起来您的JavaScript总体上有点粗糙——一些特定的，例如：

您正在
标记中使用折旧后的
```
语言
```
参数
在第一个脚本块的顶部有一个未闭合的括号
我不知道你是否可以引用你在
```
onmouseover
```
/
```
onmouseout
```
标签中声明的变量，就像你正在做的那样

通常，在标签或PARAM值之类的东西中间有断线，这些值可能是合法的（我不确定），但它们的值是有问题的，至少对我来说，它们使我无法理解你在做什么。考虑删除它们。

另外：一般来说，引号的使用很混乱……相信我，如果你把它们清理干净，你会更好地理解你自己的代码

然而，在您的案例中，最主要的事情应该是：查看呈现给浏览器的代码，以解决您的JavaScript问题。首先也是最重要的。这将缩小您试图消除的特定错误是否是由于您的模板语法/逻辑/etc，而不是您的客户端JavaScript。在任何情况下，这本身都不是django问题。

我清理了您的代码，但正如@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>


var thumbs=[]；
var悬停=[]；
{p%中的p为%p}
thumbs.push（新图像（））；
thumbs[thumbs.length-1].src=p.thumbnail\u image.url；
hover.push（新图像（））；
悬停[hovers.length-1].src=p.display.url；
{%endfor%}
{idx的百分比，枚举中的p（p）%}
{%endfor%}

我在JSFIDLE上写了一个基本示例，试图模拟Python代码将产生的结果：

为了稍微解释一下我所做的，我在开始时设置了几个JavaScript数组来保存缩略图和悬停。最初，我只是想让它们成为引用URL的字符串数组，但遵循了使用Image对象预加载图像悬停的方法

从这里开始，我去掉了您在锚标记中定义的事件处理程序属性，并将其移动到图像标记中，这样当用户将鼠标移到图像属性上时，我们就可以直接访问图像属性

我通常不允许使用从服务器端生成动态JavaScript，但我只是想与您的代码保持一致。

请提供浏览器中格式化页面的源代码。