画像を動かし、そこにリンクを貼りたいのですが可能でしょうか?
下のソースの中にリンクを埋め込みたいのですがどうやっても
うまくいきません。根本的にやり方がちがうのでしょうか・・・。

document.write("<div id=\"dot["+ m +"]\" style=\"POSITION: absolute; Z-INDEX: "
+ m +" VISIBILITY: visible; TOP: 10px; LEFT: 10px; width:1;\"><img src="
+ img_name + " ></div>");

A 回答 (1件)

リンクを埋め込んだ際のソースがないため、なんともいませんが、とりあえず



a="";
a+= "<div id=\"dot["+ m +"]\" style=\"POSITION: absolute; Z-INDEX: ";
a+= m +" VISIBILITY: visible; TOP: 10px; LEFT: 10px; width:1;\"><img src=";
a+= img_name + " ></div>";

alert(a);
document.write(a);

というようにソースを書きかえ、alertで望みどおりのHTMLタグを書けているか確認してみては?
    • good
    • 0
この回答へのお礼

早速の回答有り難うございます。

試してみましたが、やっぱり駄目です。
全ソースを載せますのでよろしかったら見てみてください。

<SCRIPT LANGUAGE="JavaScript">
<!--
var xpos0=0;var ypos0=0;
n=30;
var _width = 400;
var _height = 400;
var _width = screen.width*1/5;
var _height= screen.height*1/3;
xpos0 = _width+5;
ypos0 = _height;
xpos=new Array();
ypos=new Array();
i=new Array();
l=new Array();
dot=new Array();
for (m=1;m<(n+1);m++){
xpos[m] = _width+10*Math.random();
ypos[m] = _height-10*Math.random();
i[m]=xpos[m]-xpos0;
l[m]=ypos[m]-ypos0;
}
timeID=0;
function hanabi() {
for (m=1;m<(n+1);m++){
document.all["dot["+m+"]"].style.pixelTop = ypos[m];
document.all["dot["+m+"]"].style.pixelLeft = xpos[m];
xpos[m]=xpos[m]+i[m];
ypos[m]=ypos[m]+l[m];
l[m]=l[m]+0.1;
if ((xpos[m]<=5)||(ypos[m]<=5)){
xpos[m] = _width+10*Math.random();
ypos[m] = _height-10*Math.random();
i[m]=xpos[m]-xpos0;
l[m]=ypos[m]-ypos0;
}
else if ((xpos[m]>=screen.width*5/10)||(ypos[m]>=screen.height*6/10)){
xpos[m] = _width+10*Math.random();
ypos[m] = _height-10*Math.random();
i[m]=xpos[m]-xpos0;
l[m]=ypos[m]-ypos0;
}
}
timeID=setTimeout("hanabi()",1);
}
//-->
</SCRIPT>

<body bgcolor=white onLoad="hanabi()">
<SCRIPT LANGUAGE="JavaScript">
<!--
for (m=1;m<(n+1);m++){
img_name="images/mo-musu/marippe25.gif";
if (m<23) {img_name = 'images/mo-musu/aichan01.gif';}
if (m<12) {img_name = 'images/mo-musu/goppin13.gif';}
if (m<3) {img_name = 'images/mo-musu/kagochan20.gif';}
if (m<2) {img_name = 'images/mo-musu/kaorin19.gif';}
document.write("<div id=\"dot["+ m +"]\" style=\"POSITION: absolute; Z-INDEX: "
+ m +" VISIBILITY: visible; TOP: 10px; LEFT: 10px; width:1;\"><img src="
+ img_name + "></div>");
}
//-->
</SCRIPT>

お礼日時:2002/03/19 07:03

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

QIE6でmax-width:100px; max-height:100pxを実現にするには

BLOGでエントリーから画像だけを読み出しサムネイルを集めたhttp://www.photocase.com/photobrowser.aspのようなページを作ろうと考えています。
画像の大きさはまちまちなのでmax-width:100px; max-height:100pxとしました。
しかしmax/min-height/widthはIE6に対応しません。
そこで▼以下の2つを試してみました。
・max-width in Internet Explorer(IE独自のexpressionを利用)
 http://www.svendtofte.com/code/max_width_in_ie/
・minmax.js module(Java Scriptを利用)
 http://doxdesk.com/software/js/minmax.html
ただしこれらの使用方法に従って記載しても、max-width:100px; height:100px(縦長の画像は100px×100pxに)またはwidth:100px; max-height:100px(横長の画像は100px×100pxに)となってしまいます。
Java Script、CSS、または両方を使って解決できる方法がありましたら教えていただけませんでしょうか。
よろしくお願いいたします。

