画像の中から泡が出る方法（javascript)

解決済

質問者：rundmark
質問日時：2009/05/28 23:04
回答数：1件

画像の中から泡が出る方法（javascript)

ホームページで画像だけ泡が出るようにしたいのです。

下記のようにしたいのですが、
http://jun89.xdap.jp/java17/gazoue3.html

ソースから自分の希望画像を張り替え、画面上から泡が出る現象を確認しました。
しかし、問題は画像が好きな所に動かすことができないのです。

gazx=200;//画像の位置、横方向。
gazy=100;//画像の位置、横方向。

の数字を変更すれば動かすことができますが、tableとかのものは後ろに隠れてしまいます。

ソースの中からこれを追加した方がいいよとか、これを変更すればいいよ
とかアドバイスを教えてもらえれば幸いです。

よろしくお願いします。

パソコンの環境
XP
ホームページビルダー8から作成

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「position 意味」に関するQ&A： inclined position　の意味

さらに表示

「JavaScript 画像」に関するQ&A： javascriptを使用し、別窓をサイズ指定で開き画像を表示

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2009/05/29 12:56

＞問題は画像が好きな所に動かすことができないのです

psition:absolute指定なので、TOP(=gazx)、LEFT(=gazy)を指定してあげれば指定の位置になるはずですが？

＞tableとかのものは後ろに隠れてしまいます。
table内に画像を指定しても、画像のpositionがabsoluteなのでほとんど意味を持たないと思いますが…
他の要素と重なった場合、z-indexが-1なので裏側にいくことになります。
各要素間のz-indexを調整してあげれば宜しいかと。

なお、泡の範囲はstar()の最初のところで決定しているようなので、直接w、hを指定してあげれば、画像とは関係なく泡の位置だけを指定することも可能です。

- 0
- 件

通報する

このQ&Aに関連する人気のQ&A

「position 意味」に関するQ&A：尊敬とリスペクト

さらに表示

「JavaScript 画像」に関するQ&A：テキストファイルやcsvファイルで読み込んだデータを使ってjavascriptで処理する方法

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

質問する（無料）

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q８月５日の花火大会

８月５日の花火大会
東京の小田急線登戸辺りで２０１０年８月５日（木）に花火大会がありましたが、調べても分かりませんでした、詳細を教えてください。

Aベストアンサー

小田急の橋梁工事等もあり6年ぶりに復活。
6月頃には公表されていました。

参考URL：http://www.komae-40th.jp/

他の回答も見る

QDreamweaverでソースが横一列になってしまう。

DreamweaverでHTMLのコードインスペクタの所が横一列にズラーとならんでしまっています。

今までは

<table width="%" border="0" cellspacing="0" cellpadding="0" bgcolor="" height="">
<tr>
<td height="">

と一段づつ見やすく表示されていたのですが、現在は、

<table width="%" border="0" cellspacing="0" cellpadding="0" bgcolor="" height=""> <tr> <td height="">

全部横一列にズラーと並んでいて、とても見にくいです。ソースも見ながらという作業が不可に近い状態です。デザインビ...続きを読む

Aベストアンサー

コードビューオプションの主要なところにチェックしてもダメ？

他の回答も見る

Q8月5日のアメトークにラゴリのみなさまが出演なさると聞いたのですが、ほ

8月5日のアメトークにラゴリのみなさまが出演なさると聞いたのですが、ほんとうですか？

Aベストアンサー

アメトークの取材で、街頭でラゴリのパネルを見せて、一組でも知らないのがいたらインタビューってのを見た人がいるらしいです。

で、取材陣に放送日聞いたら8月5日だったと＾＾

さらにハイキングウォーキング松田が、ラゴリブログ「くだらない毎日」で、『8月はすごいことに‥』みたいに書いたから、いま話題になってるみたいですよ。

まだアメトークもラゴリも正式発表はしてませんが＾＾

他の回答も見る

Q画像にマウスを乗せると、その横の画像を変える

画像の上にマウスを乗せると、その画像が変わるのではなく、横の画像を変えたいんですが、どうすればいいでしょうか？

質問内容をわかりやすく図で説明すると

○は画像を表します。

○○○
　↑ここの画像にマウスを乗せると

●○○
↑その横のここの画像が変わる

Aベストアンサー

もっと簡単なのがありました＾＾；
もちろん、先ほど書いたスクリプトでもOKですが、
こちらのほうが簡単ですね

<img src="01.gif" border="0" onmouseover="chimg.src='03.gif';" onmouseout="chimg.src='02.gif';"><img src="02.gif" name="chimg">

