javascriptのcontentEditableで画像を表示
- javascriptのcontentEditableを使用して、エディタ内で画像を表示する方法について教えてください。
- カスタマイズしたEditorで、画像をクリックした時に編集箇所に画像を挿入する方法を教えてください。
- エディタ(リッチテキスト)で画像を挿入する方法を教えてください。
- ベストアンサー
javascriptのcontentEditableで画像を表示
クリック、ありがとうございます。 下記URL『HTML Editor』を参考にカスタマイズしたEditorを作成しています。 http://tomizawa-web.hp.infoseek.co.jp/sample/HTMLEditor.htm 上にある色々な編集ボタンの下にいくつか画像を並べ、画像をクリックすると編集箇所に画像が表示させるようにしたいのですが、方法がわかりません。 ソース側では画像をクリックすると、編集箇所に <img src="***.gif"> と挿入させ、エディタ(リッチテキスト)に戻すと表示することはできるのですが、 エディタで画像をクリックした時に画像を挿入することが出来ません。 エディタ(リッチテキスト)で画像を挿入する方法を教えてくださいm(__)m ヒントなどでも構いませんので、よろしくお願いします。
- tetsu-jin
- お礼率67% (52/77)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
画像と言うのはサーバー上にあるファイルではないのでしょうか？ ローカルサイドのものは確かに一癖あると思うのですが、ローカルサイドが動いてサーバー上のファイルの物が動かないのは不思議な気がします。 ローカルの画像処理を参考にして、同じ動作にしてしまうと良いのではないでしょうか。
関連するQ&A
- テキストエリアに画像ＵＲＬを貼り付ける入力支援
簡単なCGI日記を作成してますが、この入力フォームのテキストエリアに手動で画像ＵＲＬのタグを入れるのが手間なので、 ↓ サーバーにある画像一覧が別窓（違うファイルから）で表示されていて（実際には画像表示ですが・・・） <a href="sample1.gif"><img src="sample1.gif"></a> <a href="sample2.gif"><img src="sample2.gif"></a> <a href="sample2.gif"><img src="sample2.gif"></a> ↓ 画像をクリックするとＣＧＩのテキストエリア内に自動で <a href="sample1.gif"><img src="sample1.gif"></a>とタグを挿入するjavascriptってサンプルになるようなものはないでしょうか？
- 締切済み
- JavaScript
- テキストのリンクをON/OFFする
Javascriptでテキストをクリックすると2箇所の画像を同時に変更することができたのですが、表示されている画像のテキストのリンクをはずす方法がわかりません。はじめは「ページ３＋４」のテキストのみがクリッカブルで、「ページ３＋４」のテキストをクリックすると、「ページ１+２」のテキストのみがクリッカブルになるようにしたいのです。表示されていない画像のテキストのみをクリッカブルにする方法をどなたか教えていただけますでしょうか？ <script language="JavaScript"> <!-- function swapImg(imgfile1,imgfile2) { document.swpimg1.src = imgfile1; document.swpimg2.src = imgfile2; } // --> </script> <div><img src="sample1.gif" name="swpimg1" /><img src="sample2.gif" name="swpimg2" /></div> <div><a href="javascript:swapImg('sample1.gif','sample2.gif')">ページ１+２</a> <a href="javascript:swapImg('sample3.gif','sample4.gif')">ページ３＋４</a></div>
- ベストアンサー
- JavaScript
- 画像を重ねて表示したい
画像を表示するタグで<img src="a.gif"><img src="b.gif">と書くと、横に並んで表示されます。ごく当たり前か。。 んで、このa.gifとb.gifを重ねて表示したいです。a.gifを手前、b.gifを奥というかんじです。 2つの画像は同じ大きさです。 何かいい方法ありませんか？アドバイスお願いします。 連続の質問で申し訳ありません。
- ベストアンサー
- HTML
- textareaに画像を表示したい
textareaの入力支援を作成しています。 PHPで画像のディレクトリを開き別窓などに一覧表示させ、 その画像をクリックでjQueryでテキストエリアへタグを挿入。 <textarea id="test"> あああ <img src="hoge.jpg"> いいい </textarea> ↑のようにIMGタグを挿入する状態までは実装させることが出来るのですが、 UI的に、このIMGタグを画像（サムネ）として表示させたいと考えています。 <textarea id="test"> あああ ■（←画像） いいい </textarea> テキストエリアを監視して置換するなど方法はありそうなのですが そもそもテキストエリア内で画像を表示させることができるのでしょうか？ 何かいいアイディア、あるいはプラグイン等がありましたら教えてください。
- ベストアンサー
- JavaScript
- firefoxで表示される画像がIEで表示されない
同じHTML内に <img src="images/9.jpg" alt=""商品画像 /> と <img src="images/title_1.gif" /> がありますが firefoxでは上記の画像を含めすべての画像が表示されますが IEでは <img src="images/title_1.gif" />は表示されるが <img src="images/9.jpg" alt=""商品画像 />は 表示されません。 なぜか判りません。 原因がまったくわかりません。 教えてください。よろしくお願いします。
- ベストアンサー
- HTML
- JSPでの画像ファイル表示
<img src="～.gif">とすれば、決められた画像は表示できるのですが、"～.gif"の部分に変数を使用して、場合に応じて、ファイル名(数字)が違う画像ファイルを読み込ませたいのです。 その場合当然なのですが、<img src="～" + <% 変数 %> + ".gif">としても、できないんですよね。 何か方法をご存知の方教えてください。よろしくお願いします。
- ベストアンサー
- Java
- 画像 表示について質問です。
画像 表示について質問です。 <?php echo '<a href="A.php"><img src="img/advance.gif" wwidth="80" height="80" style="border-style:none;" onmouseover="this.src="img/returen2.gif";" onmouseout="this.src="img/returen.gif";" /></a>'; ?> と考えたのですが、画像は表示されるもののONマウスの時に画像が変化しません。 どうしてなのでしょうか。
- ベストアンサー
- PHP
- JavaScriptに関する質問です
ホームページをつくっていますJavaScript超初心者です。どなたか手助けをしていただけますでしょうか？やりたいことというのは、次の通りです。 とあるページがありまして、次のような項目が並んでいます。 <li><a href="#" onClick="window.open('f.html?1,'newWin','width=850,height=650')">テキスト1</a></li> <li><a href="#" onClick="window.open('f.html?2,'newWin','width=850,height=650')">テキスト2</a></li> <li><a href="#" onClick="window.open('f.html?3,'newWin','width=850,height=650')">テキスト3</a></li> それぞれのテキストをクリックすると、新しいウィンドウが表示され、次のJavaScriptが起動します。 function fx(){ var num = location.search.substr(1,1); var the_id1 = "s" + num.toString(); var img = document.getElementById(the_id1).getElementsByTagName("img"); img[0].src = ""←このあたりが特に分かりません。 } 最後に新しいウィンドウページのhtmlを書いておきます。 <div id="s1"><img src="img/s1w.gif" name="s1img"/></div> <div id="s2"><img src="img/s2w.gif" name="s2img"/></div> <div id="s3"><img src="img/s3w.gif" name="s3img"/></div> このように始めのページの項目をクリックすると、javascript fx が起動してdiv s1 ～s3の画像を取得する（入れ替える）というようにしたいのです。 つまり、最初のページのテキスト1をクリックすればdiv s1の画像を入れ替える、テキスト2をクリックでdiv s2の画像を、という具合にです。 ←このあたりが分かりませんと書いたように、画像を別々に取得する方法が分かりません。 どのように改良すればいいでしょうか？もしくは全く新しいものに変える必要があるでしょうか？ 分かる方、どなたか教えてください。よろしくお願いします。
- ベストアンサー
- JavaScript
- ロールオーバー画像の枠線を消したい
初めてホームページ作成中の超初心者です。 ロールオーバーで、下記のタグで表示させたのですが、画像の枠線が出てしまいました。 普通に<img src="img1.gif">と書くと出ない画像なんですが・・・ リンク画像の枠線を消すのと同じ要領でborder="0"とも書き加えてみましたが、（４ヶ所とも）今度は何も表示されなくなってしまいました。 ＜問題のタグのひな形＞ <a href="http://www-------"onmouseover = "document.bt.src = 'img1.gif'" onmouseout = "document.bt.src = 'img2.gif'"onclick = "document.bt.src = 'img3.gif'"><img src = "img2.gif" name="bt"></a> どうぞ宜しくお願いします！
- ベストアンサー
- JavaScript
お礼
切り分けをしながら行ったら無事成功しました。 ご指摘の通りでした。ありがとうございました。