onmouseover JavaScript의 문제점 (django 및 django-imagekit을 사용하여 렌더링)

Imagekit을 사용하고 있습니다. View.py은 다음과 같습니다onmouseover JavaScript의 문제점 (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}} mouseover가 실행되면 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

같습니다 - 몇 가지 구체적인 예를 들어 년대 : 당신이 <script> 태그의 감가 상각 language PARAM을 사용하고

;
당신은 당신이 onmouseover/onmouseout 태그에 선언 한 변수를 참조 할 수 있다면 당신이하고있는 것처럼
는 내가 모르는 첫 번째 스크립트 블록의 상단에 닫히지 않은 브라켓의 모습이;

종종 태그 또는 param 값과 같은 중간에 줄 바꿈이 있습니다.이 값은 합법적 일 수 있지만 (적어도 확실하지는 않지만) 적어도 나에게는 의심스러운 값입니다. 그들은 당신이하는 일을 이해하지 못하게합니다. 그들을 제거하는 것이 좋습니다.

또한 일반적으로 따옴표를 사용하면 엉망입니다 ... 나를 믿어주세요. 정리하면 자신의 코드를 훨씬 잘 이해할 수 있습니다.

그러나 귀하의 경우 주요 사항은 다음과 같습니다. JavaScript 문제를 해결하기 위해 브라우저에 렌더링 된 코드를 살펴보십시오. 맨 먼저. 당신이 스쿼시하려고하는 특정 버그가 템플릿 구문/로직/etc로 인한 것인가 아니면 클라이언트 자바 스크립트 때문인지 여부는 협의 할 것입니다. 어쨌든, 특별히 장고 문제가 아닙니다 그 자체는입니다.

출처

2012-03-24 15:08:21 fish2000

코드를 정리했지만 @ fish2000이 언급했듯이이 코드는 여전히 더러운 방법입니다. 내가 해낸 다음 http://jsfiddle.net/TeEHU/

조금 내가 무슨 짓을했는지, 내가 설치를 설명하기 위해 :

<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에서 기본 예제를 통해 쓴 처음에는 축소판과 호버를 모두 보관할 수있는 몇 개의 JavaScript 배열이 있습니다. 처음에는 URL을 참조하는 문자열 배열을 만들려고했으나 Image 객체를 사용하여 이미지를 미리로드하는 방법과 일치했습니다.

여기에서 앵커 태그에서 정의한 이벤트 처리기 특성을 제거하고 이미지 태그로 옮겨서 사용자가 이미지 위에 마우스를 올려 놓았을 때 이미지 특성에 직접 액세스 할 수있었습니다.

저는 일반적으로 서버 쪽에서 동적 JavaScript를 생성하는 것을 용인하지 않지만 코드와 일관성을 유지하려고했습니다.

출처

2012-03-24 17:26:44

onmouseover JavaScript의 문제점 (django 및 django-imagekit을 사용하여 렌더링)

답변

관련 문제