태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

이미지에 마우스 오버시 효과주기

12년 전

1. 마우스 오버시 상품 이미지 흐릿하게 해주기

<img src='{상품이미지변수}' onmouseover='this.style.filter="alpha(opacity=20)"' onmouseout='this.style.filter=""'>
            숫자 20 값을 변경해서 흐릿한 정도를 변경 할 수 있다. 100이면 흐릿함이 없음

2. 마우스 오버시 상품 이미지 흑백으로 하기

<img src='{상품이미지변수}' onmouseover='this.style.filter="gray"' onmouseout='this.style.filter=""'>
            gray 라고 적힌것으로 흑백처리된다.

3. 마우스 오버시 상품 이미지 주변에 테두리 주기

<img border=3 style='border-color:#ffffff' src='{상품이미지변수}' onmouseover='this.style.borderColor="darkgray"' onmouseout='this.style.borderColor="#ffffff"'>
            border=3을 미리 주지 않으면? 마우스 오버시 그림이 약간 움직이므로 주의해야한다.

           (크기변화 때문, 값 3은 적용해보며 적절한 값으로 수정 할 수 있다.)

           따라서 border=3 과 바탕색(borde-color)을 미리 줘야한다.

추천 목록

번호	제목
115	제이쿼리 랜덤으로 배경색 변경
114	CSS border-image 속성
113	이미지 없을때 대체 이미지 출력
112	3D 입체 갤러리 (바람개비 느낌) 상,하,좌,우 드래그 가능
111	3D 입체 갤러리
110	썸네일 소스[GD 사용]
109	PHP를 이용한 이미지 사이즈 편집마스터
108	이미지의 가로크기가 지정한 것보다 크면 자동 크기 축소/확대
107	이미지가 지정크기보다 클 때만 자동리사이즈
106	1 분마다 빠뀌는 배경
105	html 파일 없이 이미지 크기대로 창 띄우기 - 스크립트소스
104	이미지가 없을때 noimg 출력
103	이미지 사이즈를 알려주는 함수
	이미지에 마우스 오버시 효과주기
101	배경이미지 왼쪽, 오른쪽, 가운데 에 고정시키기
100	미디어 플레이어, 버퍼링, 재생, 정지, 일시정지
99	텍스트 필드에 있는 이미지를 마우스 클릭시 사라지게 하기!
98	이미지크기로 새창띄우기, 띄운창 이미지 클릭하면 창닫기
97	jpg 로드무비시 프리로더 달기
96	레이어 안의 이미지 마우스로 지도 움직이듯이 이동하는 자바스크립트
95	태그로 png 투명 이미지 처리하기
94	배경이미지 고정(body/table) - background-repeat: no-repeat;
93	이미지를 지정된 비율로 자르기 (crop)
92	이미지 에러시 대체이미지 표현
91	jQuery 애니메이트로 만들어보는 이미지 슬라이더와 전광판
90	이미지의 색상을 내맘대로
89	jquery 이미지 슬라이드
88	jquery 이미지 뷰어
87	이미지 경로 에러시 대체 이미지 보여주기(엑박 안뜨게하기) - onError Event
86	HTML문서에 그라데이션 표현하기