人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTML内のプルダウンメニューのリンク先を外部ファイルに記述をしたいのですが方法はありますか?教えてください。

●質問者: izumi6878
●カテゴリ:ウェブ制作
✍キーワード:HTML ファイル リンク 記述
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● izayoimizuki
●30ポイント

http://izayoi.nm.land.to/webmaster_1130473243/test.xml

[test.xml]

<?xml version=”1.0” encoding=”UTF-8”?>

<?xml-stylesheet type=”text/xsl” href=”test.xsl”?>

<meta>

<select>

<name>name</name>

<option><value>test1</value><text>test1</text></option>

<option><value>test2</value><text>test2</text></option></select>

</meta>

[EOF]


[test.xsl]

<?xml version=”1.0” encoding=”UTF-8”?>

<xsl:stylesheet version=”1.0”

xmlns:xsl=”http://www.w3.org/1999/XSL/Transform

xmlns=”http://www.w3.org/1999/xhtml”>

<xsl:output

method=”html”

media-type=”text/html”

doctype-system=”http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd

doctype-public=”-//W3C//DTD XHTML 1.1//EN”

indent=”yes”/>

<xsl:template match=”/”>

<html>

<head>

<title>test</title>

</head>

<body>

<xsl:apply-templates select=”meta/select”/>

</body>

</html>

</xsl:template>


<xsl:template match=”select”>

<select>

<xsl:attribute name=”name”>

<xsl:value-of select=”name”/>

</xsl:attribute>

<xsl:apply-templates select=”option”/>

</select>

</xsl:template>


<xsl:template match=”option”>

<option>

<xsl:attribute name=”value”>

<xsl:value-of select=”value”/>

</xsl:attribute>

<xsl:value-of select=”text”/>

</option>

</xsl:template>


</xsl:stylesheet>

[EOF]

基本的なXSLTベースのメタ化。

メタ化というよりもテンプレートに近い。

MSIEやFirefox,MozillaをはじめとするGecko 1.0以降のブラウザではクライアントサイド変換が可能です。

それ以外のクライアントに対してはサーバーサイドの変換をする事で対応します。


参考URLの上2つはテストケースとテストケース関連ファイルのZIPアーカイブです。(MSIE6.0,Mozilla1.0,Firefox等で動作)


3番目はサーバーサイドでXSLT変換を行うためのApacheモジュールのページ。

http://izayoi.nm.land.to/webmaster_1130473243/test.zip

http://www.mod-xslt2.com/

mod-xslt

◎質問者からの返答

ありがとうございました。


2 ● andi
●30ポイント

「プルダウンメニューのリンク先」とは多分こういうことだろうと予想して簡単なサンプルを作りました。


[sample.html]

<script src=”sample.js”></script>

<select onchange=”location.href=url[this.selectedIndex]”>

<option>Yahoo!</option>

<option>Google</option>

<option>goo</option>

</select>


[sample.js]

var url = new Array(

http://www.yahoo.co.jp/’,

http://www.google.com/’,

http://www.goo.ne.jp/

);

◎質問者からの返答

ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