編集方法分かりますでしょうか？

他の回答も見る

QA会社を８月５日で退職B会社に８月２５日から就職

A会社を８月５日で退職B会社に８月２５日から就職

８月６日～８月２４日までは任意継続に加入していたとします。

健康保険の場合入社月に退職した場合保険料徴収されますが、任意継続の場合はどうなんでしょうか？

B会社でのみ社会保険料払えば良いのでしょうか？

Aベストアンサー

健康保険の保険料の支払は日割りと言うことはありません必ず１ヶ月単位です。
そしてその支払は月末の状態で判断されます、つまり月末に加入していれば１か月分払う加入していなければ払わないということです。

ただし同月得喪と言う例外があります。
同じ月に加入と脱退することを、同月得喪といいます。
この同月得喪は会社での健康保険（任意継続を含む）の場合は保険料が発生しますが、国民健康保険の場合は保険料は発生しないはずです。
例えば８月６日被保険者の資格取得で８月２４日脱退（被保険者資格喪失日は翌日の８月２５日）の同月得喪ということで市区町村の役所に確認すると、恐らく保険料は発生しないと言われると思います。

＞８月６日～８月２４日までは任意継続に加入していたとします。

健康保険の場合入社月に退職した場合保険料徴収されますが、任意継続の場合はどうなんでしょうか？

B会社でのみ社会保険料払えば良いのでしょうか？

Ａ社で８月５日まで・・・保険料の支払なし
任意継続で８月６日～８月２４日・・・同月得喪により保険料の支払あり
Ｂ社で８月２５日から・・・保険料の支払あり

これが国民健康保険だと

Ａ社で８月５日まで・・・保険料の支払なし
国民健康保険で８月６日～８月２４日・・・同月得喪により保険料の支払なし
Ｂ社で８月２５日から・・・保険料の支払あり

ということで任意継続よりも国民健康保険のほうが良いでしょう。
ただしこれは自治体の条例に依るものなので例外の自治体もあるかもしれません、ですから繰り返しますが８月６日被保険者の資格取得で８月２４日脱退（被保険者資格喪失日は翌日の８月２５日）の同月得喪ということで市区町村の役所に確認してみてください、恐らく保険料は発生しないと言われるとは思いますが。

他の回答も見る

QFlash8での文字数と画像幅、画像位置の連動

Macromedia Flash8を使っているほぼ初心者の質問です。

Flashで作りたいものがあるのでもしおわかりになる方がいれば教えてください。

今、このような名札のようなものを作っています。

　　　　┌────────┐
　名前└────────┘

┌──┬───────┬──┐
│　　　│　　　　　　　　　　│　　　│
└──┴───────┴──┘
　↑　　　　　↑　　　　　↑
通常画像(1)　パターンで　　通常画像(2)
　　　　　塗りつぶした画像　　

名札なので
パターンで塗りつぶした画像の部分にテキストボックスを配置し
文字を...続きを読む

Aベストアンサー

テキストボックスというのは，
普通のテキストフィールド（ダイナミックテキスト or テキスト入力）と解釈してよろしいでしょうか？

テキストボックスは知りませんが，
似たようなものに，
テキストフィールド(TextField) と，TextAreaコンポーネントと，TextInputコンポーネントがあります。
それぞれのクラスが違うのでスクリプトや操作方法も変わります。

よくわからないので，
一般的によく使われるテキストフィールドとして回答します。

> 長かった場合パターンで塗りつぶした画像が右に伸びて
> 通常画像(2)が右に移動するようにしたい

構造物の説明は，文字でしか書けないココでは説明しにくいのですが，
さらに説明を難しくさせる部分が
「パターンで塗りつぶした画像が右に伸びて」です。

そのままを実現すると，パターンの模様（ガラ）も横伸びしますよ。
パターンの模様（ガラ）は横伸びをさせずに，パターンの模様の表示エリアを広くするのではないでしょうか？

この部分に少し頭を使いましたが，
まず「パターンで塗りつぶした画像」をかなり横長に作成しておいて，
その「パターンで塗りつぶした画像」にマスクをかけて，
そのマスクを拡大させれば，
パターンの模様（ガラ）は横伸びをさせずに，
パターンの模様（ガラ）の表示エリアを広くすることが可能になります。

以上のようなこととして以下の回答をします。

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

詳細は後に書くとして，まずはムービーの構造を書きます。
度々出てくる MC とか mc はムービークリップのことです。

