오픈마켓 정말 간단한 롤오버 이미지 만들기

1번 이미지

2번 이미지

위 두개의 이미지에 마우스를 갖다 대면 이미지가 바뀌게끔 만드는 방법 입니다. 두개의 이미지가 한개의 이미지처럼 보이면서 마우스의 움직임에 따라 서로 교차되면서 보여지는 효과 입니다.

먼저 1번 이미지와 2번 이미지를 준비합니다.

이미지 제작시 "1번 이미지"와 "2번 이미지"의 사이즈는 같게 만들어 줍니다.
서로 교차되면서 보여지기 때문에 사이즈가 다르면 이상하겠죠??


이미지를 롤오버하기 위해 보통 자바스크립트를 쓰게 되는데, 자바스크립트를 사용하지 않고 깔끔하게 이미지 태그만으로 이미지를 롤오버 할 수 있습니다.




실제 작성시 사용되는 소스는 다음과 같습니다.

<a href="새창 주소" onMouseOver="roll.src='2번 이미지 주소'" onMouseOut="roll.src='1번 이미지 주소'"><img src="1번 이미지 주소" name="roll" border="0"></a>

위 소스처럼 img 태그에 name 를(을) 정하고 링크태그에서 onMouseOver, onMouseOut을 호출하면 하면 됩니다.

새창으로 띄우려면 target="_blank" 를 지정합니다.

적용후
마우스를 갖다 대보세요~

이미지가 바뀌는게 보이시나요?
이렇게 자바스크립트를 사용하지 않고 태그만으로 롤오버 효과를 줄 수 있습니다.





최종 소스는 다음과 같습니다.
아래의 새창 주소는 새창으로 띄울 페이지 주소를 말합니다.

<a href="새창 주소" target="_blank" onMouseOver="roll.src='2번 이미지 주소'" onMouseOut="roll.src='1번 이미지 주소'"><img src="1번 이미지 주소" name="roll" border="0"></a>

한번씩 해보세요~ 정말 쉽네요.^^




[새창띄우기 기초] 오픈마켓 외부링크 차단, HTML, 새창띄우기, 상세페이지, 아이프레임, 팝업
[새창띄우기 기초] 오픈마켓 나모웹에디터를 이용한 롤오버 이미지 만들기
[새창띄우기 기초] 오픈마켓 옥션,G마켓,11번가 아이프레임(iframe) 높이(세로) 자동조절
[새창띄우기 기초] 자바스크립트를 이용한 오픈마켓 html 새창띄우기(window.open) 1탄
[새창띄우기 기초] 자바스크립트를 이용한 오픈마켓 html 새창띄우기(window.open) 2탄