No.2ベストアンサー
- 回答日時:
#1です。
>必要事項が全て含まれているチュートリアルやサンプルサイトをご存知でしたら
どこまで何をご存知かわかりませんが(私もたいして知らないけど)、#1で紹介したjqueryのdocumentationにjquery関連は全て含まれていると思います。でも、その前にjavascriptをある程度理解しないと… さらにその前に、HTMLとCSSを…
となってしまうので、必要そうな情報をぐぐってみてください。
(私も、webだけで覚えました → だからよくわかってない… ??)
どのようなソースで、どのような実装をしたいのかまったくわかりませんので、ごく簡単な原理のみのサンプルを…
bg_layerが擬似背景のdivで、このdivの背景を対象の背景と仮定しています。
実際のコンテンツを背景の前に表示するために、contentはposition:absoluteで表示させています。(z-indexでもよいかも)
wrapperの背景のほうを対象としてbg_layerをマスクにするようにしても、ほぼ同様の処理でいけると思います。
画像を入替えたりフェードアウトするライブラリはいろいろ作成されていますので、そういったものを利用するのもありだと思いますが、まったくそのままで使えるものはなさそうに思われますので、作成するにしろ修正するにしろ、スクリプトに関する知識が必要になることでしょう。
(サンプルなので、ごく簡単にしてあります。)
(全角空白は半角に)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.5.0");</script>
<style type="text/css">
#wrapper { width: 500px; height:500px; position:relative; }
.content { padding:30px; position:absolute; }
.bg_layer { width:100%; height:100%; background-image:url(A.jpg); }
</style>
<script type="text/javascript">
<!--
$(function(){
$("#buttons input").click(function(){
var val = this.value, layer = $("#wrapper .bg_layer:not(:animated)");
layer.fadeOut(800, function(){
layer.css("backgroundImage", "url("+val+")").fadeIn(800);
});
});
});
//-->
</script>
</head>
<body>
<div id="wrapper">
<div class="content">
<p>
コンテンツのテスト文字列
</p>
<p>
これは<a href="#hoge">テストリンク</a>です。
</p>
</div>
<div class="bg_layer"></div>
</div>
<div id="buttons" style="margin-top:20px;">
<input type="button" value="B.jpg">
<input type="button" value="C.jpg">
</div>
</body>
</html>
再度のご返答ありがとうございます
いただいた上記のサンプルがまさに求めていたコードそのものです!!
一から用意していただいた様で、大変恐縮しております><
自分のソースに実装してみたところ完璧に動きました
説明もわかり易くとても助かりました
fujillin さんのようにいつかこれが簡単と言えるぐらいのレベルになれるように
JS をもっとがんばりたいと思います
本っっ当にありがとうございました!\(*´▽`)o゜★
No.1
- 回答日時:
背景画像の透明度を直接変更するのは難しいです。
その代わりの方法として、その背景を持つ要素(divなど)かあるいは画像要素(img)を擬似背景としてレイヤー的に表示しておき、その要素の透明度を操作することにしてあげれば、見掛け上は同様のことができると思われます。
逆の発想で、背景の直前にマスクとなるレイヤーを置いておいて、マスクの透明度を下げることで、背景がフェードアウトしているように見せることも可能かと思います。
どちらに画像が表示されているかは違うものの、両方とも処理方法的には似たようなものになるでしょう。
(後者の方が、ご質問の言葉通りに近いのかも…)
>変わるときにフェードイン・アウトエフェクトが必要 (jQuery)
jqueryを使うのならフェードイン・アウトも比較的簡単です。
・フェードイン
対象要素.fadeIn();
http://api.jquery.com/fadeIn/
・フェードアウト
対象要素.fadeOut();
http://api.jquery.com/fadeOut/
など。
この回答への補足
ご返答ありがとうございます!
ご指摘のとおり、背景はdiv要素のものでも構いません
諸事情により img はあまり使いたくないので background に直接働きかけるものでしたら嬉しいです
リンクもありがとうございました
大変恐縮ですが、javascript や jQuery は素人なので
必要事項が全て含まれているチュートリアルやサンプルサイトをご存知でしたら
是非教えて頂けないでしょうか?
いただいたサイトのように英語でもOKなのでぜひ・・
よろしくお願いします m(_"_)m
ご返答ありがとうございました
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- その他(IT・Webサービス) cssの@mediaについて 1 2023/05/14 07:34
- 英語 飛び出しナイフの説明文を和訳しています… 3 2022/10/19 17:09
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- Visual Basic(VBA) マクロ実行時、自動で背景色を変えたい。 C列にあるチェックボックスをチェックするとB列に「TRUE」 4 2022/11/08 11:14
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Selenium4でボタンをクリックで...
-
jQueryのblockUIをformのボタン...
-
jQuery3 reset()が効かない。
-
テーブルの形式を整えるJavascript
-
Javascriptを使ってQRコード読...
-
変数にドットをいれることはか...
-
スクリプトの外部からの読み込み
-
[jQuery UI] sortableを使いaja...
-
IndexedDB を使ってファイルア...
-
readyStateが4にならない原因
-
jQueryでloadしたphpをapendTo...
-
パソコンで動くjavascriptがス...
-
WebbrowserよりHTMLのValue値を...
-
Rails3でのクリックされたボタ...
-
ajaxからphpにpsotしたときの日...
-
クリックテキストを次ページに表示
-
JQueryで動的生成のスライダが...
-
Google Apps Scriptを利用した...
-
google map api で下記のhtmlが...
-
jQuery toggle() 戻るで開いた...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Selenium4でボタンをクリックで...
-
FullCalendar の複数月表示につ...
-
マスターページ使用時のJavascript
-
background をフェードしながら...
-
JavascriptからPHPへのAjax通信...
-
Javascriptを使ってQRコード読...
-
SQLのmaxで求めた値を変数に代...
-
JavaScriptでtabindexの変更っ...
-
インラインフレームを自動更新...
-
jQueryを使いformでsubmitした...
-
同一ページ移動時ハンバーガー...
-
ドラッグ & ドロップでのド...
-
jQueryのblockUIをformのボタン...
-
カンマ区切りのデータを配列に...
-
階層別の組織図の自動作成について
-
AjaxでJSONを受信すると、文字...
-
jQueryでloadした部分に.jsが効...
-
要素内を常に一番下を表示させたい
-
変数にドットをいれることはか...
-
たくさんの経由地がある巡回ル...
おすすめ情報