BLOGでエントリーから画像だけを読み出しサムネイルを集めたhttp://www.photocase.com/photobrowser.aspのようなページを作ろうと考えています。
画像の大きさはまちまちなのでmax-width:100px; max-height:100pxとしました。
しかしmax/min-height/widthはIE6に対応しません。
そこで▼以下の2つを試してみました。
・max-width in Internet Explorer(IE独自のexpressionを利用)
 http://www.svendtofte.com/code/max_width_in_ie/
・minmax.js module(Java Scriptを利用)
 http://doxdesk.com/soft...続きを読む

Aベストアンサー

#1です。

> これをサムネイルの表示をする時点でそれぞれ本来の縦横比率に表示する
> ことは難しいでしょうか。

これではどうでしょう。個々のサムネイルごとに修正をかけるので、少しはましかと……。

<html>
<head>
<style type="text/css"><!--
/* 100x100の領域だけ取って、表示しない。 */
img.thumb { visibility: hidden; width: 100px; height: 100px; }
/* ただし、これではスクリプトOFFだと全く表示されない。 */
--></style>
<script type="text/javascript"><!--
function func(img) {
/* 一旦縦横とも"auto"にして実寸を取得。長い方を"100px"に再設定。そして表示。 */
img.style.width = "auto";
img.style.height = "auto";
if (img.width > img.height) {
if (img.width > 100) img.style.width = "100px";
} else {
if (img.height > 100) img.style.height = "100px";
}
img.style.visibility = "visible";
}
--></script>
</head>
<body>
<p>
<img class="thumb" src="適当な画像1" onload="func(this)">
<img class="thumb" src="適当な画像2" onload="func(this)">
<img class="thumb" src="適当な画像3" onload="func(this)">
</p>
</body>
</html>

#1です。

> これをサムネイルの表示をする時点でそれぞれ本来の縦横比率に表示する
> ことは難しいでしょうか。

これではどうでしょう。個々のサムネイルごとに修正をかけるので、少しはましかと……。

