[PHPとweb]


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

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

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

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:2007/10/14 16:09:27
  • 終了:2007/10/21 16:10:57

回答(3件)

id:kou32rr No.1

kou32rr回答回数197ベストアンサー獲得回数82007/10/14 16:58:38

ポイント27pt

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

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

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

id:countd

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

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

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

2007/10/14 17:19:37
id:GoldenDawn No.2

GoldenDawn回答回数426ベストアンサー獲得回数812007/10/15 10:34:53

ポイント27pt

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

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 を使えば少しはましかもしれませんが。

id:countd

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

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

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


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

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

2007/10/15 13:21:03
id:GEN111 No.3

GEN111回答回数472ベストアンサー獲得回数582007/10/15 15:54:40

ポイント26pt

一例として……

<!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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません