이미지 - 배경유영 체인지

☞※컴자료실＊

이미지 - 배경유영 체인지

댄스사랑 2009. 5. 21. 15:08

이미지 - 배경유영 체인지

박스안에 이미지들이 움직이면서 서서히 배경으로 줌인,줌아웃됩니다.

다른 이미지박스를 클릭하시면 그 이미지가 배경으로 줌인체인지 되죠~

소스를 이용해 직접 만드시면 전체페이지가 배경이미지로 꽉 차게 보입니다.

보시는 화면은 아이프레임으로 나타낸 상태(800*600)입니다.

카페같은 곳에 만드실때는 현재와 같이 아이프레임으로 적당하게 보이게 하는 것이 좋겠죠?

소스는 아래쪽에 소스보기를 누르시고, 이미지주소만 연결해 이용하시기 바랍니다.

이미지는 배경용으로 가급적 큰 이미지를 이용하는 것이 좋습니다.

소스를 보실땐 아래 소스보기를 클릭하세요^^*

☞ 소스보기

☞ 닫기

<xhtml> <head> <script type="text/javascript">if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":5488581,"name":"chzh5792","title":"즐겁게살자","isDormancy":false,"nickName":"댄스사랑","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://chzh5792.tistory.com/m/6619572","DEFAULT_URL":"https://chzh5792.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":6619572,"isAuthor":false,"categoryId":594731,"categoryLabel":"☞※컴자료실＊"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "/m", url: "https://chzh5792.tistory.com", tistoryUrl: "https://chzh5792.tistory.com", manageUrl: "https://chzh5792.tistory.com/manage", token: "N64xnAxWhyTZmFMSbcIHV9N1DaR19E1bOLcxblct8cym4dUF9hu9qPC7IxpFh9ZM" }; var servicePath = ""; var blogURL = "";window.T.gnbContext = {"userId":0,"userName":"","profileSrc":"https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_03.png","storyServiceURI":{"storyHome":"https://storyhome.kakao.com/","brunchStory":"https://brunch.co.kr/","kakaoStory":"https://story.kakao.com/"},"blogs":[],"tryAutoLogin":false};</script> <style type="text/css"> .img {position:absolute;left:-10000;border:#000000 solid 1px;cursor:pointer;} </style> <xscript type="text/xxjavascript"> </xscript> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-920be92d8f7ce28f5366c321aed50b74408e6150/static/style/revenue.css"/> <link rel="canonical" href="https://chzh5792.tistory.com/6619572"/>  <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://chzh5792.tistory.com/m/6619572","name":null},"url":"https://chzh5792.tistory.com/m/6619572","headline":"이미지 - 배경유영 체인지","description":" 이미지 - 배경유영 체인지 > CUT-HEAR 박스안에 이미지들이 움직이면서 서서히 배경으로 줌인,줌아웃됩니다. 다른 이미지박스를 클릭하시면 그 이미지가 배경으로 줌인체인지 되죠~ 소스를 이용해 직접 만드시면 전체페이지가 배경이미지로 꽉 차게 보입니다. 보시는 화면은 아이프레임으로 나타낸 상..","author":{"@type":"Person","name":"댄스사랑","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2009-05-21T15:08:56+09:00","dateModified":"2009-05-21T15:08:56+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script>  </head> <xbody> <div id="IMG" style="z-index:1"> <img class=img [안내]태그제한으로등록되지않습니다-xxonclick="zyva(0)" src="이미지주소"> <img class=img [안내]태그제한으로등록되지않습니다-xxonclick="zyva(1)" src="이미지주소"> <img class=img [안내]태그제한으로등록되지않습니다-xxonclick="zyva(2)" src="이미지주소"> <img class=img [안내]태그제한으로등록되지않습니다-xxonclick="zyva(3)" src="이미지주소"> <img class=img [안내]태그제한으로등록되지않습니다-xxonclick="zyva(4)" src="이미지주소"> <img class=img [안내]태그제한으로등록되지않습니다-xxonclick="zyva(5)" src="이미지주소"> <img class=img [안내]태그제한으로등록되지않습니다-xxonclick="zyva(6)" src="이미지주소"> </div> </xbody> </xhtml>

function moreOpenaahacafe(){document.getElementById('btnheadaahacafe').style.display='none';document.getElementById('btntailaahacafe').style.display='';document.getElementById('moretailaahacafe').style.display=''; } function moreCloseaahacafe(){document.getElementById('btnheadaahacafe').style.display='';document.getElementById('btntailaahacafe').style.display='none';document.getElementById('moretailaahacafe').style.display='none'; }

출처:☞아하카페