JavaScript + Ajax 実践サンプル集 - イメージを部分的に拡大する

イメージを部分的に拡大する

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、イメージにスタイルシートを適用してイメージを部分的に拡大表示します。サンプルが表示されたらサムネイルにマウスを移動します。すると右側にマウスがポイントしている部分が拡大表示されます。

anchor要素にCSSの:hover擬似クラスを定義して拡大されたイメージのleftプロパティを書き換えることによりサムネイルを部分的に拡大表示しています。

.frame a:hover i em
{
  display: block;
  width: 540px;
  height: 720px;
  background: url(images/bird.jpg);
  position: absolute;
}
.frame a.c1:hover i
{
  left: 200px;
}
.frame a.c2:hover i
{
  left: 140px;
}
.frame a.c3:hover i
{
  left: 135px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Image Magnifier</title>
 <link href="DhtmlAdvanced/imageMagnifier/style.css" rel="stylesheet" type="text/css" />
</head>

<body >

</div>
 source: <a href="http://cssplay.co.uk">cssplay.co.uk</a> 
 </div> 
</div>

</body>
</html>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
.frame
{
  width: 180px;
  height: 240px;
  background: url(images/bird-small.jpg);
  font-size: 1px;
  margin-left: 10px;
}
.frame a
{
  display: block;
  float: left;
  width: 5px;
  height: 5px;
  cursor: crosshair;
  position: relative;
  z-index: 10;
}

.frame a.r1, .frame a.r26
{
  height: 60px;
}

.frame a.c1, .frame a.c14
{
  width: 60px;
}

.frame a:hover
{
  direction: ltr;
  position: relative;
  z-index: 1;
}
.frame a:hover b
{
  display: block;
  position: absolute;
  width: 118px;
  height: 118px;
  top: -60px;
  left: -60px;
  border: 1px solid #000;
  background: #fff;
  filter: alpha(opacity=30);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
  opacity: 0.3;
}
.frame a.r1:hover b
{
  top: 0;
}
.frame a.c1:hover b
{
  left: 0;
}

.frame a:hover i em
{
  display: block;
  width: 540px;
  height: 720px;
  background: url(images/bird.jpg);
  position: absolute;
}

.frame a:hover i
{
  display: block;
  width: 360px;
  height: 360px;
  position: absolute;
  overflow: hidden;
  top: 0;
}

.frame a.c1:hover i
{
  left: 200px;
}
.frame a.c2:hover i
{
  left: 140px;
}
.frame a.c3:hover i
{
  left: 135px;
}
.frame a.c4:hover i
{
  left: 130px;
}
.frame a.c5:hover i
{
  left: 125px;
}
.frame a.c6:hover i
{
  left: 120px;
}
.frame a.c7:hover i
{
  left: 115px;
}
.frame a.c8:hover i
{
  left: 110px;
}
.frame a.c9:hover i
{
  left: 105px;
}
.frame a.c10:hover i
{
  left: 100px;
}
.frame a.c11:hover i
{
  left: 95px;
}
.frame a.c12:hover i
{
  left: 90px;
}
.frame a.c13:hover i
{
  left: 85px;
}
.frame a.c14:hover i
{
  left: 80px;
}

.frame a.r1:hover i
{
  top: 0;
}
.frame a.r2:hover i
{
  top: -60px;
}
.frame a.r3:hover i
{
  top: -65px;
}
.frame a.r4:hover i
{
  top: -70px;
}
.frame a.r5:hover i
{
  top: -75px;
}
.frame a.r6:hover i
{
  top: -80px;
}
.frame a.r7:hover i
{
  top: -85px;
}
.frame a.r8:hover i
{
  top: -90px;
}
.frame a.r9:hover i
{
  top: -95px;
}
.frame a.r10:hover i
{
  top: -100px;
}
.frame a.r11:hover i
{
  top: -105px;
}
.frame a.r12:hover i
{
  top: -110px;
}
.frame a.r13:hover i
{
  top: -115px;
}
.frame a.r14:hover i
{
  top: -120px;
}
.frame a.r15:hover i
{
  top: -125px;
}
.frame a.r16:hover i
{
  top: -130px;
}
.frame a.r17:hover i
{
  top: -135px;
}
.frame a.r18:hover i
{
  top: -140px;
}
.frame a.r19:hover i
{
  top: -145px;
}
.frame a.r20:hover i
{
  top: -150px;
}
.frame a.r21:hover i
{
  top: -155px;
}
.frame a.r22:hover i
{
  top: -160px;
}
.frame a.r23:hover i
{
  top: -165px;
}
.frame a.r24:hover i
{
  top: -170px;
}
.frame a.r25:hover i
{
  top: -175px;
}
.frame a.r26:hover i
{
  top: -180px;
}


.frame a.c1:hover em
{
  left: 0px;
}
.frame a.c2:hover em
{
  left: 0px;
}
.frame a.c3:hover em
{
  left: -15px;
}
.frame a.c4:hover em
{
  left: -30px;
}
.frame a.c5:hover em
{
  left: -45px;
}
.frame a.c6:hover em
{
  left: -60px;
}
.frame a.c7:hover em
{
  left: -75px;
}
.frame a.c8:hover em
{
  left: -90px;
}
.frame a.c9:hover em
{
  left: -105px;
}
.frame a.c10:hover em
{
  left: -120px;
}
.frame a.c11:hover em
{
  left: -135px;
}
.frame a.c12:hover em
{
  left: -150px;
}
.frame a.c13:hover em
{
  left: -165px;
}
.frame a.c14:hover em
{
  left: -190px;
}

.frame a.r1:hover em
{
  top: 0;
}
.frame a.r2:hover em
{
  top: 0;
}
.frame a.r3:hover em
{
  top: -15px;
}
.frame a.r4:hover em
{
  top: -30px;
}
.frame a.r5:hover em
{
  top: -45px;
}
.frame a.r6:hover em
{
  top: -60px;
}
.frame a.r7:hover em
{
  top: -75px;
}
.frame a.r8:hover em
{
  top: -90px;
}
.frame a.r9:hover em
{
  top: -105px;
}
.frame a.r10:hover em
{
  top: -120px;
}
.frame a.r11:hover em
{
  top: -135px;
}
.frame a.r12:hover em
{
  top: -150px;
}
.frame a.r13:hover em
{
  top: -165px;
}
.frame a.r14:hover em
{
  top: -190px;
}
.frame a.r15:hover em
{
  top: -205px;
}
.frame a.r16:hover em
{
  top: -220px;
}
.frame a.r17:hover em
{
  top: -235px;
}
.frame a.r18:hover em
{
  top: -250px;
}
.frame a.r19:hover em
{
  top: -265px;
}
.frame a.r20:hover em
{
  top: -290px;
}
.frame a.r21:hover em
{
  top: -305px;
}
.frame a.r22:hover em
{
  top: -320px;
}
.frame a.r23:hover em
{
  top: -335px;
}
.frame a.r24:hover em
{
  top: -350px;
}
.frame a.r25:hover em
{
  top: -365px;
}
.frame a.r26:hover em
{
  top: -380px;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="DhtmlAdvanced/imageMagnifier/style.css" rel="stylesheet" type="text/css" />

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div class="frame">
  <a class="r1 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r1 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r1 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r1 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r1 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r1 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r1 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r1 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r1 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r1 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r1 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r1 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r1 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r1 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r2 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r2 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r2 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r2 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r2 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r2 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r2 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r2 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r2 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r2 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r2 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r2 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r2 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r2 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r3 c1" href="#x"><b></b><i><em></em></i></a>

  <a class="r3 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r3 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r3 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r3 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r3 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r3 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r3 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r3 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r3 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r3 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r3 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r3 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r3 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r4 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r4 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r4 c3" href="#x"><b></b><i><em></em></i></a>

  <a class="r4 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r4 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r4 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r4 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r4 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r4 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r4 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r4 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r4 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r4 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r4 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r5 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r5 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r5 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r5 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r5 c5" href="#x"><b></b><i><em></em></i></a>

  <a class="r5 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r5 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r5 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r5 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r5 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r5 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r5 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r5 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r5 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r6 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r6 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r6 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r6 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r6 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r6 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r6 c7" href="#x"><b></b><i><em></em></i></a>

  <a class="r6 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r6 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r6 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r6 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r6 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r6 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r6 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r7 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r7 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r7 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r7 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r7 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r7 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r7 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r7 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r7 c9" href="#x"><b></b><i><em></em></i></a>

  <a class="r7 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r7 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r7 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r7 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r7 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r8 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r8 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r8 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r8 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r8 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r8 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r8 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r8 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r8 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r8 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r8 c11" href="#x"><b></b><i><em></em></i></a>

  <a class="r8 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r8 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r8 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r9 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r9 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r9 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r9 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r9 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r9 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r9 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r9 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r9 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r9 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r9 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r9 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r9 c13" href="#x"><b></b><i><em></em></i></a>

  <a class="r9 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r10 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r10 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r10 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r10 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r10 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r10 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r10 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r10 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r10 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r10 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r10 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r10 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r10 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r10 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r11 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r11 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r11 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r11 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r11 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r11 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r11 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r11 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r11 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r11 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r11 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r11 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r11 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r11 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r12 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r12 c2" href="#x"><b></b><i><em></em></i></a>

  <a class="r12 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r12 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r12 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r12 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r12 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r12 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r12 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r12 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r12 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r12 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r12 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r12 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r13 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r13 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r13 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r13 c4" href="#x"><b></b><i><em></em></i></a>

  <a class="r13 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r13 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r13 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r13 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r13 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r13 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r13 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r13 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r13 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r13 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r14 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r14 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r14 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r14 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r14 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r14 c6" href="#x"><b></b><i><em></em></i></a>

  <a class="r14 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r14 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r14 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r14 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r14 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r14 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r14 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r14 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r15 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r15 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r15 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r15 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r15 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r15 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r15 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r15 c8" href="#x"><b></b><i><em></em></i></a>

  <a class="r15 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r15 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r15 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r15 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r15 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r15 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r16 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r16 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r16 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r16 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r16 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r16 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r16 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r16 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r16 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r16 c10" href="#x"><b></b><i><em></em></i></a>

  <a class="r16 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r16 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r16 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r16 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r17 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r17 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r17 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r17 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r17 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r17 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r17 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r17 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r17 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r17 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r17 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r17 c12" href="#x"><b></b><i><em></em></i></a>

  <a class="r17 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r17 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r18 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r18 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r18 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r18 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r18 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r18 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r18 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r18 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r18 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r18 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r18 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r18 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r18 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r18 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r19 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r19 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r19 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r19 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r19 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r19 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r19 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r19 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r19 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r19 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r19 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r19 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r19 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r19 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r20 c1" href="#x"><b></b><i><em></em></i></a>

  <a class="r20 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r20 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r20 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r20 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r20 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r20 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r20 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r20 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r20 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r20 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r20 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r20 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r20 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r21 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r21 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r21 c3" href="#x"><b></b><i><em></em></i></a>

  <a class="r21 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r21 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r21 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r21 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r21 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r21 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r21 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r21 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r21 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r21 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r21 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r22 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r22 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r22 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r22 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r22 c5" href="#x"><b></b><i><em></em></i></a>

  <a class="r22 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r22 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r22 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r22 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r22 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r22 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r22 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r22 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r22 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r23 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r23 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r23 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r23 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r23 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r23 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r23 c7" href="#x"><b></b><i><em></em></i></a>

  <a class="r23 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r23 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r23 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r23 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r23 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r23 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r23 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r24 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r24 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r24 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r24 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r24 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r24 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r24 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r24 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r24 c9" href="#x"><b></b><i><em></em></i></a>

  <a class="r24 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r24 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r24 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r24 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r24 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r25 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r25 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r25 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r25 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r25 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r25 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r25 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r25 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r25 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r25 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r25 c11" href="#x"><b></b><i><em></em></i></a>

  <a class="r25 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r25 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r25 c14" href="#x"><b></b><i><em></em></i></a>

  <a class="r26 c1" href="#x"><b></b><i><em></em></i></a>
  <a class="r26 c2" href="#x"><b></b><i><em></em></i></a>
  <a class="r26 c3" href="#x"><b></b><i><em></em></i></a>
  <a class="r26 c4" href="#x"><b></b><i><em></em></i></a>
  <a class="r26 c5" href="#x"><b></b><i><em></em></i></a>
  <a class="r26 c6" href="#x"><b></b><i><em></em></i></a>
  <a class="r26 c7" href="#x"><b></b><i><em></em></i></a>
  <a class="r26 c8" href="#x"><b></b><i><em></em></i></a>
  <a class="r26 c9" href="#x"><b></b><i><em></em></i></a>
  <a class="r26 c10" href="#x"><b></b><i><em></em></i></a>
  <a class="r26 c11" href="#x"><b></b><i><em></em></i></a>
  <a class="r26 c12" href="#x"><b></b><i><em></em></i></a>
  <a class="r26 c13" href="#x"><b></b><i><em></em></i></a>
  <a class="r26 c14" href="#x"><b></b><i><em></em></i></a>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

イメージを部分的に拡大する

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

イメージを部分的に拡大する

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!