独自データ属性というものがあるらしく、自分で定義したいのですが呼び出し方が分らず、アドバイスいただけないでしょうか。
具体的には、こちらのソースで言うところの「あいうえお」を定義した部分を画面上に表示したいと考えています。
<a href="images/hoge.jpg" data-title="あいうえお"><img src="images/ボタン.png" /></a>
これは、「ボタン.png」をクリックするとライトボックス風に「hoge.jpg」という画像が表示されるのですが、写真のタイトルを「あいうえお」と一緒に表示したいのですが、ここで行ったdata-title='あいうえお'という独自の属性は、どのように呼び出したらライトボックス内の画面に表示できるでしょうか?
調べてみたのですが、独自の属性はjavascriptなどを使用することが前提なのでしょうか?
とても地味な質問なのですが困っております。
お詳しい方いらっしゃいましたらアドバイス、宜しくお願いいたします。
No.1ベストアンサー
- 回答日時:
><a href="images/hoge.jpg" data-title="あいうえお"><img src="images/ボタン.png" /></a>
ライトボックスでは、「title="あいうえお"」となっており、それが画像を表示した際のタイトルとして表示されます。
それと同じことをやりたいと言うことですね。
ライトボックスがそうであるように、Javascriptを使っているから実現出来ている事です。
属性「title」は、本来ツールチップを表示する為の属性です。
なので、カーソルを乗せると「あいうえお」とツールチップが表示されます。
ライトボックスでは、その「title」属性を取ってきてタイトルとして表示しているのです。
このように、本来は属性には何らかの機能を持った物なのですが「独自データ属性」が追加され機能を持たないデータが付けられるようになりました。
しかし、これもJavascriptを利用した場合の話です。
本来の画面遷移では、PostやGetなどで送信するのですが、その方法でも実現出来ないことなので割愛します。
ちなみに、独自データ属性とは、DOMのDataSetオブジェクトです。
DataSetなのでデータの個数が無制限に設定出来ます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
二次元配列を使って順位をだす...
-
GASでGoogleフォームの自動返信...
-
イラストレーター、縦中横のシ...
-
Q&A掲示板の入力フォームに文字...
-
画面遷移を行わずに同一ページ...
-
正規表現について質問です。条...
-
変数名をどのようにつけるのが...
-
スマホ上で、左右スワイプで次...
-
React hooksが値を返して配列変...
-
セレクトを全て選択されていな...
-
変数のスコープの問題?
-
EasyUIのSubGrid(jquery)にお...
-
指定時間になったら、WEBサイト...
-
メールフォームの日付入力フォ...
-
iOSのみダブルタップが必要
-
HTMLタグに複数のクラスを設定...
-
Googleフォームで選択肢に応じ...
-
disabled プロパティが表示され...
-
二次元配列の中の各行の要素を...
-
HTMLで作った時報アプリが動き...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
C言語について。
-
C言語について。
-
C言語について。
-
C言語について。
-
サーブレットからパラメータをP...
-
includeアクションのflush属性...
-
JSPでリンクを利用してパラ...
-
submitとは?
-
Struts2でのスタイルシート利用...
-
getElementsByTagNameのタグの...
-
iframeのsrc属性で指定したサー...
-
Spreadの行数取得
-
HTML フォームデータの送信先
-
UserForm
-
ワイルドスピードのドミニクト...
-
これ絶対に見たほうがいいって...
-
映画の撮影
-
オススメのAV女優は誰ですか?
-
リベリオンのガン・カタについて
-
ドラゴンボールでいう1000年に...
おすすめ情報