2012-05-04 2 views
2

이미지 맵 작업 방법 및 코드 작성 방법을 잘 알고 있지만 이미지 맵 작성자를 사용하여 이미지 맵 코드를 생성 한 다음 HTML을 사용하여 깔끔하게 정리하는 것은 시간 낭비라는 것을 알고 있습니다. 그리고 나서, false를 반환하도록하고, 특히 큰 이미지 맵에 대해 href = "#"을 확인하도록하는 onclick 이벤트를 추가하는 모든 이미지 속성을 수동으로 추가하십시오.이미지 맵 생성기/생성기로 Javascript onclick 이벤트를 쉽게 추가 할 수 있습니까?

누구나 href urls를 추가하는 것과 반대로 Javascript 이벤트 (예 : onclick)를 직접 추가 할 수있는 이미지 크리에이터를 알고 있습니까? 나중에 수동으로 코드를 편집해야합니까?

+1

왜 수동으로하는 대신이 모든 작업을 수행하는 자바 스크립트를 작성하지 않는 것이 좋을까요? 런타임에 이벤트 처리기를 연결하는 것은 큰 문제가 아닙니다. –

+0

저는이 작업을 빨리하고 싶습니다. 큰 프로젝트 나 그 무엇이든 마찬가지입니다. 나는 Tiddlywiki를 사용하고 있으며, 문서화를 위해 이미지를 사용하는 tiddler에 대한 링크를 만들고 싶습니다. 이미지 맵 생성 도구를 사용하여 이미지 맵을 만드는 것은 쉽지만, 찾은 것 중 어느 것도 자바 스크립트 이벤트를 빠르게 추가하는 것을 지원하지 않는 것 같습니다. 저는 여러분이하는 말은 쉽지만 프로그램에서 코드가 아닌 다른 모든 것과 동일한 방식으로 간단하게 생성 될 수있는 이유를 알고 있습니다. – leeand00

+0

난 그냥 기존 프로젝트를 편집하고 거기에 추가 할 수 있지만 그 시간이 없어 ... 나는이 "시각적 문서"를 어떤 사람들을 위해 쓰고 싶다. – leeand00

답변

1

이 문제를 잘못된 방법으로 해결하려고합니다. 이 문제는 이미지 맵 작성과 관련이 없으며 HTML 조작과 관련이 있습니다. 이미지 맵의 태그에 대한 고유 한 특징은 없습니다.

그래서 당신은 HTML로하고 싶은 물건을 잔뜩 가지고 있는데, 그것은 이미지 맵일 것입니다. HTML을 조작하기 위해 특별히 설계된 것을 사용하지 않는 것이 좋습니다. jQuery, 문제를 해결하려면?

"온 클릭 이벤트를 추가하는 그들을 false를 반환 가진, 그리고 HREF = 것을 확인"jQuery를이기 때문에 #이 ... "

$('area').attr('href','#'); 
$('area').attr('onclick','.. whatever you want ...'); 

그냥 자바 스크립트 도구는 사용할 수 없습니다 의미하지 않는다 Chrome에서 마우스 오른쪽 버튼을 클릭하여 요소 "HTML로 복사"를 검사하십시오.

이제는 onclick 속성을 추가하기 위해 jQuery를 사용하면 이벤트 처리기를 추가해야하기 때문에 일반적으로 의미가 없습니다 . 그러나 하드 코딩 된 HTML로 복사/붙여 넣기 할 HTML을 제작하려는 경우이 작업을 수행 할 수 있습니다. 그러나 일반적으로 "onclick"은 av 전염병처럼, 특히 (당신이 말한대로) 많은 요소를 가진 이미지 맵을 가지고있는 것처럼 보입니다. 대역폭 낭비입니다. 어쨌든 자바 스크립트 핸들러를 바인딩하고 있기 때문에 이미 페이지에서 javascript를 실행하고있는 것입니다. 왜 자바 스크립트를 사용하여 핸들러를 바인딩하지 않습니까?

+0

나는 대역폭을 낭비하지 않았습니다. 나는 Tiddlywiki에서 기록을 남기고있다. Tiddlywiki가 내 thumbdrive에 있습니다. 그러나 당신이 만드는 요점이 여전히 대부분의 상황에 대해 유효하지는 않습니다. 귀하의 제안에 감사드립니다. 나는 단지 뭔가 빨리하려고 노력하고있다. **** shrugs **** – leeand00

+0

음, 예, 대역폭은 요즘 무엇을 의미합니까? 몇 나노초를 절약하는 것에 그다지 도움이되지 않습니다. 일반적으로 이벤트 처리기를 스크립트에서 바인딩하는 것만으로는 하드 코딩하는 것보다 좋을 것입니다. 그들이 말하는 것처럼 "부끄럽지 않은 html". 그러나 모든 것에 대한 유스 케이스가 있다고 확신하고 Tiddlywiki가 무엇인지 모릅니다. 따라서 아마도 상황에 맞는 것일 수 있습니다. –

+0

Tiddlywiki는 서버가 필요없고 썸 드라이브에 앉아있는 위키입니다. 자체 수정 html 파일입니다. – leeand00