[학업] 마우스를 이용해 gif 재생, 멈춤에 대해서 여쭤봅니다.

[PILOT S10]

안녕하세요.

제가 학교에서 html 제작 조별과제를 하고 있습니다.

제가 구현하고자 하는 기능이 gif에 마우스를 올리면 재생이 되고 마우스를 떼면 멈추는 기능입니다.

문제는 제가 이 부분에 대해 잘 몰라서 이것저것 검색하다가 어떤 분께서 올리신 내용을 바탕으로 제가 가진 파일을 이용해 코드를 작성했는데, 아무리 해도 구현이 안 됩니다.

우선 제가 쓴 코드를 보여드리겠습니다.

src="" 부분에 ./gif/S90-static.gif"라는 내용이 들어갑니다.

코드 내용을 다 쓰니까 이미지 파일로 본문에 나타나길래 이렇게 다시 씁니다. 

$(".hov-anim").mouseover(

        function() {

            $(this).attr("src", $(this).data( "animated"))}),

        $(".hov-anim").mouseout(

            function() {

            $(this).attr("src", $(this).data( "static"))});

크롬으로 디버깅 검사를 할 수 있는 방법이 있길래 해 봤는데 $가 "undefined"라고 나옵니다.

근데 저렇게 나와도 저걸 어떻게 고치는지를 모르겠습니다.

며칠 동안 눈이 빠져라 검색하며 이것 저것 해 보는데 도통 안 되는 이유를 모르겠습니다.

누구한테 물어볼 사람이 없어서 여쭤봅니다.

죄송하지만 조언 좀 해 주실 수 있나요?

[와일드다운]

Animating a gif on hover 로 구글 검색

[PILOT S10]

검색어 추천 감사합니다.
우선 답변해 주신 걸 토대로 시도해보겠습니다.

[PILOT S10]

와일드다운님께도 감사하다는 말씀드립니다. 덕분에 검색하면서 이것저것 알게 돼서 도움이 많이 되었습니다. 간결한 검색어 추천! 감사합니다. ㅎㅎㅎ

[공허한벌레]

제이쿼리는 추가 된거 맞죠?
$는 제이쿼리일텐데

[PILOT S10]

저게 제이쿼리였군요.
자바스크립트로 하는 방법 찾다가 나온 코드라서 자바스크립트라고 생각하고 썼습니다.
<sc__ript> </sc__ript>
안에 그냥 쓰면 된다고 생각했습니다.

[공허한벌레]

다행이네요. 원인을 찾으셨으니, 저 문법을 기본 바닐라 자바스크립트로 구현해보셔도 좋을듯하고
반대로 제이쿼리를 학습하시면서 적용해보시는것도 방법일듯 하네요
화이팅입니다

[PILOT S10]

스크립트를 영어로 썼는데 ri부분이 왜 점선으로 표시되는지 잘 모르겠네요...
이것조차 제대로 모르는 바보라니...

[PILOT S10]

알려주셔서 감사합니다.

[공허한벌레]

저도 실제로 루리웹에서 어떻게 처리한지는 모르겠으나,
스크립트 태그를 입력하면 보통 시스템에서 치환을 시킵니다.
저 구문을 통해 막지 않으면 크로스사이트 스크립트 라는 기법을 이용해 여러가지 공격을 할 수 있거든요
배우시는 단계인듯한데 아직 왜저렇게 되는지 모를 수 있는 부분이 맞아요
열심히 하시는거 같은데 좋은 성과 얻으시고 좋은 IT인이 되셨으면 좋겠습니다

[PILOT S10]

감사합니다.

[PILOT S10]

문제 해결했습니다. $가 제어쿼리를 나타낸다는 걸 알려주셔서 감사합니다.

[PILOT S10]

시간이 지났지만 너무 단조롭게 감사합니다만 한 것 같아 다시 한번 댓글 씁니다.
사실 제가 IT와는 크게 관련없는 학과입니다.
전공 선택 과목 중에 IT 관련 전공이 있었고 현재 수강중인 강의가 이 과목입니다.
교수님께서 내주신 과제가 조별로 웹사이트를 만들어 발표하는 것입니다.
그런데 수업시간에 조금씩 배운 걸로는 갑작스럽게 뭔가 엄청난 걸 만든다는 게 엄청 힘들더라고요.
제가 맡은 부분이 gif라서 며칠 동안 시도하다가 안 돼서 고민글을 쓰게 된 겁니다.
과제하면서 공대생들의 고통(?)을 느낄 수 있었고 한편으론 재미도 있었습니다.
아직 발표날까지 기간이 남았지만 단순히 멀게만 느껴졌던 프로그래밍을 조금이나마 체험해 볼 수 있는 기회였습니다.
직접 부딪히며 배운 건 쉽게 안 잊어버린다는 말도 몸소 느끼게 되었습니다.
조언해 주셔서 감사합니다. 하시는 일 모두 잘 되셨으면 좋겠습니다.