<html>
<head>
<style type="text/css"><!--
/* 100x100の領域だけ取って、表示しない。 */
img.thumb { visibility: hidden; width: 100px; height: 100px; }
/* ただし、これではスクリプトOFFだと全く表示されない。 */
--></style>
<script type="text/javascript"><!--
function func(im...続きを読む

Q&= ~0x0c; &= ~0x03; |=1;

JavaScriptで分からないコードがあるので教えてください。


■変数設定
var hoge = 0;


■変数格納
・キーを押した時の条件分岐
  ~なら hoge |= 1;
  または hoge |= 2;
  または hoge |= 3;
  または hoge |= 8;

・キーを離した時の条件分岐
  ~なら hoge &= ~0x0c;
  または hoge &= ~0x03;


■変数使用
・swithch文の条件分岐に利用
  (hoge&0x03)
  (hoge&0x0c)


■質問
・どういう意味でしょうか?
・文字コード?
・ビット演算?

Aベストアンサー

ビット演算してるわね

x = x + a

x += a
って書くことができるの

つまり
hoge |= 1

hoge = hoge | 1
のことね

~はNOTのこと

0x
はアスキーコードの16進数表記ねきっと

0x0c は改ページを意味していて
0x03 は文章の最後を意味している
と思われるわ
全文がないので推測だけど

Q
勘でいれたら・・・

はじめまして。JavaScript初めてです。
わからないことがあるので、教えてください。

画面を左右にフレームで分割して、左フレームのリストボックスから要素を選択すると、その要素に該当した表が右フレームに表示される、というものを作成しました。
左フレーム:name = index
右フレーム:name = main
こんな感じ(左フレーム)↓
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function disp(obj){
右フレームの表のHTML作成をしている

parent.main.document.open();
parent.main.document.write
(desc.innerHtml = 上で作成したHTML);
parent.main.document.close();
}
-->
</SCRIPT>
</HEAD>
<BODY onload="disp(form)">
※<DIV id="desc"></DIV>
<FORM name="form">
<SELECT name="MListBox" onchange="disp(form)">
<xsl: apply-templates select="~"/>
</SELECT>
</FORM>
*<DIV id="desc"></DIV>
</BODY>
</HTML>
  ・
  ・ <xsl文章>
  ・

初めは、※←のところがなく、右と左のフレーム両方に表が出力されてしまっていました。でも※←のところに<DIV id="desc"></DIV>を勘で入れたとたん、右フレームだけに表が出力されるようになりました。(期待の結果)
自分の予想では、*←のところのみで期待の結果が得られる予定で、(disp()でHTMLの出力を右フレームに指定しているから)何故※のところを追加したことで期待通りの動きをしたのかが謎です。

わかりづらい説明で申し訳ないですが、教えてくださる方がいらっしゃいましたら、どうぞお願いします。

はじめまして。JavaScript初めてです。
わからないことがあるので、教えてください。

画面を左右にフレームで分割して、左フレームのリストボックスから要素を選択すると、その要素に該当した表が右フレームに表示される、というものを作成しました。
左フレーム:name = index
右フレーム:name = main
こんな感じ(左フレーム)↓
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function disp(obj){
右フレームの表のHTML作成をしている

parent.main.document.open();
parent....続きを読む

Aベストアンサー

質問文にあるソースで目指しているものがいまいち掴み切れていないかも知れないので、見当違いなことを書くかもしれませんが…

<DIV id="desc"></DIV>

を複数記述する事で意図した結果になったということですが、それはおそらく記述エラーが元でそうなっているのだと思います。
id名は、各HTML文書内で固有の名前を与える属性として扱われます。 平たく言えば、一つのHTMLファイル内で、一つの要素に与えたid名はその一回しか使えません。 ですので、特定の要素で既に使われているid名を、それとは別の要素に対して与える事が許されていません。
ご質問文のソースの場合、一つのHTML文書内で同じid名が複数の要素に与えられる事になり、一つの特定の要素を絞り込むことができなくなっています。 おそらくは、JavaScriptが特定のid名を持つ一つの要素を取り出そうとし、同じid名を持つ要素が複数あるために特定の要素を識別するのに失敗したせいで、左のフレームに表示されるはずのスクリプトで生成したHTMLソースが、表示先を見失って表示されなくなっているだけだと思われます。(なぜエラーメッセージが出ないのかについては、IEの動作上の問題と言う事になるのではないでしょうか)
試しに、※の部分の<DIV id="desc"></DIV>を残して、*の部分の<DIV id="desc"></DIV>を消し、動作させてみてください。 それで元のように右フレームにだけ表示させたかったHTMLが左フレームにも表示されるようでしたら、一見期待通りの動きになった原因は、上記のように同じid名を複数の要素に与えたという記述ミスと、それから生じたスクリプトの動作不良と言う事になると思います。

ソース的にスマートに目的の動作を確保するのであれば、<DIV id="desc"></DIV>を複数記述するのではなく、スクリプト内の

parent.main.document.open();
parent.main.document.write(desc.innerHtml = 上で作成したHTML);
parent.main.document.close();

この部分の記述を

parent.main.document.open();
parent.main.document.write(上で作成したHTML);
parent.main.document.close();

に直すのが良いと思います。
フレームmainにだけ、スクリプトで生成したHTMLを表示するということが狙いだったのであれば、それまで意図通りの動作をしなかったのは、parent.main.document.write()の中で、「desc.innerHTML =」という記述をしているために、「上で生成したHTML」を、右フレーム内に書き出すのと同時に、descというidを持つ要素(*の<DIV id="desc"></DIV>)の中のHTMLソースとして再定義していたためと思われます。
スクリプトを上のように修正すれば、HTMLソースの書式違反による動作不良ではなく、スクリプトの正常な動作で、右フレームにだけスクリプトで生成したHTMLソースを表示させるという結果を得られると思います。

参考になれば。 見当違いでしたら、ごめんなさい。

質問文にあるソースで目指しているものがいまいち掴み切れていないかも知れないので、見当違いなことを書くかもしれませんが…

<DIV id="desc"></DIV>

を複数記述する事で意図した結果になったということですが、それはおそらく記述エラーが元でそうなっているのだと思います。
id名は、各HTML文書内で固有の名前を与える属性として扱われます。 平たく言えば、一つのHTMLファイル内で、一つの要素に与えたid名はその一回しか使えません。 ですので、特定の要素で既に使われているid名を、それとは別の要素...続きを読む

Qの違い

現在jQueryを使ったプログラムをしていて、気になった点があったので質問させていただきました。

具体的には
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"/>
<script type="text/javascript">
function show() {
}
</script>

こんなソースを書いていましたが、showメソッドが認識されていませんでした。

そこで
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"></script>
とかくと、後ろのメソッドも認識されました。

ここで疑問なのは</>と</script>の違いです。
この2つは何がちがうのでしょうか?

現在jQueryを使ったプログラムをしていて、気になった点があったので質問させていただきました。

具体的には
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"/>
<script type="text/javascript">
function show() {
}
</script>

こんなソースを書いていましたが、showメソッドが認識されていませんでした。

そこで
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1...続きを読む

Aベストアンサー

https://www.google.com/search?q=HTML+%E7%A9%BA%E8%A6%81%E7%B4%A0
違いっていうか。
<hoge />って書いていいのは「何もはさまないタグ」だけ。<img><link><br>…
<script>は、確かにsrc属性を設定すれば何もはさまなくはなりますが、「はさまないタグ」ではないから「/>」で終わることはできない。<img /> を<img></img>にすることはできるが逆はできません。

試してないから分からないが、質問文の記述では最初の間違ったタグが開始タグとして認識され以降3行がスクリプトとして認識され、結果文法エラーとなっているのでは。というか、その書き方でほかの部分のソースの解釈に影響出てないんですか?

Q 内に書くことはできません」

元アルバイト先に頼まれてサイトを作り運営しているのですが、わからないことがあるので教えて下さい。

サイトはXHTML1.0 Transitional で作っており、ここに、http://fmono.sub.jp/ の「w3Analyzer」を組み込みアクセス解析をしています。サイト自体もこのアクセス解析も正常に動作しています。
ただ、このサイトをhttp://openlab.ring.gr.jp/k16/htmllint/htmllint.htmlで構文チェックすると、アクセス解析のタグにエラー「<img>を~行目の<script>~</script>内に書くことはできません。」が表示されてしまいます。
エラーが表示されるタグは下記のようなものです。

<script type="text/javascript">
document.write('<img src="http://~/w3a/writelog.php?ref='+document.referrer+'" width="1" height="1" />');
</script> >

アクセスログは普通に取得できているので問題ないのですが、もし上記エラーを回避する方法があればご教授下さい。よろしくお願いします。

元アルバイト先に頼まれてサイトを作り運営しているのですが、わからないことがあるので教えて下さい。

サイトはXHTML1.0 Transitional で作っており、ここに、http://fmono.sub.jp/ の「w3Analyzer」を組み込みアクセス解析をしています。サイト自体もこのアクセス解析も正常に動作しています。
ただ、このサイトをhttp://openlab.ring.gr.jp/k16/htmllint/htmllint.htmlで構文チェックすると、アクセス解析のタグにエラー「<img>を~行目の<script>~</script>内に書くことはできません。」が表示されてし...続きを読む

Aベストアンサー

XHTML には「ホンモノの XHTML」と「ニセモノの XHTML」があります。「ホンモノの XHTML」とは application/xml または application/xhtml+xml として識別されるもの、「ニセモノの XHTML」は text/html で識別されるものです。

※実際にはどちらも本物です。ここでは「HTML 互換として処理される XHTML」を「ニセモノ」、「XML として解析される XHTML」を「ホンモノ」と、カタカナ&カッコ付きで書いています。

「ホンモノの XHTML」として見れば、質問文のソースは妥当性違反です。なぜなら、img 要素のタグがエスケープされていないため、これがスクリプトの一部ではなく文書構成要素だと判断されるからです。XHTML 1.0 のスキーマは、script 要素内に img 要素が出現することを許していません。もちろん、スクリプトとしても正しく動作しません。

従って、XML のルールに従ってエスケープする必要があります。特に「<」と「&」は必ずエスケープしなければなりません。

document.write('&lt;img .... />');

ですが面倒なことに、「ニセモノの XHTML」ではこれが動作しなくなります。「ニセモノの XHTML」は、HTML との互換性のために script 要素内の「<」「&」をうまく扱ってくれるのですが、それが仇となり、上記では「&lt;」が「<」に戻りません。

ならば、コメント区間にするのはどうでしょう。XML でもコメント内なら「<」「&」が現れても大丈夫です(ただし「--」だけは駄目です)。

<script type="text/javascript"><!--
document.write('<img .... />');
//--></script>

「ニセモノの XHTML」ならこれでも構いません。しかし、「ホンモノの XHTML」では、コメントは本当に破棄されてしまい、上記では動作すらしなくなります。

そこで、XML/HTML のルールを使わず、JavaScript のルールでエスケープすることを考えます。

document.write('\u003Cimg .... />');

これなら大丈夫でしょう。XML/HTML に限らず、言語が混在する際は必ず適切なエスケープを施す必要があります。エスケープを避けたければ外部スクリプトにして下さい。


なお、ここには別の問題があります。そもそも「ホンモノの XHTML」では、document.write を使用できません。これは HTML 互換の機能だからです(HTML5 に明記されています)。

XHTML を採用するのであれば、それが「ホンモノ」でも「ニセモノ」でも大丈夫なよう、document.write に頼らないコードを作成して下さい。あるいは try...catch で括るなどして、「ニセモノ」として処理されたときのみコードが動作するよう工夫して下さい。あるいはいっそ、XHTML を止めるのも 1 つの選択でしょう。

XHTML には「ホンモノの XHTML」と「ニセモノの XHTML」があります。「ホンモノの XHTML」とは application/xml または application/xhtml+xml として識別されるもの、「ニセモノの XHTML」は text/html で識別されるものです。

※実際にはどちらも本物です。ここでは「HTML 互換として処理される XHTML」を「ニセモノ」、「XML として解析される XHTML」を「ホンモノ」と、カタカナ&カッコ付きで書いています。

「ホンモノの XHTML」として見れば、質問文のソースは妥当性違反です。なぜなら、img 要素のタ...続きを読む


人気Q&Aランキング

おすすめ情報