現在、別々のリンクを設定された6つの画像(<a href="..."><img src="..." /></a>)から、3つを取り出して、表示するというJavaScriptを作っています。
この3つのリンクされた画像は最初からHTMLに書かれているとします。
これを、DOMを使って、その別々の名前のIDのdivの子要素のhref,srcを抜き出したデータで書き換えてます。
(document.getElementById('...').href=...というカンジで)
その際に、書き換えの関数をonLoadで呼び出してます。
その際、どうしても最初で表示されている画像などが見えて、書き換えが行われてしまいます。
関数の前に、そのdivをdisplay:noneにして、処理が終了後にdisplay:blockにしてますが、それでも前述のように、前の表示が出てきます。
書き換え後のみを表示させる方法を、CSSで最初からdisplay:noneにしておく以外で方法が分かる方、おられましたらよろしくおねがいします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
<IMG> タグが最初からある前提であれば、無色透明のGIF画像を作って、初期状態のときだけそれを張っておくというのはどうでしょ
うか?この回答への補足
すいません、「リンクされた画像」だけでは、説明が足りませんでしたが、意味のある画像という意味で、透明GIFを張る事はできないのです。
補足日時:2006/04/13 14:00No.1
- 回答日時:
その画像を表示するスペースをテーブルなりエレメントなりを使って予め開けておき、中に<SPAN>タグを入れて動的に<IMG>タグを記述すればいいのではないかと思います。
具体的には、たとえば100×100の大きさの画像を表示するとすれば、
<TABLE WIDTH=100px HEIGHT=100px><TR><TD>
<SPAN ID="img1"></SPAN></TABLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
switch ( Math.floor(Math.random() * 3) ) {
case 0:
document.all.img1.innerHTML = '<IMG SRC="a.jpg">';
case 1:
document.all.img1.innerHTML = '<IMG SRC="b.jpg">';
case 2:
document.all.img1.innerHTML = '<IMG SRC="c.jpg">';
}
//-->
</SCRIPT>
とまぁ、こんな感じ。(↑デバッグしてません)
画像は<SPAN></SPAN>の内側に表示されるわけです。
参考にしてみてください。
この回答への補足
ご回答、ありがとうございます。
あと、すいません前提として、IMGタグは最初からある、というので、その際はinnerHTMLで入れ込むとしても、先に入ってるIMGタグはその後、display:noneにしても、希望通りに動くのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
バーナー自作??、著作権の質問...
-
【アメブロ】フリープラグイン...
-
アメブロで画像が拡大表示でき...
-
FC2ブログで、画像の画面中...
-
ホムペのタグについて
-
ビットマップ(bmp)形式で背景...
-
編集が出来ません(JPEGフ...
-
HTML 表の上に文字がきてしま...
-
JSPでjava記述とhtml記述両方で...
-
<td>中の文字列に<p>は必要?
-
上司から10メガバイトの画像...
-
Wordのデータ(.doc)を画像(.jpg...
-
パワーポイントのハイパーリン...
-
JSPのタグについて
-
Inkscapeでインポート...
-
□バナーとリンクとタグの貼り方...
-
アイコンとバナーの違いについて
-
Exciteブログのロゴ画像登録に...
-
バナー 相互リンク 貼り方
-
画像アイコンを作りたいのですが。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
FC2ブログで、画像の画面中...
-
アメブロで画像が拡大表示でき...
-
【HTMLタグ】画像を横に連...
-
アメブロ使用中です。画像を横...
-
楽天ブログで画像を横に並べて...
-
バナー画像だけ表示されない・・・
-
HPのタグで、文章のみ白抜きは?
-
アメブロにスライドショー
-
画像を別ウィンドウで開くやりかた
-
アメブロ サイドバーに動く画...
-
ブログで使えるタグについて知...
-
楽天アフィリエイトのHP作成...
-
写真と写真の間に文章をいれる...
-
ビットマップ(bmp)形式で背景...
-
編集が出来ません(JPEGフ...
-
tiffファイルをトリミングして...
-
<td>中の文字列に<p>は必要?
-
フル画像に拡大できるリンクが...
-
上司から10メガバイトの画像...
-
アイコンとバナーの違いについて
おすすめ情報