JavaScript的onmouseover問題（使用django和django-imagekit呈現）

我正在使用Imagekit。 View.py包括：JavaScript的onmouseover問題（使用django和django-imagekit呈現）

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>

這將顯示一系列縮略圖，但mouseover'd時不會顯示較大的圖像。我相信它與我如何指定變量{{p.display.url}}有關。

來源

2010-03-23 Michael Moreno

請給我們在瀏覽器中格式化頁面的源代碼。 – sergzach 2012-03-03 17:38:44

它看起來像你的JavaScript是一般有點粗糙 - 一些具體的如的：你使用的<script>標籤的貶值language PARAM

;
你必須在你的第一個腳本塊的頂部看起來像一個未關閉支架
我不知道，如果你可以參考你在onmouseover/onmouseout標籤聲明的變量，因爲你正在做的;

通常情況下，你在標籤或參數值等事物中間有換行符，這些可能是合法的（我不確定），但它們的價值是可疑的，至少對我而言;他們讓我不知道你在做什麼。考慮刪除它們。

另外：通常，你對報價的使用是一團糟......相信我，如果你清理它們，你會更好地理解你自己的代碼。

但是，您的案例中的主要問題應該是：查看呈現給瀏覽器的代碼以解決JavaScript問題。首先，也是最重要的。這將縮小你想要壓扁的特定bug是否是由於你的模板語法/邏輯/等等，與你的客戶端JavaScript相關的。在任何情況下，它都不是特別的django問題本身。

來源

2012-03-24 15:08:21 fish2000

我清理了你的代碼，但正如@ 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，但我只是想與您的代碼保持一致。

來源

2012-03-24 17:26:44

JavaScript的onmouseover問題（使用django和django-imagekit呈現）

回答

相關問題