자바스크립트 hover animation 추가
본문
html
<img id="logo_img" src="<?php echo G5_IMG_URL; ?>/logo_ex1.png"
onmouseover="hover(this);" onmouseout="unhover(this);" />
javascript
function hover(element) {
element.setAttribute('src', '<?php echo G5_IMG_URL; ?>/logo_ex2.png');
}
function unhover(element) {
element.setAttribute('src', '<?php echo G5_IMG_URL; ?>/logo_ex1.png');
}
현재 코드는 이러합니다. hover시 이미지가 바뀌도록 했는데,
저는 추가적으로 fade in과 같은 부드러운 전환 효과를 주고싶습니다.
자바스크립트에 어떤 함수를 추가해야할까요??
답변 기다리겠습니다 :)
답변 3
hover시 바뀌는 에니메이션이라 감이 잡히지 않네요,, 보내주신 링크는 자동으로 바뀌는 에니메이션의 경우더라구요! 그래도 참고해서 문제 해결해보겠습니다 감사합니다
이미지 전환하는 걸 자바스트립트로 사용해서 fade in/out을 자바스크립트에서 어떻게 줘야할지 모르겠습니다ㅠㅠ
꼭 자바스크립트로만 하셔야 하는 이유가 있을까요..?
같은 div 에 이미지 2장넣고 hover시 바껴야할 이미지는 opacity:0 으로 해놓고
css로 호버했을때 서로 opacity 만 조절하면 될거같은데요..
div로 주면 이미지 자체의 사이즈 조정이 안되더라구요... 그래도 다시 한번 해봐야겠습니다 감사합니다
답변을 작성하시기 전에 로그인 해주세요.