html
Copy
<img id="logo_img" src="<?php echo G5_IMG_URL; ?>/logo_ex1.png"
onmouseover="hover(this);" onmouseout="unhover(this);" />
javascript
Copy
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개 / 댓글 3개
채택된 답변
+20 포인트
4년 전
https://www.python2.net/questions-644157.htm
위 사이트로 참조하시면 됩니다.
답변에 대한 댓글 1개
4년 전
hover시 바뀌는 에니메이션이라 감이 잡히지 않네요,, 보내주신 링크는 자동으로 바뀌는 에니메이션의 경우더라구요! 그래도 참고해서 문제 해결해보겠습니다 감사합니다
4년 전
꼭 자바스크립트로만 하셔야 하는 이유가 있을까요..?
같은 div 에 이미지 2장넣고 hover시 바껴야할 이미지는 opacity:0 으로 해놓고
css로 호버했을때 서로 opacity 만 조절하면 될거같은데요..
답변에 대한 댓글 1개
4년 전
https://jess2.xyz/css/fade-in-out/
css 트렌지션을 활용해보세요
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.