---_rootのタイムライン-----------------------
　□ レイヤー　　・・■|○| ←ActionScriptを書く
　□ レイヤー　　・・■|●| ←テキストフィールド(２つ)
　□ レイヤー　　・・■|●| ←通常画像(２つ)
　■ レイヤー　　・・■|●| ←マスク(mask_mc)
　　　■ レイヤー・・■|●| ←パターン画像
----------------------------------------

---_rootのステージ上------------------------
　　　　　　　↓テキスト入力(インスタンス名 input_txt)
　　　　　　　□□□□□□□□□□□□□

　　　　　　　　　　　ダイナミックテキスト(output_txt)
　■■■■■回回↓回回回回回回回回■■■■■
　■■■■■回□□□□□□回回回回■■■■■
　■■■■■回回回回回回回回回回回■■■■■
　　通常画像　　　　　　マスクMC　　　　　　　画像MC
　　　　　　　　　　　　　　(mask_mc)　　　　　 (gazou_mc)
-----------------------------------------

下のレイヤーの方から説明します。

まずパターン画像ですが，
これは上にも書きましたように横長なものを作成しておきます。

次にマスク(mask_mc)ですが，
パターン画像の上のレイヤーに，何色でも良いので "塗りだけ" の長方形(または正方形)を描きます。
描く位置は，通常画像(1) と (2) の間です。
最初の見た目を決めるだけですから横長でなくても良いです。

描いた "塗りだけ" の長方形を選択してムービークリップに変換します。
変換するときに基準点に気を付けます。
テキストフィールドの基準点は左上ですから，
それに準じてややこしくないようにムービークリップの基準点も左上に設定して「OK」します。
つまり，
「シンボルに変換」パネルで基準点(R): の部分を
次のように左上にチェックを入れて「OK」します。

　■□□
　□□□
　□□□

変換しましたらそのムービークリップを選択して，
ステージ下のプロパティインスペクタでインスタンス名を付けます。
インスタンス名は「mask_mc」と付けることにしておきます。

そして，「mask_mc」のあるレイヤーの，
レイヤー1 とか 2 とかになっているレイヤー名の部分を選択して，
[右クリック]→[マスク] にチェックをするなどしてマスクレイヤーにします。

次に通常画像ですが，
マスクレイヤーの上のレイヤーに通常画像(1) はそのまま配置して問題はありません。

通常画像(2) はムービークリップに変換します。
このときの基準点も「mask_mc」と同様，左上にしておきます。

このムービークリップになった通常画像(2) にもインスタンス名を付けます。
インスタンス名は「gazou_mc」と付けることにしておきます。

次にテキストフィールド(２つ) ですが，
入力してもらう方のテキストフィールドは，テキスト入力の設定にしておいて，
これにもインスタンス名を付けます。
インスタンス名は「input_txt」と付けることにしておきます。

表示される方のテキストフィールドは，
ダイナミックテキストの設定にしておいて，
[テキストの周囲にボーダーを表示] のボタンを押さない状態にします。
つまりテキストの周囲にボーダーを表示させないようにしておきます。

配置する場所はマスクのムービークリップに重なるような位置です。
ActionScriptでは，
表示されるテキストがマスクからはみだしそうになったとき，
マスクのムービークリップの左側からこのテキストフィールドの左側の間隔で，
テキストフィールドの右側と通常画像(2) との間隔も決まるようにしています。
それをイメージするような位置に配置します（つまり適当に配置してください。）

そしてこのテキストフィールドにもインスタンス名を付けます。
インスタンス名は「output_txt」と付けることにしておきます。

そしてやっと ActionScript です。

この説明は簡単。
ActionScript用にレイヤーを１つ作って，次のように書けば（コピペ可）完成です。

------------------------------
// masc_mc と output_txt の隙間を算出
chink = output_txt._x-mask_mc._x;

// mask_mc の初期幅を記録
mask_w = mask_mc._width;

// output_txt を自動サイズにする
output_txt.autoSize = true;

// input_txt に文字入力時の動作を定義
input_txt.onChanged = function() {

// output_txt に input_txt の文字を代入
output_txt.text = this.text;

// output_txtの幅＋隙間が mask_mcの初期幅より大きいとき
if (chink*2+output_txt._width>mask_w) {
// mask_mcの幅を output_txtの幅＋隙間にする
mask_mc._width = chink*2+output_txt._width;
} else {
// それ以外はmask_mc の初期幅通りにする
mask_mc._width = mask_w;
}

// gazou_mc の座標を mask_mc の右横に付ける
gazou_mc._x = mask_mc._x+mask_mc._width;

};
------------------------------

