動画上にクリッカブルマップを作成する方法

カテゴリ video コアバージョン 8.4x 関連モジュール video map

 

コメント

ユーザー actbrain の写真

動画の上にクリッカブルなレイアーを配置することで実現可能です。
下の動画の「左上」「左下」「右上」「右下」でクリックしてみてください。

この例は動画の上にセルが4つのtableを配置しalertしているだけですが、tableの代わりにクリッカブルマップを配置するような事もできると思います。

<style>
    div.wrapper { position: relative; width: 600px; height: 400px; }
    div.wrapper #map { position: absolute; left: 0; top: 0; z-index: 1; width: 600px; height: 400px; }
    #map td { width: 300px; heigth: 200px; }
</style>
<div class="wrapper">
    <video id="test1" width="600" height="400" controls autoplay>
        <source src="./sites/default/files/mini-3.mp4" type="video/mp4">
        <p>※ご利用のブラウザでは再生できません</p>
    </video>
    <table id="map">
        <tbody>
        <tr>
            <td onclick="alert('左上')"></td>
            <td onclick="alert('右上')"></td>
        </tr>
        <tr>
            <td onclick="alert('左下')"></td>
            <td onclick="alert('右下')"></td>
        </tr>
        </tbody>
    </table>
</div>

ページ

OTHER FAQ

Drupal開発・運用の疑問/質問の答えはここに

無料ユーザー登録すると質問できます。

カテゴリ Core Ver. 関連モジュール タイトル
CSV Download 7.34 Views Excel Export Drupal7:Viewsで表示した内容をCSVダウンロード
アップデート 7.34 Core 簡単にCoreのセキュリティアップデートがしたい
表示 7.34 Views Infinite Scroll Facebookページのようにスクロールするとコンテンツが追加されるようなコントロール
ニュースレター 7.34 Simple news Simplenewsで追加顧客(リスト)だけにニュースレターを配信する方法
パフォーマンス 7.34 Server お金をかけないで冗長化するには
token 7.34 token オリジナルモジュールからtokenを提供する方法を教えて下さい。
Commerce 7.34 Commerce kickstart, Commerce file Commerceモジュール利用時のダウンロード製品登録方法
Drupal Commerce 7.34 Commerce order Drupal Commerce:カート内や購入手続きページ内の「Order total」が翻訳できない
Drupal Commerce 7.34 Commerce profile Drupal Commerceの請求情報、配送情報の住所を日本的(郵便番号、都道府県、市区町村、住所、、、)
アップデート 7.34 Distribution(Commerce Kickstart) drushでcommerce_kickstartのアップデートに失敗する
Database 7.34 PHP データベースクエリ(SELECT)時のSQL関数
コンテンツの作成 7.26 Form Ajax 入力フォームで#ajax使用時、#default_valueを書き換えても反映しない
サイトの構築 7.26 Field Views フォーム選択肢(プルダウンやチェックボックス、ラジオボタン)のカスタマイズ方法
表示 7.26 Views ページ内に2つ目Viewsブロックを設置するときPagerが連動してしまう
フォーム 7.34 Webform 動的なフォーム(webform)
コンテンツの作成 7.26 CKEditor Views Viewsでティザーを一覧するとページのレイアウトが崩れることがある
コンテンツの作成 7.34 CCK ノード入力フォームへパラメータを渡す
Messages 7.34 Disable messages 標準(コア)が表示する特定のメッセージ非表示にしたい
コンテンツの作成 7.34 ajax 標準のajaxフォーム(複数値:値の数=無制限)の制御l方法
Calendar 7.34 Calendar CalendarモジュールとGoogleカレンダーを同期するには

ページ