XOOPS for you

This is JavaScript library
popup the image, when move the mouse over the text or the image.

using overLIB
http://www.bosrup.com/web/overlib/


* usage *

define JavaScript file
-----
<script type="text/javascript" src="overlib.js"></script>
<script type="text/javascript" src="overlib_image.js"></script>
-----

prepare div tag for showing popup
-----
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
-----

describe the popup image in following
-----
<a href="java script:void(0);" onmouseover="return overlib_image_popup('image.jpg');" onmouseout="return nd();">here</a>
-----


* using overLIB in XOOPS *

The width becomes long extraordinarily.

becuase width is defined as following in XOOPS's style sheet
-----
table {width: 100%; margin: 5; padding: 5; font-size: small}
-----

Therefore, I modified as following.
-----
function ol_content_simple(text) {
var cpIsMultiple = /,/.test(o3_cellpad);
var txt = '<table width="'+o3_width+ '" ...
-----

-----
// added style attiribute
var txt = '<table style="width:auto;" width="'+o3_width+
-----


* enclosed files *
- overlib.js ( modified for XOOPS )
- overlib_image.js

JavaScript ライブラリ
マウスを乗せると、画像がポップアップする

overLIB を利用しています
http://www.bosrup.com/web/overlib/


● 使用方法

JavaScript ファイルを呼ぶ
-----
<script type="text/javascript" src="overlib.js"></script>
<script type="text/javascript" src="overlib_image.js"></script>
-----

表示用の div タグを用意する
-----
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
-----

ポップアップさせる画像を下記のように記述する
-----
<a href="java script:void(0);" onmouseover="return overlib_image_popup('image.jpg');" onmouseout="return nd();">here</a>
-----


● overLIB を XOOPS で使用する場合

横幅が異常に長くなります。

これは、XOOPS のスタイルシートでは 下記のように width が設定されているためです。
-----
table {width: 100%; margin: 5; padding: 5; font-size: small}
-----


そこで、次のように修正しました。
-----
function ol_content_simple(text) {
var cpIsMultiple = /,/.test(o3_cellpad);
var txt = '<table width="'+o3_width+ '" ...
-----

↓

-----
// style 属性を追加
var txt = '<table style="width:auto;" width="'+o3_width+
-----


● 同封したファイル
- overlib.js ( XOOPS用に修正したもの )
- overlib_image.js