JavaScriptで画像でリンク先が出現するソースコード

前へ 次へ
このQ&Aのポイント
  • JavaScriptを使用して、ボタンではなく画像でリンク先が出現するソースコードを実現します。
  • HTMLとJavaScriptを組み合わせて、特定の画像をクリックすることでリンク先が表示される機能を実装します。
  • このソースコードでは、指定した画像をクリックすると、指定したURLに遷移するようになっています。
回答を見る
  • ベストアンサー

JavaScriptのソースコード教えてください。

JavaScriptで下記はボタンではなく画像でリンク先が出現するソースを実現したいです。 <script type="text/javascript"などでjsファイルを読み込むような感じでもいいです。 ここまでがjsファイルでここまでがhtmlと言うように分けて記述してもらえると助かります。 <html> <head> <title>oooのページ</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script language="javascript"> <!-- function next(){ location.href="ttp://www.ooo.jp/ooo/123456"; } function Check() { var obj = document.getElementById("agreement"); if(obj.scrollTop + obj.clientHeight >= obj.scrollHeight - 1) { document.form1.submit1.disabled = false; document.form1.submit1.focus(); } } //--> </script> </head> <body bgcolor="#FFFFFF" text="#000000"> <table width="500" border="0" cellspacing="0" cellpadding="5"> <tr> <td align="center" bgcolor="#999999"><font color="#000000"><b>ご利用規約</b></font></td> </tr> <form name="form1" action="" method="post"> <tr> <td align="center"> <div id=agreement style="width:400px; height:100px; overflow: scroll; border:1px solid gray;" onScroll="Check()"> テキスト<br> テキスト<br> テキスト<br> テキスト<br> テキスト<br> テキスト<br> </div> <input type="button" value="依頼する" name="submit" id="submit1" disabled onClick="next()"> <input type="submit" value="キャンセル" name="submit2" id="submit2"　onclick="history.back()"> </td> </tr> </form> </table> </body> </html>

質問者が選んだベストアンサー

  • ベストアンサー
  • mokpok
  • ベストアンサー率100% (2/2)
回答No.2

画像（imgタグ）にも onclick="next()" は付けられるので、 <img src="hoge.png" onclick="next()" />　とでもすればいけます。 ただ、提示ソースの依頼するボタンにあるdisabledのような機能はimgタグにはないので、 代わりの条件判断をnext()関数内に加える等の工夫が要りますが。 また、<input type="image"> もあります。 http://www.tagindex.com/html_tag/form/input_image.html disabledも使えますが、ボタンのように見た目は変わりません。

domaru
質問者

お礼

なるほど、参考ページまで教えて頂き有難うございました。 参考にさせて頂きます。

その他の回答 (1)

  • chiune
  • ベストアンサー率24% (30/124)
回答No.1

直接の回答ではありません。 なぜ「JavaScriptで」なのでしょうか？ 特段パラメータを渡しているわけでもないようなので、普通に<a>タグでダメな理由が分かりません。 <a href="http://www.ooo.jp/ooo/123456"> <img src="picture01.jpg" border=0> </a>

domaru
質問者

お礼

