No.1
- 回答日時:
↑を参考に、対象のdivを透明状態から、徐々に非透明してはどうでしょう
ありがとうございます。
勉強不足のため、恥ずかしながらこの通りの動作さえることすら、うまくいきませんでした。
ご紹介いただいたページの
「実際のJavaScriptコード」を○○○.jsとして保存し、
htmlには、
<a href="#" id="sample_click">(サンプルを実行)</a><br /><script type="text/javascript" src="○○○.js"></script>
を書いて、
cssに、
body {
background:url(img.jpg) ;
filter:alpha(opacity=50); // Internet Explorer 0~100 (整数)
-moz-opacity: 0.5; // Firefox 0~1.0 (小数)
opacity:0.5; // Safari 0~1.0 (小数)
}
では、動かなかったのですが、間違っているのはどこなのでしょうか。
No.2
- 回答日時:
以下のコードを参考にしてみてください。
画像のファイル名と配置は、適当に変更してください。
------------------------------------------------------------
<html>
<head>
<script type="text/javascript" src="fade.js"></script>
</head>
<style type="text/css">
<!--
div.img1, div.img2 {
width: 50%;
background-repeat: repeat;
visibility: hidden;
}
div.img1 {
float:left;
background-image: url(1.jpg);
}
div.img2 {
float:right;
background-image: url(2.jpg);
}
-->
</style>
<body>
<div id="limg" class="img1">
LEFT
<br /><br /><br />
</div>
<div id="rimg" class="img2">
RIGHT
<br /><br /><br />
</div>
</body>
</html>
------------------------------------------------------------
fade.js
------------------------------------------------------------
window.onload = function () {
var img1 = document.getElementById('limg');
img1.style.visibility = "visible";
fadeIn('limg', 0);
var img2 = document.getElementById('rimg');
img2.style.visibility = "visible";
fadeIn('rimg', 0);
};
function fadeIn(imgId, opacity) {
if (opacity <= 100) {
setOpacity(document.getElementById(imgId), opacity);
opacity += 10;
window.setTimeout("fadeIn('" + imgId + "'," + opacity + ")", 80);
}
}
function setOpacity(img, opacity) {
img.style.filter = "alpha(opacity:" + opacity + ")";
img.style.MozOpacity = opacity / 100;
img.style.opacity = opacity / 100;
}
ありがとございます!
出来ました!
これを、さらに何秒後に表示させる、というようなことまで指示することが出来るのでしょうか?
さらなる質問ですみません。
No.3
- 回答日時:
永久に繰り返すということで考えてみました。
時間を短くすると問題が起きてくるかも知れませんが、秒数を指定してみてください。
実際には、長時間試してからご使用ください。
------------------------------------------------------------
fade.js
------------------------------------------------------------
var after = 10;// 秒数を指定
var tid1;
var tid2;
window.onload = function () {
fdi2();
tid2=window.setInterval("fdi2()", after*1000);
};
function fdi2() {
var img1 = document.getElementById("limg");
img1.style.visibility = "visible";
fadeIn("limg", 0);
var img2 = document.getElementById("rimg");
img2.style.visibility = "visible";
fadeIn("rimg", 0);
}
function fadeIn(imgId, opacity) {
if (opacity <= 100) {
setOpacity(document.getElementById(imgId), opacity);
opacity += 10;
tid1=window.setTimeout("fadeIn('" + imgId + "'," + opacity + ")", 80);
} else {
window.clearTimeout(tid1);
}
}
function setOpacity(img, opacity) {
img.style.filter = "alpha(opacity:" + opacity + ")";
img.style.KHTMLOpacity = opacity / 100;
img.style.MozOpacity = opacity / 100;
img.style.opacity = opacity / 100;
}
なんどもありがとうございます!
>var after = 10; // 秒数を指定
で、数値をかえてみたのですが、表示スピードに変化がみえませんでした。(IE6)
他に方法あるのでしょうか。。。
あー、もう図々しくすみません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ソフトウェア) ペイントで切り抜いた画像の背景を透明に 2 2022/09/15 10:20
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- Photoshop(フォトショップ) フォトショップで切り抜いた画像を透明にするには 3 2022/09/15 11:50
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS 差し込み画像にをcssで大きさ指定したい 1 2022/11/23 23:14
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- 写真・ビデオ マイナポイントの申請ではじかれた(写真背景問題) 8 2023/02/26 12:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryでサーバー上のファイル...
-
連番画像「次へ」「前へ」で、...
-
jQueryで画像を重ねる
-
画像をクリックして変数に値を代入
-
スマートな外部javaでロールオ...
-
画像アップロードしたい
-
画像の座標位置取得
-
JavaScriptを外部ファイルにす...
-
アンケート型のホームページの...
-
MAX関数を使ってからLEFT JOIN...
-
c++std::string型をTCHARに変換...
-
javascriptテキストBOX色を元に...
-
jspでcssが読み込めない
-
jsでサムネイルを拡大表示 複...
-
JQueryで画像の上で文字を動かす
-
createElementで作成した要素を...
-
条件分岐でキーが入力されてい...
-
JSPでの画像ファイル表示
-
デフォルト非表示にしたい。【t...
-
htmlの記述で link rel=styles...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
jQueryでサーバー上のファイル...
-
【jQuery】複数の画像の読み込...
-
複数のバナーをリロードする度...
-
jQueryで画像を重ねる
-
一定時間ごとにgif画像の切...
-
画像をクリックすると別ウイン...
-
JavaScriptで画面サイズによっ...
-
HTMLページ内のタグに対しての...
-
【javascript】ロールオーバー...
-
HPに複数の画像をクリックで切...
-
連続したURLへのwindow.openの...
-
リンク切の場合リンクしない
-
画像と文字を同時に切り替えたい
-
JavaScriptで画像置換えてクリ...
-
画像の入れ替え
-
javascriptによるランダム画像...
-
<img>タグの alt= の値をキャプ...
-
outlook2010の不具合で困ってい...
-
複数のボールの落下、バウンド...
おすすめ情報