个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
25
4
我正在使用 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 }} 的方式有关。
最佳答案
我清理了你的代码，但正如 @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 对象预加载图像悬停的方式。
从这里开始，我摆脱了您在 anchor 标记中定义的事件处理程序属性，并将其移动到图像标记中，这样当用户将鼠标悬停在图像上时，我们可以直接访问图像属性。
我一般不会容忍从服务器端生成动态 JavaScript 的使用，但我只是想与您的代码保持一致。
关于javascript - JavaScript 的 onmouseover 问题(使用 django 和 django-imagekit 呈现)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2497476/
25
4
0
有人可以帮我让 onmoseover 事件保持显示: block 吗？行为，直到我将鼠标悬停在不同的事件上？换句话说，我想保持一个事件可见，直到我将鼠标悬停在另一个事件上。我填写的答案很简单。我刚接触
应该很容易，但我无法让它工作。如标题中所述，我想将 onmouseover 的背景颜色从 span.name(橙色)更改为 T E S T 我找到了这个但是
我一直致力于在Java脚本中创建一种摆动效果，这样当鼠标移动到一些对象上时，它们会慢慢地保持悬停，直到它们停止。。我已经在JSFdle中实现了这一点：http://jsfiddle.net/z3s7v
首先，我必须说我处于非常基础的编程水平。这些问题的答案对某些人来说可能非常明显，但我就是想不出一种方法将所有这些放在一起。提前致谢。 我有这个 HTML 代码: Tema 1. Mecá
在第二个(右/bing)表条目中，我理解为什么从图像悬停到“bing”字符串可能会导致 bingfn()被解雇。 但是第一个(左/谷歌)表有 onmouseover在 ，因此我预计从图像悬停到文本并
DivElement collectWoodHover = querySelector("#collectWood"); if (collectWoodHover.onMouseOver == tru
我正在尝试制作一些东西，当您滚动图像的某个部分时，会使用 onmouseenter 和 onmouseleave 功能播放不同的歌曲。它适用于第一个图像映射，但由于某种原因，它不适用于第二个图像映射，
我目前正在学习使用java脚本，遇到了一个我无法解决的问题。为了练习，我在一个简单的 HTM 中编写了一个修改 div 上边距的脚本: var boton = (function () { var t
我正在使用 jQuery 1.7.2，我想做的是在一个 div 上触发 onmouseover (使用类 active)，但在 onmouseout 上触发 将该类更改为 inactive，并将第二个
页面加载后，如果您检查控制台，您会看到该函数在我将鼠标悬停在元素上之前触发。如果我删除参数，则页面会等待我将鼠标悬停在元素上，但我会失去动态功能。我在传递元素时做错了什么吗？ var myList =
如何定义 onmouseover 函数的特定持续时间？ 例如，在元素悬停 500 毫秒后，onmouseover 开始运行(因此，如果用户停留时间不超过 500 毫秒，onmouseover 不会运行
我尝试做这样的事情: 当我将鼠标悬停在按钮上时，文本应该消失，当我鼠标移开时，文本应该再次显示.. 这是我的样本jsfiddle Request
我的计时器是通过 onmouseover 函数激活的。 我的 CSS 动画在 15 秒后完成，但我的计时器没有完成。每次鼠标悬停后，时间都会重新激活，而不是按时间倒计时。 Hover this tex
我正在使用 angularjs和谷歌柱形图以图表形式显示数据。当数据更多时，我显示带有水平滚动条的图表。滚动条打开时工具提示出现问题。 请查找演示 here . 当鼠标悬停在条形图上时，它会在工具提示
我需要一个脚本，它将应用于围绕一个圆圈的一组图像.. 现在通过脚本需要的是 在圆圈周围的鼠标悬停图像上应该放大并移动到中心。 如何使用 Javascript 和 CSS 做到这一点。 请具体说说CSS
我正在使用 PHP 创建在线购物网站。我正在使用 Bootstrap 来设计我的网站。我的问题是鼠标悬停显示添加购物车按钮和折扣图片。 这是我的代码 .jpg" alt="produc
我正在尝试将此背景更改器从 编辑后删除 实现到我的个人博客，该博客仅驻留在我的计算机上(未上传到互联网)，但我不知道 js 是什么因为它是？我将如何将它添加到我的博客中？我知道有: 在 html 文
这是一个幻灯片功能，鼠标悬停我想让它停止。它没有在鼠标悬停时停止幻灯片放映，而是加快了速度？？我如何更正此问题以停止鼠标悬停？ function nextslide() { // Hide
是否可以使用 JavaScript 在每个选择的下拉菜单上添加悬停消息？ 我会使用类似 document.getElementById('name_of_html_id') 的东西，然后是四个选项之一
我正在尝试将段落堆叠在一起。当我将鼠标悬停时，我希望显示该特定段落。但是我收到错误: 未捕获的 ReferenceError:分配中的左侧无效 JS: var topLayer = "p3"; fun
我是一名优秀的程序员,十分优秀！