現在HP上で利用している物がJavaScriptであった為、それに改良を加える為でした。 コメント頂き有難うございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptでログインページの作成

    JSPを作成しているのですが、javascirpt構文の方が 多いため、こちらで質問をさせて頂きます。 javascript, html で　ログインページを作成しています。 <%@ page contentType="text/html;charset=Shift_JIS" %> <script type="text/javascript" language="javascript"><!-- 　　　　function Submit(name,pass,f){ 　if(name == null){ document.getElementBy(f).action="http://www.yahoo.co.jp"; document.getElementById(f).submit(); }else{ document.getElementById(f).action="http://www.google.co.jp"; document.getElementById(f).submit(); } } //--></script> <form action="login.jsp" method="post" NAME="f1"> <table border="1" width="30%"> <tr> <td>ユーザーID:</td> <td><input type="text" name="admin" size="25" value=""></td> </tr> <tr> <td>パスワード:</td> <td><input type="password" password="password" value=""></td> </tr> </table> <%--- これが悪いのかも!? --- %> <% String name = request.getParameter("name"); String password= request.getParameter("password"); %> <input type="submit" value="ログイン" onClick="Submit('name','password','f1');"> </form> </body> </html> ログインボタンをクリックして、name,password,f1(formの名前）を function のSubmitに値を渡したいのですが、nullが渡されてしまいます。 テキストボックスで入力された値を渡したいのですが、 javascript,htmlの知識が乏しいため、どこがおかしいのかわかりません。 もしわかる方が居ましたら、よろしくお願いたします。

  • Javascriptで自動計算の合計の式でエラー

    度々すみません。 前回こちらで質問させて頂きましたものです。 http://okwave.jp/qa/q8737139.html 教えて頂いた内容を確認してフォームの合計を表示するところまでは出来たのですが、合計する列をひとつ増設した所、D列の合計は教えて頂いた式で合計が無事表示されたのですが、C列の合計が合計ではなく文字の並びが表示されてしまいました。 色々調べてみたのですが、この現象の原因がよくわかりません。 何かエラーがあるのでしょうか。 お知恵を貸して頂けると嬉しいです。 宜しくお願いします。 ＜スクリプト＞ <script type='text/javascript'> function keisan(){ var price1 = (document.form1.a1.value) * (document.form1.b1.value) * (document.form1.c1.value); document.form1.金額1.value = price1 ; var price2 = (document.form1.a2.value) * (document.form1.b2.value) * (document.form1.c2.value); document.form1.金額2.value = price2 ; var price3 = (document.form1.a3.value) * (document.form1.b3.value) * (document.form1.c3.value); document.form1.金額3.value = price3 ; document.form1.total.value = price1 + price2 + price3; var f1 = (document.form1.c1.value); document.form1.c1.value = f1 ; var f2 = (document.form1.c2.value); document.form1.c2.value = f2 ; var f3 = (document.form1.c3.value); document.form1.c3.value = f3 ; document.form1.ctotal.value = f1 + f2 + f3; } </script> ＜HTMLソース＞ <body> <form method="post" name="form1"> <table width="473" border='1'> <tr> <td align='center'>&nbsp;</td> <td align='center'>A</td> <td align='center'>B</td> <td align='center'>C</td> <td align='center'>D</td> </tr> <tr> <td>1</td> <td><input type='text' name='a1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c1' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額1' style='width:100px' /></td> </tr> <tr> <td>2</td> <td><input type='text' name='a2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c2' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額2' style='width:100px' /></td> </tr> <tr> <td>3</td> <td><input type='text' name='a3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c3' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額3' style='width:100px' /></td> </tr> <tr> <td colspan="3" align='right'>合計</td> <td><input type='text' name='ctotal' style='width:25px' /></td> <td><input type='text' name='total' style='width:100px' /></td> </tr> </table> </form> </body>

  • JavaScriptのロジック？

    <HTML> <HEAD> <TITLE>JavaScript</TITLE> <SCRIPT type="text/javascript"> <!-- /* 同じ値を二重表示 */ function funDouble(){ alert( document.SampleForm.nameOne.value ); document.SampleForm.nameTwe.value = document.SampleForm.nameOne.value + document.SampleForm.nameOne.value; alert(document.SampleForm.nameTwe.value); } // --> </SCRIPT> </HEAD> <BODY> <form name="SampleForm" method="POST"> <table align="center"> <TR> <TD>OnClick機能 :　<Input type="text" name="nameOne" value="Ok"><Input type="submit" value="押して！" onclick="funDouble()" ></TD> <TD>| 結果 => | </TD> <TD>　OnChange後 同じ値を２重表示 ;　<Input type="text" name="nameTwe" value="123456"></TD> </TR> </table> </form> </BODY> </HTML>

  • javascriptによる計算

    テキストボックス「a1～6」の値とテキストボックス「b1～6」に入力された値を足し算してテキストボックス「ｃ1～6」（例…c[i] = a[i] + b[i]）を計算するJavaScriptを作成しているのですが、結果がundefinedになってしまい上手くいきません。どうやったら動くのかどうかご教授ください。 以下ソース↓ <script language ="JavaScript"> function plus() { var intResult = 0; for (i=1; i<=6; i++){ intResult[i] = 0; if (!isNaN(document.forms["A"].all["a"+i].value) && !isNaN(document.forms["B"].all["b"+i].value)){ intResult[i] += parseInt(document.forms["A"].all["a"+i].value); intResult[i] += parseInt(document.forms["B"].all["b"+i].value); } <table border = 1> <tr> <td> <table border = 1> <tr> <td> <form name="A"> <input type = "text" size = 5 name = "a1"></input> </td> <td> <input type = "text" size = 5 name = "a2"></input> </td> <td> <input type = "text" size = 5 name = "a3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a4"></input> </td> <td> <input type = "text" size = 5 name = "a5"></input> </td> <td> <input type = "text" size = 5 name = "a6"></input> </form> </td> </tr> </table> </td> <td> <table boeder = 1> <tr> <input type = "button" onClick="plus()" value = "＋"></input> </tr> </table> </td> <td> <table border = 1> <tr> <td> <form name = "B"> <input type = "text" size = 5 name = "b1"></input> </td> <td> <input type = "text" size = 5 name = "b2"></input> </td> <td> <input type = "text" size = 5 name = "b3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b4"></input> </td> <td> <input type = "text" size = 5 name = "b5"></input> </td> <td> <input type = "text" size = 5 name = "b6"></input> </form> </td> </tr> </table> </td> </tr> </table> 答え <form name = "C"> <table border = 1> <tr> <td> <input type = "text" size = 5 name = "c1"></input> </td> <td> <input type = "text" size = 5 name = "c2"></input> </td> <td> <input type = "text" size = 5 name = "c3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c4"></input> </td> <td> <input type = "text" size = 5 name = "c5"></input> </td> <td> <input type = "text" size = 5 name = "c6"></input> </td> </tr> </table> </form> </body> document.C.all["c"+i].value = intResult[i]; } } </script>

  • ボタンクリックでフォーカス移動

    JavaScript超ビギナーなので方法がよくわかりません。 フォームにテキストボックス（配列）４個あり ボタンを押すたびに未記入のテキストボックスにカーソルを移動したいのですが。どのようにしたらいいでしょうか。 <form name="form1" method="post"> <table width="200" border="1"> <tr><td ><input type="submit" name="Submit" value="送信"></td></tr> <tr><td ><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> </table> </form>

  • アラートチェック＿javascript

    javascript初心者です。 15個のテキストボックスに0or1のみ入力されるようにチェックを行いたいです。 ★のところでランタイムエラーが出ます。 <SCRIPT LANGUAGE="javascript"> <!-- var isFristTime = false; function fn_submit(obj) { for(var a=1; a<16; a++){ var flag = "fl1_" + a; ★ if(obj.flag.value.match(/^[0-1\s]$/)){ alert("フラグは0か1のみです。"); break; } } } // --> </script> </head> <body> <form name="form0" action="alert_test.asp" method="POST" OnSubmit="return fn_submit(this);"> <table border="1" bordercolor="#000000" rules="none"> <tr> <% for i=1 to 15 flag = "fl1_"&i %> <td>フラグ<%= i%></td> <td width="50" align="left"> <input type="text" name=<% =flag %> style="IME-MODE: disabled" size="2" maxlength="1" value="0"></td> <tr> <% next %> </tr> </table> <input type="submit" value="チェック"> </form>

  • PHP POSTについて質問です

    　　 こんにちわ PHP初心者です。 今ショッピングカートづくりをしています。 そこでピンチなのでご指導お願いいたします。 商品を発送する送り先情報を必要な数だけonclickで一件一件増やしもらって その情報を次のページで確認してもらうようにしたいのですが <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var tbl_cnt = 1; jQuery(document).ready(function($) { $('#add_btn').click(function() { var original = $('#form_set_' + tbl_cnt); tbl_cnt++; $(original).clone().insertAfter(original) .attr('id', 'form_set_' + tbl_cnt) .find('label').each(function(idx, obj) { $(obj).attr('for', $(obj).attr('for').replace(/_[0-9]+$/, '_' + tbl_cnt)); }).end() .find('input').each(function(idx, obj) { $(obj).attr({ 'id' : $(obj).attr('id').replace(/_[0-9]+$/, '_' + tbl_cnt), 'name' : $(obj).attr('name').replace(/_[0-9]+$/, '_' + tbl_cnt) }).val(''); }); }); }); </script> <form action="shop_check.php" method="post"> <table id="form1"> <tbody> <tr> <td><label for="okuriname">氏名</label></td> <td><input type="text" id="okuriname" name="okuriname[$i]"></td> </tr> <tr> <td><label for="okuriemail">email</label></td> <td><input type="text" id="okuriemail" name="okuriemail"></td> </tr> <tr> <td><label for="okuripostal1">郵便番号</label></td> <td><input type="text" id="okuripostal1" name="okuripostal1">-</td> <td><input type="text" id="okuripostal2" name="okuripostal2"></td> </tr> <tr> <td><label for="okuriaddress">住所</label></td> <td><input type="text" id="okuriaddress" name="okuriaddress"></td> </tr> <tr> <td><label for="okuritel">電話番号</label></td> <td><input type="text" id="okuritel" name="okuritel"></td> </tr> </tbody> </table> <input type="button" value="送り先の追加" id="add_btn"><br> <input type="submit" value="送信" name="submit"> </form> この後どのようにしたら次のページで 複数の情報を受け取ればいいのでしょうか？ （javascriptはweb上にあったものを引用してます。） javascriptの事もわかっていませんなのでお手柔らかにおねがいします。

    • ベストアンサー
    • PHP
  • JavaScriptを使った計算フォーム

    JavaScriptを使った計算フォームで質問です。 人数をテキストボックスに入力し、そのあと項目を選ぶと計算がされるようにしたいのですが ラジオボタンが持っているvalueを取り出せません。 下記の「←------???」と書いてあるところを何とかすれば完成だと思うのですが、 どなたか教えていただけないでしょうか？ <script language="JavaScript" type="text/JavaScript"> function sjLeft(source,length) { if (source.length < length) { return (""); } return source.substr(0, length); } function sjReplace(source,start,length,target) { sjlen = source.length; if ((start > sjlen) || (start < 0)) { return String(""); } return String(sjLeft(source,start ) + target + source.substr(start+length, sjlen)); } function sjInsert( source, start, target) { return sjReplace(source,start,0,target); } function fcheck(obj) { s1_2value = ??? * new Number(document.form1.n1.value);　←------??? document.form1.s1_2.value = String(s1_2value); document.form1.total.value = s1_2value; return true; } </script> <form name="form1" method="POST"> <table width="400" border="1"> <tr> <td>人数</td> <td></td> <td><input type=text name=n1 size=8 onChange="fcheck(this);">人</td> <td></td> </tr> <tr> td><input name="n2" type="radio" value="13000" onChange="fcheck(this);">食事A</td> <td>\13,000</td> <td>×人数</td> <td><input name=s1_2 type=text size=8 readonly>円</td> </tr> <tr> <td colspan="2">&nbsp;</td> <td>総計</td> <td><input type=text readonly name=total size=10>円</td> </tr> </table> </form>

  • javascriptの変数の渡し方

    ラジオボタンで選択した値によって表示するテーブルを変えるフォームを作っています。 AAAは入力ボックスが1つ BBBは入力ボックスが2つ 同じphpへ送信して、入力ボックスへデータは入るのですが、javascriptの値を渡すことが出来ません。 BBBでsubmit後、BBBの入力ボックスを表示することは出来ますでしょうか。 <? echo "<form method=post action=?>"; echo "<input type=radio name='user' onclick='change_user(this.value)' uid='user' value=1"; if($user==1){ echo " checked"; } echo ">AAA"; echo "<input type=radio name='user' onclick='change_user(this.value)' uid='user' value=2"; if($user==2){ echo " checked"; } echo ">BBB"; echo "<br>"; echo "<span id=inner>"; echo "<table>"; echo "<tr>"; echo "<td>AAAのフォーム</td>"; echo "<td><input name=form1 type=text value=$form1></td>"; echo "</tr>"; echo "</table>"; echo "</span>"; echo "<span id=outer>"; echo "<table>"; echo "<tr>"; echo "<td>BBBのフォーム</td>"; echo "<td><input name=form1 type=text value=$form1></td>"; echo "<td><input name=form2 type=text value=$form2></td>"; echo "</tr>"; echo "</table>"; echo "</span>"; echo "<br>"; echo "<input type=submit value=submit>"; echo "</form>"; ?> <script language='javascript'> var inner = document.getElementById('inner'); var outer = document.getElementById('outer'); function change_user (uid) { if (uid == '2') { inner.style.display = 'none'; outer.style.display = ''; } else { inner.style.display = ''; outer.style.display = 'none'; } } change_user(document.getElementById('user').value); </script>

    • ベストアンサー
    • PHP
  • ラジオボタンで入力項目の可・不可を切り替える方法

    雑誌やネットを調べ、ラジオボタンで入力項目の可・不可を切り替える JavaScriptを見つけたのですが、思うように動作しません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>Sample</title> <script type="text/javascript"> <!-- function radioChange() { if(document.form1.radioSelect[0].checked == true) { document.form1.04text.disabled = false; document.form1.04text.style.backgroundColor='#FFFFFF'; document.form1.05text.disabled = false; document.form1.05text.style.backgroundColor='#FFFFFF'; document.form1.06text.disabled = false; document.form1.06text.style.backgroundColor='#FFFFFF'; document.form1.07text.disabled = true; document.form1.07text.style.backgroundColor='#D4D0C8'; document.form1.08text.disabled = true; document.form1.08text.style.backgroundColor='#D4D0C8'; document.form1.09text.disabled = true; document.form1.09text.style.backgroundColor='#D4D0C8'; } else if(document.form1.radioSelect[1].checked == true) { document.form1.04text.disabled = true; document.form1.04text.style.backgroundColor='#D4D0C8'; document.form1.05text.disabled = true; document.form1.05text.style.backgroundColor='#D4D0C8'; document.form1.06text.disabled = true; document.form1.06text.style.backgroundColor='#D4D0C8'; document.form1.07text.disabled = false; document.form1.07text.style.backgroundColor='#FFFFFF'; document.form1.08text.disabled = false; document.form1.08text.style.backgroundColor='#FFFFFF'; document.form1.09text.disabled = false; document.form1.09text.style.backgroundColor='#FFFFFF'; } else { document.form1.04text.disabled = true; document.form1.04text.style.backgroundColor='#D4D0C8'; document.form1.05text.disabled = true; document.form1.05text.style.backgroundColor='#D4D0C8'; document.form1.06text.disabled = true; document.form1.06text.style.backgroundColor='#D4D0C8'; document.form1.07text.disabled = true; document.form1.07text.style.backgroundColor='#D4D0C8'; document.form1.08text.disabled = true; document.form1.08text.style.backgroundColor='#D4D0C8'; document.form1.09text.disabled = true; document.form1.09text.style.backgroundColor='#D4D0C8'; } } //--> </script> </head> <body onload="radioChange()"> <form action="" method="post" name="form1"> <table> <tr> <td> <input name="radioSelect" type="radio" onclick="radioChange()" value="1" /> 国内旅行 <input name="radioSelect" type="radio" onclick="radioChange()" value="0" /> 海外旅行</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td> 国内編：<br /> 希望地 <input type="text" name="04text" /> <br /> 希望日： <input type="text" name="05text" /> <br /> 乗り物： <input type="text" name="06text" /> </td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>海外編：<br /> 希望地 <input type="text" name="07text" /> <br /> 希望日： <input type="text" name="08text" /> <br /> 乗り物： <input type="text" name="09text" /> </td> </tr> </table> </form> </body> </html> テキストボックスの「name」を、英字から始めれば解決するのですが 事情があり、nameを数字で始める必要があります。 この解決方法を教えていただけませんでしょうか。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する