'이미지'에 해당되는 글 2건

  1. 2012.01.26 이미지 순차적으로 스위칭
  2. 2011.04.06 이미지롤오버
web standard/jquery2012. 1. 26. 11:42

이미지 순차적으로 스위칭

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta name="viewport" content="user-scalable=no, initial-scale = 1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<script type="text/javascript">
var num = 1;
$(document).ready(function() {
    $("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
    $("ul.paging li.prev").click(function() {
        num--;
        if (num < 0) {num = 0; };
        $("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
    });
    $("ul.paging li.next").click(function() {
        num++;
        var max=($("ul.tabMenu01 li").size())-1;
        $("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
    });
});
</script>
<style>
* {margin:0;padding:0;}
img {width:100%;border:none;}
</style>
</head>
<body>
<div class="tabCont">
    <div class="cont"><img src="sian_01.jpg" usemap="#link1" alt="" /></div>
</div>
<ul class="paging">
    <li class="prev">prev</li>
    <li class="next">next</li>
</ul>
</body>
</html>
저작자표시 비영리

'web standard > jquery' 카테고리의 다른 글

수평네비게이션 기초  (0) 2012.02.13
수직네비게이션 기초  (0) 2012.02.13
스크롤 따라다니는 퀵메뉴  (0) 2011.11.21
iframe 다루기  (0) 2011.11.16
로그인 입력폼 description 제어  (0) 2011.11.09
Posted by 수라
web standard/jquery2011. 4. 6. 10:04

이미지롤오버

<script type="text/javascript">
<!--
$(function(){
    $("img.imgRollOver").mouseover(function(){
        $(this).attr("src",$(this).attr("src").replace("_off","_on"));
    });
    $("img.imgRollOver").mouseout(function(){
        $(this).attr("src",$(this).attr("src").replace("_on","_off"));
    });
});
//-->
</script>
<img src="img1_off.gif" class="imgRollOver" />
<img src="img2_off.gif" class="imgRollOver" />

'web standard > jquery' 카테고리의 다른 글

레이어팝업 브라우저 가운데 띄우기  (0) 2011.07.15
탭메뉴  (1) 2011.06.16
가로&세로 슬라이드  (0) 2011.04.04
jquery 예제모음  (0) 2011.03.22
베너 슬라이드&버튼이동  (0) 2011.02.22
Posted by 수라

티스토리툴바