모바일에서 롤오버 기능을 사용하고싶을때 어떻게 하시나요?

· 2014-08-18 (월) 15:09:01 · 3348 · 3

모바일에서 롤오버 기능을 사용하고싶을때 어떻게 하시나요?

제가 원하는 기능은

<a href="/"><img src="./m_menu2.png" onmouseover="this.src='./m_menu2_on.png'" alt="설명글"></a>

요거인데요 ~  요개 모바일에서 확인해보니 특정기종(아이폰5 / 아이폰5s 과 베가 아이언, 갤럭시 노트3 등)에서는 오버됐을때 이미지가 깨져서 나오더라고요 ~ 

 

여러곳을 검색해보니 onmouseover는 모바일에서는 사용못한다고 onclick으로 해보라고 하시더라고요 ~

그래서 <a href="/"><img src="./m_menu2.png" onclick="this.src='./m_menu2_on.png'" alt="설명글"></a>

으로 바꿔서 확인해보니 모바일에서 클릭했을때 이미지 바뀌는게 안먹히더라고요 ~~

pc에서 모바일 버전으로 바꿔서 클릭할땐 이미지가 바뀌는데 모바일에서는 왜 안바뀔까요??  ㅠㅠ

 

설명이 넘 뒤죽 박죽이라....  설명이해가 될지 모르겟네요 ~~ ^^

|

댓글 3개

롤오버 기능을 쓰시려면 터치로 하셔야 합니다.
모바일에서는 onclick 가 딜레이가 발생해서 인식이 느립니다.
ontouch 이벤트를 사용하시면 이 부분은 해결되지만 이것 또한 정석은 아닙니다. ontouchstart()
2014-08-20 (수) 10:49:44
답변 감사합니다 ^^
근데 <a href="/"><img src="./m_menu2.png" ontouch="this.src='./m_menu2_on.png'" alt="설명글"></a>
이렇게 넣어야하나요? 아님 자바스크립트 소스에서 따로 불러야하나요?
참 어렵네요 ~~ ㅠㅠ
예제
<div id="test_div" style="width:150px;height:150px;background:#ff6600;" ontouchstart="this.style.backgroundColor='#000';" ontouchend="this.style.backgroundColor='#666';">가나다라</div>

이렇게 넣으셔야 합니다.
물론 라인에다 쓰시면 좀 지저분해질수도 있으니 이왕이면 함수를 만들어 사용하시는것이 좋지 않을까 하네요.
댓글을 작성하시려면 로그인이 필요합니다.

토크

3,606건

오픈소스 관련 다양한 이야기를 자유롭게 나눠요

+
제목 글쓴이 날짜 조회
14-10-23 조회 2,977
14-10-07 조회 2,997
14-09-29 조회 2,725
14-09-25 조회 2,058
14-09-24 조회 1,830
14-09-18 조회 1,567
14-09-01 조회 5,323
14-08-22 조회 3,002
14-08-22 조회 2,155
14-08-19 조회 2,592
14-08-19 조회 2,100
14-08-18 조회 3,349
14-08-16 조회 2,121
14-08-12 조회 2,050
16-07-24 조회 934
16-07-21 조회 939
16-07-20 조회 1,006
16-07-15 조회 1,018
16-07-14 조회 1,448
16-07-13 조회 3,200
16-07-12 조회 1,444
16-07-12 조회 1,187
16-07-11 조회 893
16-07-08 조회 896
16-07-07 조회 1,105
16-07-04 조회 1,197
16-07-04 조회 976
16-07-04 조회 973
16-06-30 조회 1,133
16-06-27 조회 1,831