javascriptの質問です。


document.img.src = document.imgtoukou.imgaddress.value;
※img、は<img>のname、imgtouroku、imgaddressはフォームのnameです。

以上のようなコードで画像の入れ替えをしようと考えましたが、IE6以外では動作しませんでした。
問題点または、この機能を実現するコードを教えてください。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/09/01 04:15:31
  • 終了:2006/09/02 15:11:42

回答(4件)

id:miyatyu No.1

miyatyu回答回数31ベストアンサー獲得回数22006/09/01 08:35:09

ポイント60pt

>imgaddressはフォームのnameです。

という表現から、ユーザーが、type=fileのフォームで選択した画像(ローカル環境(ユーザーのパソコン上)の画像)を選択してもらってサムネイルか何かを表示しようとしているのだと思います。


ブラウザがユーザーのローカル環境のファイルに直接アクセスするのは危険なのでIE以外では制限されているので成功しないのです。(むしろ、IEこそが危険)


ただ、srcで指定するURLを、file:// のようにして書き換えればFirefoxでも動作するようですので、以下のエントリーを参考にしてください。


http://codeweb.seesaa.net/article/6891945.html

http://codeweb.seesaa.net/article/7762344.html

id:AKI-NAMI

投稿前にサムネイルを見ながらコメントを書いてもらおうと思っていました。

>>むしろ、IEこそが危険

なるほど。

file://~ では参照ボタンからの自動入力で出てこないので無理ですね。

2006/09/02 15:02:09
id:yo-kun No.2

yo-kun回答回数220ベストアンサー獲得回数302006/09/01 10:36:45

ポイント50pt

左辺値を

document.images["img"].src
document.getElementByName("img").src

右辺値を

document.getElementByName("imgaddress").value

などに変えてみてはどうでしょうか?


http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter05...

http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter05...

id:AKI-NAMI

これでは動きませんでした。。。

さらにIE6.0でも画像の差し替えが効かなくなりました。

やはりセキュリティの観点でしょうか。

2006/09/02 14:56:05
id:ElekiBrain No.3

ElekiBrain回答回数255ベストアンサー獲得回数152006/09/01 15:29:16

ポイント50pt

http://q.hatena.ne.jp/answer(ダミーURL)


nameではなくid属性を使い、getElementByIdで取得、プロパティの値をsrcとして変化させています。


<script type="text/javascript" language="javascript">
 

 <!--


 function imageChange(imageTag , imageName){

  document.getElementById(imageTag).src = imageName;

 }


 //-->

</script>

====================================================================

<form action="#">
 

<img id = "imgField" src = "air.bmp" alt = "air.bmp" width = "300" height = "200" /> 

<input type = "button" value = "ChangeButton" onClick = "imageChange('imgField','任意の画像');" />

</form>


もし違う意味でしたら申し訳ありません。

valueという部分が気にかかりましたが、一口にvalueと言ってもinputの type=button・type=text・type=imageであるかによってコードが違ってきますので、今回は見送りました。

id:AKI-NAMI

上の方の内容と考え方は同じですよね?

IE6.0ではサッと画像が入れ替わるのですが、、、

2006/09/02 14:58:38
id:ardarim No.4

ardarim回答回数896ベストアンサー獲得回数1442006/09/01 23:07:16

ポイント50pt

W3C準拠の書き方です。

DOM level 2 Core

DOM level 2 HTML


document.getElementById("img").src = document.getElementById("imgtoukou").imgaddress.value;
id:AKI-NAMI

英語不得意なのでどこを辿ってよいのか時間がありません。

結局firefoxではローカルファイルへのアクセスがだめということなので、書き方以前の問題のようでした。

2006/09/02 15:04:19
  • id:ElekiBrain
    ElekiBrain 2006/09/02 15:14:09
    すみません、私の挙げたスクリプトを私の環境でテストした結果、
    『Internet Explorer 6.0』『Mozilla Filefox 1.5』
    『Netscape Navigator 7.1』『Opera 9.0』
    全てで動作しました。もしかしてブラウザのバージョンが古いだけかも知れません。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません