オンマウスで画像がポップアップするページをtinydモジュール内で作成したいのですが
作成方法を教えてください。
ヒントとなるサイト紹介でも結構です。
以下のページで紹介されている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へのクラス指定に注意してください。
ご丁寧な回答、感謝申し上げます。
早速、試してみます<( _ _ )>