[문의] 마격기 질문드립니다.

한번 더 찾아왔네요. 아는건 없고 여기저기서 스크립트 긁어다 만들다 보니 아무리 보고 또 봐도 뭔지 알수가 없어서 문의 드립니다.

이미지 마격기를 만들어보려고 하는데요, 

기본 이미지

https://upload2.inven.co.kr/upload/2017/08/11/bbs/i16013493611.png

마우스 오버 이미지

https://upload2.inven.co.kr/upload/2017/08/11/bbs/i14187835677.png

마우스 클릭 이미지 (attack-all)

 

https://media.giphy.com/media/XyfeYh5HF49cA/giphy.gif

1. 마우스 오버 까지는 구현을 했는데 마우스 클릭은 어떻게 구현을 해야하는지 모르겠네요. span 대신 div도 써보고 옵션도 하나하나 만져 보았는데 도저히 모르겠습니다. 마우스 클릭도 지원이 되... 는 거겠죠? 

2. 마우스 클릭 이미지가 opacity로 숨겨진다는걸 생각했을때, 페이지가 로딩 되면 이미 gif 파일이 재생중일텐데요. 중간부터 보이는 일이 없게 클릭 과 동시에 재생이 시작되도록 만들 수 있을까요? 

3. 마음같아서는 마격 사용 확인창이 스킵되게 만들고 싶은데 그건 가능한 문제인가요?

참 자잘하고 어떻게 보면 멍청해 보일수도 있는 질문에 일일이 답변해 주시느라 수고 많으십니다. 주말 잘 보내세요 :)

<!-- final attack main image -->

<div style='background: url("https://upload2.inven.co.kr/upload/2017/08/11/bbs/i16013493611.png") no-repeat; background-size: contain; margin: 0px 0px; border-radius: 0px; border: 0px solid white; border-image: none; width: 450px; height: 165px; overflow: hidden; display: inline-block;'>

<!-- final attack mouse over image -->

<div style="background: url(https://upload2.inven.co.kr/upload/2017/08/11/bbs/i14187835677.png); transition:0.4s; width: 450px; height: 165px; opacity: 0; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;"

data-inven-over-css="{'_SELF_':{'opacity':'1'}}"

data-inven-out-css="{'_SELF_':{'opacity':'0'}}">

<!-- final attack default nick -->

<div data-inven-action data-inven-nick-default="oLord" style="border:0px;padding:0;margin:0;">

<!-- hide final attack input -->

<span data-inven-attr-for="input" style="display:none;"></span>

<!-- final attack click image -->

<span data-inven-attr-for="last-attack-all" style="background: url(https://media.giphy.com/media/XyfeYh5HF49cA/giphy.gif); transition:0.4s; width: 450px; height: 165px; opacity: 0; color: rgba(255, 255, 255, 0); vertical-align: middle; display: table-cell;"

data-inven-text=""

data-inven-over-css="{'_SELF_':{'opacity':'0'}}"

data-inven-out-css="{'_SELF_':{'opacity':'0'}}"

data-inven-click-css="{'_SELF_';{'opacity':'1'}}"></span>

</div></div></div>