アダルトサイト作成

アダルトサーバ

アダルトASP

よくある質問

お役立ちテクニック

相互リンク

オンクリック

JavaScriptでのオンクリック

JavaScriptでのオンクリックについて記載します。

まずオンクリック(onClick)とは何か。オンクリックとは、WEBページ上でボタン、リンク等をクリックした際の動作/処理を表します。

オンクリック機能を使用することで「~が行われた後に~を行う」という処理が可能となります。


オンクリックのJavaScriptサンプル

JavaScriptでのオンクリックのサンプルソースを記述します。

サンプルは、ボタン押下後に別ページを開くと同時に表示されているページの画像を変更するプログラムです。

headタグに記述するJavascriptになります。

<script type="text/javascript">
// オンクリック定義
function demo(){
  var node = document.getElementById("target");

  // ボタン押下後、表示されるHTMLを設定
  node.innerHTML = "<p>Yahoo!JAPANのTOPページが別表示され、画像が変更されましたか?</p>
  <img src=\"../img/adult-affi_logo.jpg\" alt=\"\" width=\"400\" height=\"60\"/>";

  // ボタン押下後、元画像を表示しない設定 id属性:btmnone
  document.getElementById("btmnone").style.display="none";
}
</script>

bodyタグに記述するタグになります。

<!-- ボタン押下後、divタグの内容を表示 -->
<div id="target" align="center"></div>

<!-- ボタン押下後、divタグの内容が非表示 -->
<div id="btmnone" align="center">
  <p>↓↓&nbsp;18禁マークをクリック&nbsp;↓↓</p>

  <!-- 押下ボタンの設定 -->
  <button type="button" onClick="demo(),window.open('http://www.yahoo.co.jp/'),
    disabled = true;"style="background:url(../img/18kin.jpg);border:2px solid #00F;
    width:100px; height:87px;background-color:#FFFFFF">
  </button>
</div>

デモページはこちら


<< 「お役立ちテクニック /備忘メモ」に戻る

▲ページトップに戻る