• 締切済み

ajax画像変更

すみませんがAjaxを使って,最初にネコの絵を表示しておき,変更ボタンを押したら犬の絵を表示するプログラムを作成したいのですが以下のプログラムでは表示できませんでした。どなたか教えてください cat.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>画像変更</title> <script type="text/javascript"> <!-- XmlsReq = false; if(window.XMLHttpRequest) { XmlsReq = new XMLHttpRequest(); } else if(window.ActiveXObject) { try { XmlsReq = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { XmlsReq = new ActiveXObject("Microsoft.XMLHTTP"); } } function LoadHtml(src, uri) { if (!XmlsReq) return; XmlsReq.open('GET', uri); XmlsReq.send(null) XmlsReq.onreadystatechange=function() { if (XmlsReq.readyState==4 && XmlsReq.status == 200) { document.getElementBySRC(src).innerHTML = XmlsReq.responseText; } } } //--> </script> </head> <body> <img src="cat.jpg" style="width" :600px;height:400px"> ここにHTMLファイルを読み込みます。</img> <form src="Ajax_Form"> <input type="button" src="change" value="変更" onClick="LoadHtml('cat.jpg','dog.html')"> </form> </body> </html> dog.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" > <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Style-Type" content="text/css"> <title>画像変更</title> </head> <body> <image src="dog.jpg"> 読み込みました。 </image> </body> </html>

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

面倒で詳しく読んでませんが、これってajaxでやることですか? 単にimgのsrcをjavascriptで入れ替えるだけですよね?

関連するQ&A

  • 初歩的な質問で恐縮ですが、教えてください。

    すみませんが、教えてください。 入力フォームでデータが送れなくて、困っています。 下のコードに問題点はあるのでしょうか? 自分では、分からないので、よろしくお願いいたします。 test1.php------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <form method="post" enctype="multipart/form-data" action="./test2.php"> <input type="text" name="fmTitle" ><br /> <input type="submit" value="次へ" > </form> </body> test2.php-------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <?= $fmTitle . "<br />" ?> </body>

    • ベストアンサー
    • PHP
  • Shift_JISのことろをすべてsjisに

    しても大丈夫でしょうか? たとえば以下のように書いて大丈夫でしょうか? 本来どのように書くべきでしょうか? <?xml version="1.0" encoding="sjis"?>のsjisと <meta http-equiv="content-type" content="application/xhtml+xml; charset=sjis"/> のsjisの2箇所です。 <?xml version="1.0" encoding="sjis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=sjis"/> <meta http-equiv="content-style-type" content="text/css"/> <meta http-equiv="content-script-type" content="text/javascript"/> <title>sjis</title> </head> <body> <p>これは文字化けのテストです</p> </body> </html>

    • ベストアンサー
    • HTML
  • XHTML meta属性 文字化け

    XHTMLを勉強しています。 以下のように記述して表示すると タイトルの部分が文字化けします。 何故でしょうか <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページの作り方</title> <meta name="description" content="初心者のためのホームページテスト" /> <meta name="keywords" content="ホームページ,作成,初心者" /> </head> <body> テスト </body> </html>

    • ベストアンサー
    • HTML
  • Xhtmlでの、class="imgover"の記述方法を教えてください。

    ただいま 独学ですが、Xhtmlを勉強しております。 Xhtmlで、カーソルが画像の上に来たら 画像が変わるように設定したいのですが、その方法が class="imgover" を使うと出来るとわかりやってみましたが・・・うまくできません。 下記にXhtmlを記述したので、教えてくださいお願いします。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <title>あれこれ</title> <meta name="description" content="あれこれ" /> <meta name="keywords" content="あれこれ" /> <meta name="copyright" content="あれこれ" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <script type="text/javascript" src="js/rollover.js"></script> </head> <body> <img src="img/header_logo.gif" width="312" height="39" alt="日本" class="imgover" /> </body> </html> 画像は、 header_logo.gifと header_logo_on.gif とが作ってあります。 どこかおかしいのでしょうか?

    • ベストアンサー
    • HTML
  • phpで数字の値を画像で表示したいのですが

    お世話になります。phpを触り出している初心者です。携帯に対応させたいのですが、phpだけでいっぱいなので助けてください. 数字が0だったら非表示 2だったら2の画像・・・というようなものを作りたいのですが imgタグの埋め込み方・記述方法がよくわかりません。 ↓数字を文字で表示する方法はこれで一応やってみました。 <?php $number1 = 0; $number2 = 2; $number3 = 3; $number4 = 4; if ($number1 == true) { echo"<p>0は非表示です。"; } if ($number2 == true) { echo"<p>1の画像です。"; } if ($number3 == true) { echo"<p>2の画像です。"; } if ($number4 == true) { echo"<p>3の画像です。"; } ?> しかし画像がうまくいかずIE6では一種類の画像だけ表示されて 他の新しいブラウザでは文字化けしてる状態です。 それぞれ違う画像を当てはめる場合 どのように数値を増やして記述したらよいのでしょう? 色々試していますがこの記述も正しいのがわかりません。 <?php $gazou = imagecreatefromgif("img/01.gif"); imagegif($gazou); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="content-Type" content="application/xhtml+xml; charset=shift_jis" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <title>数字で分岐して画像を表示</title> </head> <body> <div style="text-align:center;"> <?php $number1 = 0; $number2 = 1; $number3 = 2; $number4 = 3; if ($number1 == true) { echo'<img src="gazou.php" />'; } if ($number2 == true) { echo'<img src="gazou.php" />'; } if ($number3 == true) { echo'<img src="gazou.php" />'; } if ($number4 == true) { echo'<img src="gazou.php" />'; } ?> </div> </body> </html>

    • ベストアンサー
    • PHP
  • SafariでPHPソースがそのまま表示される

    Safariでindex.phpを開くとソースコードがそのまま表示されてしまいます。 拡張子をphpとしているだけでソース内にはphpスクリプトは記述しておりません。 なぜでしょうか? ※ファイル名をindex.htmlに変えると正しく表示されます。 Windows 7 Home Premium 64bit Safari5.1.5 ソースコードのエンコーディング:utf-8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>テストtitle> </head> <body> <h1>テストページ</h1> </body> </html>

  • FirefoxでCSSが読み込めない。

    HPを作成中です。IEやSleipnirでは思った通りに表示されるのですが、Firefoxではスタイルシートが読み込まれていないようです。 どの部分が悪いのでしょうか。ご教示のほどをよろしくお願いいたします。 以下冒頭部分のソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">​ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-type" content="text/css"> <link rel="stylesheet" href="index.css" type="text/css"> <title></title> </head> <body>

    • ベストアンサー
    • HTML
  • 下記のタグの中で必要ないのはありますか?

    (1) <?xml version="1.0" encoding="UTF-8"?> (2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (3) <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> (4) <head> (5) <title>●●●●●●●●</title> (6) <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> (7) <meta http-equiv="Content-Style-Type" content="text/css" /> (8) <meta name="robots" content="INDEX,FOLLOW"> (9) <meta name="description" content="●●●●●●●●"> (10) <meta name="keywords" content="●●●●●●●●"> (11) <meta name="content="●●●●●●●●" /> (12) <meta http-equiv="Content-Script-Type" content="text/javascript"> (13) <meta http-equiv="Content-Style-Type" content="text/css"> (14) <link href="css/A1.css" rel="stylesheet" type="text/css" /> (15) <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

  • XHTML のタイトルが表示されません ご教授おね

    タイトル通りなのですがHTML のタイトルが上手く表示されず、本文の中に入ってしまっています。(cf,添付画像)   一番最初の所で躓いてしまいました、解説書の通り何度もやり直したのですが、原因が分からないのです・・・かなり初歩的なこととは思われますがよろしくお願いいたします! ソースは以下のとおりです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <titile>a</title> <style type="text/css"> </style> </head> <body> </body> </html> *ちなみにサンプルでは以下のとおりになっています。(サンプルをインストールすればしっかりと表示されるのです、同じなはずなのに僕が入力しますと上手くいきません) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>a</title> <style type="text/css"> </style> </head> <body> </body> </html>

    • ベストアンサー
    • CSS
  • Ajaxのエラー?

    下記のJSPを実行するとjavascriptエラーになります。 エラー内容は「オブジェクトを指定してください」です。 エラー場所は★の部分です。 いろいろサイトで調べてみましたが原因がわかりませんでした。 初歩的な質問ですみません。 宜しくお願いします。 <%@ page language="java" contentType="text/html; charset=Shift-JIS" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT type="text/javascript" src="xmlhttp.js"></SCRIPT> <SCRIPT type="text/javascript"><!-- function getList() { ★httpObj = createXMLHttpRequest(); if (httpObj) { httpObj.open("GET","aaa",true); httpObj.send(null); } } //--></SCRIPT> </head> <BODY onLoad=getList()> ・ ・ ・ </body> </html>

専門家に質問してみよう