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 포인트
2021-05-26 (수) 21:51:29
https://www.python2.net/questions-644157.htm
위 사이트로 참조하시면 됩니다.
답변에 대한 댓글 1개
2021-05-27 (목) 00:25:04
hover시 바뀌는 에니메이션이라 감이 잡히지 않네요,, 보내주신 링크는 자동으로 바뀌는 에니메이션의 경우더라구요! 그래도 참고해서 문제 해결해보겠습니다 감사합니다
2021-05-27 (목) 09:55:03
꼭 자바스크립트로만 하셔야 하는 이유가 있을까요..?
같은 div 에 이미지 2장넣고 hover시 바껴야할 이미지는 opacity:0 으로 해놓고
css로 호버했을때 서로 opacity 만 조절하면 될거같은데요..
답변에 대한 댓글 1개
2021-05-27 (목) 11:27:15
div로 주면 이미지 자체의 사이즈 조정이 안되더라구요... 그래도 다시 한번 해봐야겠습니다 감사합니다
2021-05-26 (수) 22:37:20
https://jess2.xyz/css/fade-in-out/
css 트렌지션을 활용해보세요
답변에 대한 댓글 1개
2021-05-27 (목) 00:22:50
이미지 전환하는 걸 자바스트립트로 사용해서 fade in/out을 자바스크립트에서 어떻게 줘야할지 모르겠습니다ㅠㅠ
답변을 작성하려면 로그인이 필요합니다.