Q&A
細かいですが「クイック」ではなく「クリック」では。
あと・・・前の時にも思ってはいましたが、document.writeはやめられたほうが良いかと。
http://blog.3streamer.net/html5-css3/document-write-html5-181/
提示の内容だけでしたらわざわざJavaScriptで書く必要はないと思いますし。
JavaScriptを使い図のようにサイドバーの下にバナーを追加して、クリックすると文字の色が変わるようにしたいです。
↓
以下追加しましたが思うように表示されません。
どうしたら思うように表示されるでしょうか？
javaScript
1document.write('\ 2<div id="menu">\ 3<ul>\ 4<li class="bnr_link"><a href="http://100nen-aa.jp/" target="_blank"><img src="images/bnr_link_05_off.gif" alt="住まい環境整備モデル事業" /></a></li>\ 5</ul>\ 6<br><br>\ 7 8</div>') 9
それに「文字の色が変わる」変わる
コードがどこにも書かれていないような。
もっと言えば、クリックしたら画面遷移するので「クリックしたら色が変わる」を入れてもあまり意味がないような。
もっと言えば、JavaScriptではないっぽいので、CSSで済みそうな。
ブラウザのデベロッパーツールで確認できますよ。
https://ascii.jp/elem/000/000/999/999122/
文字というのはどこでしょうか？
画像に描かれた文字のことですか？
「思うように表示されません」とは、具体的にはどのような現象が起きていますか？
mts10806さん
以下確認できませんでした
http://blog.3streamer.net/html5-css3/document-write-html5-181/
以下のようなサイドバーはJavaScriotで表示させていると思いますがこのようなバナーを表示させたいです。
http://model-sw.jp/
x_xさん
住まい環境整備モデル事業 という文字の色をクリックして変えたいです。
Lhankor_Mhyさん
バナーの表示自体されません。
「HTML5でdocument.writeは使ってはいけない？」という記事でした。
先ほどは見れてたのですがなぜか今表示されませんね。サイトが落ちたのかな・・・
いずれにしても使うべきではない（推奨されない）ということです。
> 以下のようなサイドバーはJavaScriotで表示させていると思いますがこのようなバナーを表示させたいです。
無理にJavaScriptで表示させる必要はない、という意味です。
普通にHTML置いたらいいですよ。
「住まい環境整備モデル事業」というのはalt属性値ですよね？
画像非表示環境での文字の色のことを言っていますか？
上記の青い文字と黒い文字のバナーは作成してimagesと言うフォルダに入れてあります。
現状ではバナーは表示出来ておりませんのでJavascriptで適用させようとしたけれど出来ませんでした。
回答2件
0
ベストアンサー
「クリックで色が変わる」と仰っているのは
下記の丸した場所と思いますが、
あれはクリックで色変わっているのではなくa:activeのデフォルトカラーです。
提示先のサイトではGoogleアナリティクス以外のJavaScriptのコードはありません。
ただ、挿入したいのは画像ですよね。
しかも文字も画像に入っていますよね。
その場合はリンクカラーが適用されるわけではないので
そういう色の文字が入った画像をもう1枚作って「クリックしたらその画像に入れ替える」という対応をする必要があります。
ただ・・・
どちらにしてもリンクなんでクリックで見た目変えたところで何の効果があるかというと・・・？
マウスホバーならまだ「ここを選ぼうとしているよ」とユーザーに知らせる意味があるので分かるんですが。
投稿2019/07/11 08:17
編集2019/07/11 08:35総合スコア80850
挿入したい画像は既に作成してimagesと言うフォルダーに入れてあります。
images/bnr_link_05_on.gif images/bnr_link_05_off.gif
と言う画像名で「住まい環境整備モデル事業」を前者は黒い文字、後者は青い文字に作成してあります。今のサイトのバナーと同じようにJavaScriptを適用させようとしたら出来なかったです。
http://ml-ss.jp/
＞クリックで見た目変えたところで何の効果があるかというと・・・？
確かに効果はどうかわかりませんがこれと同じ指定されたので。
横からすみません。
ご例示の
http://model-sw.jp/
は、バナーをクリックしても色が変わりませんでした。マウスオーバーでは色が変わるようです。
今一度、指示されていることの内容をご確認されてはいかがですか？
Lhankor_Mhyさん
仰る通りです。マウスオーバーで色を変えたかったです。
表現の仕方が間違っていて意図が伝わらず混乱させてしまったようです。
二つバナー画像を用意しましたので、マウスオーバーで黒い文字とブルー文字を変えたかったです。
上記のJavaScriptをindex.htmlにバナー表示をさせようとしましたが正確に表示されずこちらに質問しました。
（私一応回答に「マウスホバーなら」と書いてたんですが伝わってなかったかな・・・）
ひとまずdocument.write()でHTMLタグだけ表示させるところをまず変えてください。
問題の切り分けを難しくします。
むしろCSSだけで実現可能に思います。
「黒い文字とブルー文字」は画像に含まれている文字 ですよね？
mts10806さん
マウスホバーの表記見ていたものの、用語の意味を判読しようとして頭から抜けておりました。申し訳ありません。
document.write()を表記してしまうとJavaScriptのみ認識してしまいhtmlは認識しない、よって削除した方がいいという意味でしょうか？
「黒い文字とブルー文字」は上の「住まい環境モデル事業」バナー画像です。
>document.write()を表記してしまうとJavaScriptのみ認識してしまいhtmlは認識しない、よって削除した方がいいという意味でしょうか？
いえ。単にHTMLを出力だけの意味がない記述で別の問題（JavaScriptの文法問題）で本題が進まないため不要ですという意味です。
そこをクリアできたなら「マウスホバーで画像を切り替える」だけにフォーカスできますし
手段は沢山あります。
https://html-coding.co.jp/knowhow/tips/rollover/
たびたび横からすみません。
ご例示の
http://model-sw.jp/
では、↓のスクリプトがあるのでロールオーバーしてます。
http://model-sw.jp/js/rollover.js
ご質問の
http://snj-sw.jp/ksk/
では、そのスクリプトが読み込まれていませんが、そこは確認の上で指示を受けていますか？
ご質問をされるよりも、クライアントなのか上司なのかわかりませんが、Wordpressさんにこの指示を出している人ときちんとコミュニケーションを取ることが、問題解決の近道なんじゃないかと思いますね。
何度も対応頂きありがとうございました。
上記の【手法1】CSSのみが一番ハードルが低そうですのでトライしてみようと思います。長い間の対応ありがとうございました。
Lhankor_Mhyさん
仰ることはごもっともです。
指示はバナーを追加することです。JavaScriptを組み込むかどうかあるいはhtmlで表示するかをはっきりと確認の上で質問すべきでした。
問題は明確になりましたので指示を仰いで作業します。
ありがとうございました。
ハードルは低いかもしれませんが、背景画像の切り替え故にそのバナーでリンクにしたい場合は注意が必要ですので、その制約によってその後の展開が逆にハードルが上がる可能性もあります。
(私はJavaScriptのonmouseイベントを推奨します）
HTMLで直接書いたりCSSを使うのはいいのですが、他のサイトと仕様をあわせなくていいのかしら……
などと、いささか心配です。
http://model-sw.jp/
を見る感じ、サイドカラムを共通化するために外部jsから document.write() で書き出しているように見えるので、管理者に相談なく勝手に仕様を変えるわけにはいかないだろう、と思います。
「それではダメだ」となると作業が無駄になるので、着手する前に相談してみてはいかがでしょう？
Lhankor_Mhyさん
確かに仰る通りです。
基本的なコーディングの理解と共に
仕様を合わせるかそうでないか管理者に相談するべきです。
技術云々の前の問題ですね。
0
改行のエスケープ忘れではないでしょうか。
js
1document.write('\ 2<div id="menu">\ 3<ul>\ 4<li class="bnr_link"><a href="http://100nen-sw.jp/" target="_blank"><img src="images/bnr_link_05_off.gif" alt="住まい環境整備モデル事業" /></a></li>\ 5</ul>\ 6<br><br>\ 7\ //←ここ 8</div>')
投稿2019/07/11 08:11
総合スコア36115
あなたの回答
tips
プレビュー
