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

[PHPとweb]

1.画像のonclickを契機にして、
2.Google Mapのような「半透明影」付きウィンドウ(このデザイン重要)を出し、
3.その中にデータベースから引っ張ってきたテキストを展開
4.ボタンかカーソル移動を契機に、フェイドアウトで消える(是非欲しい)

というものを頭の中で描いています。
例:rand()で決定・出力された動物画像をクリックするとそれについての説明が吹き出しで出る

MySQLデータベース付近から全体像で記述していただけると助かります。
データベース操作関係を基礎から分かりやすく学べるサイトも併せて募集します。

●質問者: シオン
●カテゴリ:インターネット ウェブ制作
✍キーワード:Google MAP MySQL PHP Rand
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● kou32rr
●27ポイント

まず、問題点の切り分けが必要です。

一度のスレッドでは解決しきれないかと。。。

3つに問題を分けてみました。

1.onclickでスタイル切替 (javascript)

2.Google Mapのような「半透明影」付きウィンドウ

これは良く分かりませんが、半透明な背景を出すことかと。

(これはcssの設定)

3.PHP+MySQLでプログラムを表示

/////////////////

作成手順としては、

ご質問の通りPHP+MySQLのページを作成し、

1、2のデザイン側の組込みになるかと思います。

ただ、一度に全部やるのは大変なので、

PHP+MySQLはCMSかブログシステムを活用するのがお勧めかと。。。

一から勉強するのであれば、アマゾンで本を検索するのがよいかと思います。

2の半透明背景ですが、

例えはhtmlとして、

<div id="overlay">半透明の背景</div>

<div id="popup">POPUPさせる内容</div>

※<>は半角に直してください。

cssに

#overlay{

position: absolute;

top: 0;

left: 0;

z-index: 90;

width: 1500px;

height: 1200px;

background-color: #000;

filter:alpha(opacity=60);

-moz-opacity: 0.6;

opacity: 0.6;

}

#popup{

width: 600px;

top: 150px;

left: 150px;

background-color: #FFFFFF;

border-top-width: 1px;

border-right-width: 2px;

border-bottom-width: 2px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #A58627;

border-right-color: #A58627;

border-bottom-color: #A58627;

border-left-color: #A58627;

position: absolute;

z-index: 100;

padding-top: 50px;

padding-right: 20px;

padding-bottom: 20px;

padding-left: 20px;

}

ポイントはoverlayのz-indexが90でpopupのz-indexが100で上になっていることです。

overlayのopacity=60は透明度です。

2.のjavascriptは、

getElementById や setElementClassById で検索すると、

1.で設定したcssスタイルをjavascriptで変更できる方法を探せると思います。

http://youmos.com/reference/set_element_class.html

◎質問者からの返答

実例付きのご回答、大変ありがとうございます。

ただいま簡易にテストしてみたんですが、これだとLightBoxのような画面全体の処理になってしまって…調整もしてみたんですが、どうも私のイメージと一致しませんでした。申し訳ありません。

GoogleMapで出るような、吹き出しの形に影を落とすような処理が欲しいです。ボックス自体は四角形でもいいんですが、、、LightBoxのような感じではなく、「ふわっと現れて、ふわっと消える」ような、Vistaライクなイメージのボックスが作りたいんですよ…贅沢ですね、自分のスキルを考えずに(;´д`)私ってば…


2 ● GoldenDawn
●27ポイント

半透明に関することを少し。

Google Map では次のようなアルファチャンネル (透明度) 付きの画像が使われています。

http://www.google.com/intl/ja_jp/mapfiles/iws2.png

http://www.google.com/intl/ja_jp/mapfiles/arrowshadow.png

ちなみに吹き出し部分は

http://www.google.com/intl/ja_jp/mapfiles/iw2.png


IE がちゃんとアルファチャンネル付きの画像に対応したのは IE7 からで、IE5.5 ? IE6 では AlphaImageLoader か VML を使うことになります。

http://www.minc.ne.jp/~konda/new/png/urawaza02.html

http://youmos.com/reference/alpha_transparency_png_vml

あと canvas を使う方法も有りますが、ちょっと簡単には説明しにくいですし、やはり IE ではいろいろ難があります。


ふわっと現れる、消えるというのは画像の半透明 + 全体の透明度を変化させればできるかもしれませんが、JavaScript でやるとちょっとしょぼいマシンでは「ふわっと」みたいな感じにはなかなかならないような気がします。

Flash を使えば少しはましかもしれませんが。

◎質問者からの返答

Flashですか…アレは触ったことがないからなぁ(;´д`)うむむ…妥協していくか…。

アルファチャンネルの処理がブラウザ・バージョン依存だとは思ってはいましたが、正規対応がIE7からとはなぁ。厳しい。

結局、どうもブラウザ・バージョンをある程度は関係なくいける解決策は、Flashとかでないと無理っぽいのかなぁ…。


えーと。新たにお願いを。

とりあえず、cssで何とかやってみようかと思います。全画面的でなく、画面の、それこそtop250px,left30%くらいの位置に、300×300pxの半透明影付き(いっそIE依存でもいいッス)ボックスを出すスクリプトをください!!!


3 ● GEN111
●26ポイント

一例として……

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="behavior:url(./fix.htc)" >
 <head>
 <style type="text/css">
 body {background:url(http://www.hatena.ne.jp/images/top/h1.gif);}
 </style>

 <script type="text/javascript">
 // Box出す
 function showBox() {
 if (document.getElementById('mybox')) return ; // すでにある場合は作らない。
 box = document.createElement('div') ;
 with (box) {
 id = "mybox" ;
 with (style) {
 if (navigator.appVersion.match(/MSIE (\d)+/) && RegExp.$1 < 7)
 filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="shadow.png")' ;
 else background = 'url(shadow.png) right bottom no-repeat' ;
 position = 'absolute' ;
 top = '250px' ;
 left = '30%' ;
 width = height = '330px' ;
 }
 }

 innerbox = document.createElement('div') ;
 with (innerbox) {
 innerHTML = 'boxですよ' ;
 with (style) {
 background = '#fff' ;
 width = height = '300px' ;
 }
 }

 box.appendChild(innerbox) ;
 document.body.appendChild(box) ;
 }

 // Box消す
 function deleteBox() {
 if (document.getElementById('mybox')) {
 document.body.removeChild(document.getElementById('mybox')) ;
 }
 }
 </script>
 </head>

 <body>
 <form>
 <input type="button" onclick="showBox()" value="だす" /><input type="button" onclick="deleteBox()" value="けす" />
 </form>
 </body>
</html>

shadow.png は次のを保存して使ってください。

f:id:GEN111:20071015152243p:image

関連質問


●質問をもっと探す●



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