スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScriptで画像とリンク先を切り替える方法

かなり前の記事ですが検索エンジンのおかげでアクセス数ダントツ1位の「JavaScriptによる画像切り替え」という記事で、画像にリンクをはることはできますかと質問を頂きましたので、これに答える形で記事にしてみます。

ボタンをクリックすると画像とリンク先が切り替わります。


<SCRIPT type="text/javascript">
<!--
function showimg1(){
  document.area1.src = "画像1のURL";
  document.links.area2.href = "リンク先URL";
}

function showimg2(){
  document.area1.src = "画像2のURL";
  document.links.area2.href = "リンク先URL";
}

function showimg3(){
  document.area1.src = "画像3のURL";
  document.links.area2.href = "リンク先URL";
}
-->
</SCRIPT>

<a href="最初のリンク先URL" name="area2" >
  <img src="最初に表示する画像のURL" name="area1">
</a>

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

リンク付の方が実用的かもしれませんね。NFFさん、ご質問ありがとうございます。

「showimg4」「showimg5」…という感じに緑の部分の数字をかぶらないようにすればボタンを追加できます。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。