人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

xoopscubeでのコンテンツ作成において質問です。
オンマウスで画像がポップアップするページをtinydモジュール内で作成したいのですが
作成方法を教えてください。
ヒントとなるサイト紹介でも結構です。


●質問者: kaji0245
●カテゴリ:インターネット ウェブ制作
✍キーワード:コンテンツ サイト ポップアップ マウス モジュール
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●60ポイント

以下のページで紹介されているCSSを使ってポップアップを実現する方法を使ってみてはいかがでしょう。

http://garage.mods.jp/ex/css-popup/

CSSソース

.popup img.pop {

display:block;

top:-10000px;

left:-10000px;

position:absolute;

}

.popup a:hover {

position:relative;

}

.popup a:hover img.pop {

top:-256px;

left:0;

}

このソースをおなじみの「<style type="text/css"><!--」と「--></style>」で囲んで、tinydのモジュールの一般設定の「全コンテンツ共通HTMLヘッダ」に指定します。

ポップアップする画像の表示位置は、「.popup a:hover img.pop」に指定している「top」と「left」で変更できます。

※コンテンツ(ページ)ごとに違う表示位置にしたい場合は、コンテンツの作成または編集時に「HTMLヘッダ」に指定してください。


HTMLソース

<div class="popup">

<a href=""><img class="pop" width="128" height="128" alt="firefox icon" src="http://garage.mods.jp/blog/image/icns/firefox.png" /><img width="128" height="128" alt="サムネイル" src="http://garage.mods.jp/blog/image/icns/firefox.png" /></a>

</div>

後は、コンテンツの編集エリアに上記のようになるようにHTMLを記述するといいです。

※上がポップアップで表示される画像で、下が最初から表示される画像です。

イメージマネージャーで挿入した後で、通常のimgタグに変更すれば良いと思います。

※両方の画像をdivとaタグで囲んでいる事と、divとimgへのクラス指定に注意してください。

◎質問者からの返答

ご丁寧な回答、感謝申し上げます。

早速、試してみます<( _ _ )>

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