このActionScriptは上記の通り簡単です。
テキストが入力されたとき，
大きさが変動するテキストフィールドにその文字を代入して，
そのテキストフィールドの大きさに合わせて，
ムービークリップの横幅や座標を動かす。
それだけのことです。

それ以外のしくみを考えて，
そのしくみ込み込みで動くようにするのが難しいのですよ。
また，説明するのもそれを理解するのも難しいのです。

ちなみにどうでも良いことですが，
上のスクリプトを次のようにすると，ちょっとFlashっぽい動きになります。

------------------------------
// masc_mc と output_txt の隙間を算出
chink = output_txt._x-mask_mc._x;

// mask_mc の初期幅を記録
mask_w = mask_mc._width;

// mask_mcの目標幅の初期値を設定
mask_aim_w = mask_mc._width;

// output_txt を自動サイズにする
output_txt.autoSize = true;

// input_txt に文字入力時の動作を定義
input_txt.onChanged = function() {

// output_txt に input_txt の文字を代入
output_txt.text = this.text;

// output_txtの幅＋隙間が mask_mcの初期幅より大きいとき
if (chink*2+output_txt._width>mask_w) {
// mask_mcの目標幅を output_txtの幅＋隙間にする
mask_aim_w = chink*2+output_txt._width;
} else {
// それ以外はmask_mc の初期幅通りにする
mask_aim_w = mask_w;
}

};

// １フレーム進む時間毎に随時実行
this.onEnterFrame = function() {
// mask_mc の幅を目標幅に 0.2 の割合ずつ近付ける
mask_mc._width += (mask_aim_w-mask_mc._width)*0.2;
// gazou_mc の座標を mask_mc の右に付ける
gazou_mc._x = mask_mc._x+mask_mc._width;
};
------------------------------

他の回答も見る

Qひみつの嵐ちゃん！8月5日放送分のTBSからほど近い、野菜を食べる焼肉

ひみつの嵐ちゃん！8月5日放送分のTBSからほど近い、野菜を食べる焼肉やさんの店名教えてくださーい。

Aベストアンサー

(やさい村大地)です！
昨日、ちょうど録画していて見ました。嵐の大ファンなので★

他の回答も見る

Qビルダーで見るソースとネット上で見るソースの違い

よろしくおねがいいたします。
ビルダー９でＨＰを作成してしていますが、ビルダーでソースを見ると最後は
</BODY>
</HTML>
で終わっています。
ネット上で見ると</BODY></HTML>の後に

<script language="JavaScript">


というのが並んでいるのですがこれは問題ないでしょうか？

Aベストアンサー

>Norton Internet Securityをインストール　→　<HTML>の後にタグが入る　→　どのような影響があるのでしょうか？

貴方のサイトを実際に拝見したわけではないので、具体的な影響はわからないです。

閲覧時にエラーが出たり、
表示されるべきものが表示されないとかの影響が出る場合がありますが、
何の問題も無くきちんと動作・表示されているなら、影響も出てないので問題ないと思います。
また、閲覧者の環境によっては、問題のソースが</HTML>の後に、そもそも入っていないかもしれません。

なお、Norton～の機能が</HTML>の後にソースを挿入しているので、
Norton～の広告ブロック機能を無効にしてあれば、挿入されないんじゃないかと思います。
（</HTML>の後にソースが入った状態でアップロードしていなければ。）

他の回答も見る

Q世界で一番受けたい授業スペシャル（８月５日）の星野君とは

世界で一番受けたい授業スペシャル（８月５日）の生徒で星野君（女性）と言う人が出ていますが、フルネームを教えてください。

Aベストアンサー

星野真里さんですね。

参考URL：http://ja.wikipedia.org/wiki/%E6%98%9F%E9%87%8E%E7%9C%9F%E9%87%8C

他の回答も見る

Qクリックで画像が入れ替わるソースの書き方

例えば、「1.jpg」という画像をクリックすると、「2.jpg」という画像が「3.jpg」という画像に切り替わるという設定にしたいのですが、そのアクションを実行させるソースの書き方を教えて下さい。若しくはそのようなアクションが設定されているサイトをご紹介下さい。よろしくお願いします。※使用ソフト：「ホームページビルダーver6」です。

Aベストアンサー

No.2です　先程のでダメでしたら　こちらでお試しください

http://www.interq.or.jp/mars/cherry/program/javascript/album02.html

他の回答も見る

ページトップ