data-○○○を自分で作った際、表示させるには？

独自データ属性というものがあるらしく、自分で定義したいのですが呼び出し方が分らず、アドバイスいただけないでしょうか。

具体的には、こちらのソースで言うところの「あいうえお」を定義した部分を画面上に表示したいと考えています。

<a href="images/hoge.jpg" data-title="あいうえお"><img src="images/ボタン.png" /></a>

これは、「ボタン.png」をクリックするとライトボックス風に「hoge.jpg」という画像が表示されるのですが、写真のタイトルを「あいうえお」と一緒に表示したいのですが、ここで行ったdata-title='あいうえお'という独自の属性は、どのように呼び出したらライトボックス内の画面に表示できるでしょうか？

調べてみたのですが、独自の属性はjavascriptなどを使用することが前提なのでしょうか？
とても地味な質問なのですが困っております。

お詳しい方いらっしゃいましたらアドバイス、宜しくお願いいたします。

No.1 ベストアンサー 回答者： gao57830 回答日時： 2015/12/15 17:16

＞<a href="images/hoge.jpg" data-title="あいうえお"><img src="images/ボタン.png" /></a>

ライトボックスでは、「title="あいうえお"」となっており、それが画像を表示した際のタイトルとして表示されます。
それと同じことをやりたいと言うことですね。
ライトボックスがそうであるように、Javascriptを使っているから実現出来ている事です。
属性「title」は、本来ツールチップを表示する為の属性です。
なので、カーソルを乗せると「あいうえお」とツールチップが表示されます。
ライトボックスでは、その「title」属性を取ってきてタイトルとして表示しているのです。
このように、本来は属性には何らかの機能を持った物なのですが「独自データ属性」が追加され機能を持たないデータが付けられるようになりました。
しかし、これもJavascriptを利用した場合の話です。
本来の画面遷移では、PostやGetなどで送信するのですが、その方法でも実現出来ないことなので割愛します。

ちなみに、独自データ属性とは、DOMのDataSetオブジェクトです。
DataSetなのでデータの個数が無制限に設定出来ます。