◆ Cloud Zoom は、次のサイトから入手．
http://www.professorcloud.com/mainsite/cloud-zoom.htm
◆ JavaScript に関する Web ブラウザの設定
インターネットオプションの「セキュリティの設定」で， 「スクリプト」→「アクティブ スクリプトを有効にする」
メニューのツール→オプション→Web 機能の設定
js/cloud-zoom.1.0.2.js js/cloud-zoom.1.0.2.min.js styles/cloud-zoom.js
![[image]](https://www.kkaneko.jp/info/logo_png.png){kind=logo}
<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="MSThemeCompatible" CONTENT="yes" />
<title>
Cound Zoom を用いた画像ズーム表示
</title>
<!-- Load the Cloud Zoom CSS file -->
<link href="./styles/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!-- Load the Cloud Zoom JavaScript file -->
<script type="text/JavaScript" src="./js/cloud-zoom.1.0.2.min.js"></script>
</head>
<body>
<!--
An anchor with class of 'cloud-zoom' should surround the small image.
The anchor's href should point to the big zoom image.
Any options can be specified in the rel attribute of the anchor.
Options should be specified in regular JavaScript object format,
but without the braces.
-->
<a href='http://www.professorcloud.com/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
rel="adjustX: 10, adjustY:-4">
<img src="http://www.professorcloud.com/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />
</a>
<!--
You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
The anchor's href should point to the big zoom image.
In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
and also the small image to use (smallImage: /images/....)
-->
<a href='http://www.professorcloud.com/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
rel="useZoom: 'zoom1', smallImage: 'http://www.professorcloud.com/images/zoomengine/smallimage.jpg' ">
<img src="http://www.professorcloud.com/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>
<a href='http://www.professorcloud.com/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
rel="useZoom: 'zoom1', smallImage: ' http://www.professorcloud.com/images/zoomengine/smallimage-1.jpg'">
<img src="http://www.professorcloud.com/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>
<a href='http://www.professorcloud.com/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
rel="useZoom: 'zoom1', smallImage: 'http://www.professorcloud.com/images/zoomengine/smallimage-2.jpg' ">
<img src="http://www.professorcloud.com/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>
</body>
</html>
本サイトは金子邦彦研究室のWebページである．
資料等の公開では，原則，「クリエイティブコモンズ BY NC SA」として公開するようにしている． PDFファイル，パワーポイントファイルなどには， 「クリエイティブコモンズ BY NC SA」を明記するとともに，ロゴを記載するようにしている（作業が間に合っていない分もあるのでご容赦ください）．
公開している資料をご利用になる場合の，再配布の条件，剽窃の防止などについて，別ページ »で説明 再配布や資料改変の際には，そのページをご確認ください．
サイトマップは，サイトマップのページをご覧下さい． 本サイト内の検索は，サイト内検索のページをご利用下さい．
問い合わせ先： 金子邦彦（かねこ くにひこ） ![[image]](https://www.kkaneko.jp/info/kanekomail.png)