-
ID:QKhsUz さんの質問

JavaScript初心者です。
クリックで画像と表示されている文字を切り替えたいのですが、
どのような方法がありますか?

画像のみ切り替え、文字のみ切り替えなどの方法はそれぞれ試してみたのですが、同時に両方を切り替える方法がわかりませんでした。

下記コード(※元URL→http://weboook.blog22.fc2.com/blog-entry-6.html)を参考にしているのですが、画像にリンクの部分が不要なのと、
ボタンになってしまっているところを画像に変更したいと思っていますが、
うまく動作しません。

どなたかご教授お願い致します。

<SCRIPT type="text/javascript">
<!--
function showimg1(){
document.imgLink.src = "画像1のURL";
document.getElementById("linkArea").href = "リンク先URL";
document.getElementById("message").innerHTML = "表示する文章1";
}

function showimg2(){
document.imgLink.src = "画像2のURL";
document.getElementById("linkArea").href = "リンク先URL";
document.getElementById("message").innerHTML = "表示する文章2";
}

function showimg3(){
document.imgLink.src = "画像3のURL";
document.getElementById("linkArea").href = "リンク先URL";
document.getElementById("message").innerHTML = "表示する文章3";
}
-->
</SCRIPT>

<a href="最初のリンク先URL" id="linkArea" >
<img src="最初に表示する画像のURL" name="imgLink">
</a>
<div id="message">最初に表示する文章</div>

<input type="button" onclick="showimg1()" value="画像1">
<input type="button" onclick="showimg2()" value="画像2">
<input type="button" onclick="showimg3()" value="画像3">

みんなの回答 1 件

ID:43iC8f さんの回答

こんな感じ?

<SCRIPT type="text/javascript">
<!--
function showimg1(){
document.imgLink.src = "画像1のURL";
document.getElementById("message").innerHTML = "表示する文章1";
}
function showimg2(){
document.imgLink.src = "画像2のURL";
document.getElementById("message").innerHTML = "表示する文章2";
}
function showimg3(){
document.imgLink.src = "画像3のURL";
document.getElementById("message").innerHTML = "表示する文章3";
}
-->
</SCRIPT>
<img src="最初に表示する画像のURL" name="imgLink">
<div id="message">最初に表示する文章</div>
<a href="javascript:void(0)" onclick="showimg1();">画像</a><br>
<a href="javascript:void(0)" onclick="showimg2();">画像</a><br>
<a href="javascript:void(0)" onclick="showimg3();">画像</a><br>

ID:GlFoHX

ボタンではなくリンクで表示されたのですが、やはりクリックしても表示が変わりません。。。

ID:GlFoHX

Uncaught ReferenceError: showimg1 is not definedとえらーになってしまいます。head部分に読み込ませているはずなのですが。。

ID:GlFoHX

出来ました!
画像URLとinnerHTMLの間にgetElementByIdを追加して対応させたところ、画像とテキストの両方が切り替わってくれました
この記述であっているか謎ですが。。ひとまずありがとうございました!

最終更新日:2017-01-18 (5,928 views)

関連するトピックス

ページ上部に戻る