마우스를 대면 이미지가 확대 혹은 축소 됩니다.

위챗(微信)에 공유

네로 | 2002.06.30 13:18:59 댓글: 0 조회: 341 추천: 2

분류컴관련 강좌·팁 https://life.moyiza.kr/itstudy/1746949

링크에 마우스를 대면 이미지가 확대 및 욱소 되는 스크립트 입니다.
쇼핑몰 등에서 상품 이미지를 보여줄때 사용하면 좋을 것 같습니다



<script language="JavaScript1.2">

var zoomfactor=0.05 // 스케일을 설정 하세요(0.05=5%)

function zoomhelper(){
if (parseInt(whatcache.style.width)>10&&parseInt(whatcache.style.height)>10){
whatcache.style.width=parseInt(whatcache.style.width)+parseInt(whatcache.style.width)*zoomfactor*prefix
whatcache.style.height=parseInt(whatcache.style.height)+parseInt(whatcache.style.height)*zoomfactor*prefix
}
}

function zoom(originalW, originalH, what, state){
if (!document.all&&!document.getElementById)
return
whatcache=eval("document.images."+what)
prefix=(state=="in")? 1 : -1
if (whatcache.style.width==""||state=="restore"){
whatcache.style.width=originalW
whatcache.style.height=originalH
if (state=="restore")
return
}
else{
zoomhelper()
}
beginzoom=setInterval("zoomhelper()",100)
}

function clearzoom(){
if (window.beginzoom)
clearInterval(beginzoom)
}

</script>



</head>

<body>





<a href="#" onmouseover="zoom(200,200,'myimage','in')" onmouseout="clearzoom()">확대</a> |
<a href="#" onmouseover="zoom(200,200,'myimage','restore')">표준</a> |
<a href="#" onmouseover="zoom(200,200,'myimage','out')" onmouseout="clearzoom()">축소</a>
<br><br>

<div style="position:relative;width:200;height:200">
<div style="position:absolute">
<img name="myimage" src="../c1.jpg">
</div></div>



</body>
</html>

추천 (2) 선물 (0명)

로년세계 老年世界 최신간으로 발송

구술 연변 65년 문화교육편--口述延边65年文化教育篇

보혈에 좋은 중화요리/补血吃什么

湖光山色--맑은 호수,푸른 산

집 없는 아이--苦儿流浪记 입점신청

위챗 페이스북 트위터 웨이보 IP: ♡.108.♡.20

자료·공부 채널IT공부

총 3,006 개의 글이 있습니다.

제목	글쓴이	날짜	조회
처음 오신분들 필독!!![최종수정일:2003.9.21] 1		2003-09-20	11940
처음 오신분들 필독!!![최종수정일:2003.9.21] 9		2003-09-20	11488
처음 오신분들 필독!!![최종수정일:2003.10.26] 3		2003-09-20	20621
[SAP모임] SAP MM 자격증 공부 3	지구인	2010-08-27	19413
[SAP 모임] SAP 미니 프로젝트 진행 27	지구인	2009-09-07	13735
웹디자인 게시판 사용약관		2010-01-29	15692
공개소스 사용약관 1		2004-10-07	16784
339 [웹 프로그래밍] 엠보드 만들기(2-1) 1		2002-07-12	1571
338 [웹 프로그래밍] html 제 9 강 프레임 (2) 13		2002-07-11	1319
337 [컴관련 강좌·팁] 웹 브라우저가 한글인지 영문인지(다른 언어인지) 자동 인식하기...	네로	2002-07-10	485
336 [컴관련 강좌·팁] 중앙 정렬 메뉴 레이어 위치 지정하기	네로	2002-07-07	793
335 [컴관련 강좌·팁] 마퀴태그에 대한 비교적 상세한 설명 ^^	네로	2002-07-03	403
334 [컴관련 강좌·팁] 상태표시줄의 링크주소 대신 메시지 출력하기	네로	2002-07-03	430
333 [컴관련 강좌·팁] 마우스 오른쪽 버튼 & 드래그 방지	네로	2002-07-03	392
332 [컴관련 강좌·팁] 풍선도움말 예쁘게 하기	네로	2002-07-03	719
331 [컴관련 강좌·팁] 고정된 배경화면을 원하는 곳에 놓기	네로	2002-07-03	350
330 [컴관련 강좌·팁] 페이지 화면을 뽀얗게 만들어주는 태그^^	네로	2002-07-03	346
329 [컴관련 강좌·팁] 플래시 투명하게 하기	네로	2002-07-03	462
328 [컴관련 강좌·팁] 화면 정 가운데 내용 넣는 방법	네로	2002-07-03	594
327 [컴관련 강좌·팁] 이뿐 필드 테이블^^	네로	2002-07-03	396
326 [컴관련 강좌·팁] 오른쪽에서 왼쪽으로 글쓰는 언어 사이트 제작법	네로	2002-07-02	495
325 [컴관련 강좌·팁] 밑줄과 글씨의 색을 다르게 [예제포함]	네로	2002-06-30	448
324 [컴관련 강좌·팁] 마우스 오버시에 텍스트 버튼느낌 style.css 와 자동 스크롤 기능	네로	2002-06-30	588
[컴관련 강좌·팁] 마우스를 대면 이미지가 확대 혹은 축소 됩니다.	네로	2002-06-30	341
322 [웹 프로그래밍] 메일함수를 이용한 파일첨부 폼메일 3	네로	2002-06-22	960
321 [웹 프로그래밍] 메일함수를 이용한 파일첨부 폼메일 2	네로	2002-06-22	1170
320 [웹 프로그래밍] 메일함수를 이용한 파일첨부 폼메일 1	네로	2002-06-22	830
319 [웹 프로그래밍] 테이터 삽입 ( insert )	네로	2002-06-21	433