2017-06-04 6 views
0

私はまったく新しいウェブサイトを設計する初心者です。私は質問なしで成功しないと答えを見つけようとしました。 (少なくとも私がそれをどうすればよいか理解するのを助けるどんな答えでもない)画像をクリックしている間に異なる背景画像を変更する

とにかく。私は別のイメージをクリックすると、いくつかのイメージの間に(接続されたページで)ウェブサイト上の背景イメージを変更したいこのウェブサイトをやっています。私はまた、異なるページ間をジャンプしても、バックグラウンドイメージを同じにしておきたい。

私はどのようにすべきか説明できますか?喜んで "ダミーのためのウェブデザイン"。 (私は学校でウェブデザインのクラスに入っていますが、教師はそれを説明できません)

答えて

0

私はあなたに正しい方向を指摘しようとします。 ユーザーインターフェイス要素をクリックしたときに何か操作を行うには、onclickイベント(https://developer.mozilla.org/en/docs/Web/Events/click)が必要です。あなたがしなければならない次のことは、何らかの形でユーザーのイメージ変更を永続させることです(または、すべてのユーザーのために、指定しなかった場合)。たとえば、Cookie Web API(https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie)を使用してこれを行うことができます。もちろん、そのクッキーに保存されているイメージをロードする必要もあります。

0

私はあなたが使用しているフレームワークわからないんだけど、私はこれを行うための最善の方法は、そのようにCSSクラスで背景画像を含めることであると思う:

.background-image-1 { background-image: url("../path/to/image1") }

.background-image-2 { background-image: url("../path/to/image2") }

次に、バックグラウンドを変更するイメージのクリックにイベントハンドラを追加します。イベントハンドラでは、ボディのcssクラスを動的に切り替えることができます。

document.getElementById('idForBody').className = 'background-image-2';

・ホープ、このことができます:それはおそらく、このようになります!

関連する問題