今HPを作成しているんですが、題名の方法が知りたいです。
JavaScriptを使って画像をランダムに表示させる方法ありますよね。
<script language="javascript">
<!--
//ランダムに画像を表示
img = new Array();
img[0] = "画像1";
img[1] = "画像2";
img[2] = "画像3";
n = Math.floor(Math.random()*img.length);
document.write("<img src='"+img[n]+"' border='0'>");
//-->
</SCRIPT>
それとマウスを重ねると画像が変わる
onmouseover="this.src='画像4'"
onmouseout="this.src='画像5'"
というタグありますよね。
2つのタグを組み合わせてランダムに表示された画像に
マウスを重ねると画像がかわるということがやりたいのですが
JavaScriptの知識があまりないためわかりません。
この方法は可能でしょうか?
もしくは他の方法あるでしょうか?
ランダムに表示される画像は3枚と仮定し、
それぞれ3枚の画像はマウスを重ねるごとに
違う画像を表示させたいと思っています。
解決法をわかるかたがいらっしゃったら
よろしくお願い致します。
No.2ベストアンサー
- 回答日時:
>> ランダム画像1~3があります。
>> マウスを重ねたときに表示される画像4~6があります。
はあ,なるほど。
ランダムの後には規則性があるわけですか。
>> 画像1が選ばれたときはマウスを重ねると画像3。
>> 画像2が選ばれたときはマウスを重ねると画像4。
??? たぶん,
画像1が選ばれたときはマウスを重ねると画像4。
画像2が選ばれたときはマウスを重ねると画像5。
ということですよね。
上の部分から修正になります。
具体的にJPEGのファイル名と拡張子名まで入れておきます。
--------------------------------
<script language="javascript">
<!--
//ランダムにgazouを表示
img = new Array();
img[0] = "gazou1.jpg";
img[1] = "gazou2.jpg";
img[2] = "gazou3.jpg";
img[3] = "gazou4.jpg";
img[4] = "gazou5.jpg";
img[5] = "gazou6.jpg";
n = Math.floor(Math.random()*3);
m = n+3;
document.write("<img src='"+img[n]+"' border='0' onmouseover=src='"+img[m]+"' onmouseout=src='"+img[n]+"'>");
//-->
</script>
-------------------------------
で行けます。
>> やはり動くgif画像をランダム表示などの方が
>> はやいのでしょうか?
意味がわかりません…。
動くgif画像って,勝手に動くアニメーションでしょう。
あれを,JavaScriptで制御できるのですか。
その方法は知りません。
Flashなら得意なので,よくActionScriptで制御しますが,GIFはわかりません。
できました!!ありがとうございます。
ほんとうにありがとうございます。
これがやりたかったんです!!
補足文間違ってしまって申し訳ありません。
sassakun様のおっしゃられるように、画像1→画像4ということです。
gif画像についてなんですが、当方がやりたかったのは
表示された画像に動きをつけることです。
その動きの発生要因を、できるならば
マウスを重ねるという方法にしたかったのです。
その方法が不可能な場合、動くgif画像を用意し、
それをJavaScriptでランダムに
表示にしてみようという方法も考えていたのです。
わかりづらい質問文に答えて頂き本当にありがとうございます。
とても参考になりました。
本当にありがとうございました。
No.1
- 回答日時:
上はそのままで,document.writeの部分だけを変るので良いと思います。
---例------------------------------
document.write("<img src='"+img[n]+"' border='0' onmouseover=src='画像4.jpg' onmouseout=src='"+img[n]+"'>");
----------------------------------
(↑改行していません。1行です。)
クォーテーションの位置などが,ちゃんとしていないと,うまく動作しないようです。
この回答への補足
回答ありがとうございます。
上記の方法は可能だったんですが私のやりたい事と
少し違いました。
私の説明不足、申し訳ありません。
再度説明させて頂いて、よろしければまたご教授ください。
ランダム画像1~3があります。
マウスを重ねたときに表示される画像4~6があります。
ランダムで
画像1が選ばれたときはマウスを重ねると画像3。
画像2が選ばれたときはマウスを重ねると画像4。
というように表示されるのはランダム選択
マウスを重ねたときは対応する画像を任意でという
方法がやりたいのですが可能でしょうか?
やはり動くgif画像をランダム表示などの方が
はやいのでしょうか?
よろしければ補足回答お願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
pngやjsの後ろの英数字の意味は...
-
崩れたレイアウトが更新すると...
-
IEでのalt属性ポップアップ表示...
-
拡張子無しで画像を表示したいです
-
ボタンを押したままにする。
-
onmouseoverに複数の命令を書き...
-
「DecareステートメントにPtrSa...
-
CSSなどでHTML全体の表示を拡大...
-
WEBサイトの一部コンテンツがス...
-
form以外でのpostってできますか?
-
リンクの上にマウスカーソルを...
-
元々あるファビコンが消えない
-
すいません HTMLです この画像...
-
スマホで、画像をクリックする...
-
画像がテーブル内に収まらない
-
画像欄にバツ印が・・・
-
PDFの保存ボタンが表示されません
-
画像とその下にあるテキストの...
-
PNG画像を印刷すると背景がきち...
-
イラレで背景を透明にするやり...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンを押したままにする。
-
IMGタグでTIFF画像を表示
-
pngやjsの後ろの英数字の意味は...
-
スライドショーの上にロゴマー...
-
バナーの貼り方とバナーにリン...
-
背景が透明なリンクボタンで、...
-
HTMLにQRコードを挿入する方法
-
タイトルバーに画像を入れるHTM...
-
form以外でのpostってできますか?
-
HTMLでデスクトップの画像がでない
-
CSSなどでHTML全体の表示を拡大...
-
画像クリックでクリップボード...
-
すいません HTMLです この画像...
-
拡張子無しで画像を表示したいです
-
期間ごとに画像表示を切り替え...
-
クリックしても、リンクに飛ば...
-
特定の画像ファイルでレイアウ...
-
カウンターのHTMLソースを教え...
-
バナーのURLについて
-
クリッカブルMAP領域が分かる様...
おすすめ情報