ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > 大きな疑問コーナー > title - クリックポップアップ画像

クリックポップアップ画像

クリックポップアップ画像は画像をクリックすると、そのページ上で画像が大きく表示されるJavaスクリプトツールです。

見本を作ったので別ページで見て下さい。  testクリックポップアップ見本20061018041830.gif
(画像をクリックすると大きな画像がポップアップされて開きます。ポップアップされた画像を閉じるには今度は大きな画像をクリックして下さい。)

作り方

1.管理画面の環境設定からテンプレートの設定→[編集]→HTMLの編集を開きます。

2.開いたら上の方にある</head><body>を探します。見つからない時は「Ctrl+F」を使って検索すると探しやすいと思います。
見つかったら</head>のすぐ上に以下のソースをコピーして張り付けます。

<script language="JavaScript">
<!--
function popupImage(filepath, width, height){
var y = 0;
var x = 0;
if (!popupImage.imgNode) {
if (document.all) {
y = document.body.scrollTop + 32;
x = document.body.scrollLeft + 32;
popupImage.imgNode = document.createElement('img');
popupImage.imgNode.attachEvent('onclick', closeImage);

} else if (document.implementation) {
y = window.pageYOffset + 32;
x = window.pageXOffset + 32;
popupImage.imgNode = document.createElement('img');
popupImage.imgNode.addEventListener('click' ,closeImage , true);

} else {
return;
}
}

with(popupImage){
imgNode.setAttribute('src', filepath );
if (width && height) {
imgNode.setAttribute('width', width );
imgNode.setAttribute('height', height );
}
imgNode.style.position = 'absolute';
imgNode.style.left = '32px';
imgNode.style.top = y + 'px';
imgNode.style.borderColor = '#0099FF';
imgNode.style.borderWidth = '2px';
imgNode.style.borderStyle = 'solid';
imgNode.style.margin = '0';
document.body.appendChild(imgNode);
}

function closeImage(){
if (popupImage.imgNode) {
document.body.removeChild(popupImage.imgNode);
delete popupImage.imgNode;
}
}
}
// -->
</script>

張り付けたら「更新」をクリックします。

3.次に記事を作る画面で画像を作る時に、
<img src="画像のアドレス" width="横幅" height="縦幅" onclick="popupImage('画像のアドレス')" />
と記入します。2つの画像のアドレスは同じ物です。
横幅・縦幅は小さい時(最初の状態)に表示したいサイズです。

4.これでいつもの様に記事を作って保存すればクリックポップアップ画像の出来上がりです。


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/593-49efd8e5   

Template Designed by DW99