- ベストアンサー
タグだけで可能でしょうか。次々と流れ止まる画像。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
xruzです。 Ie5で似たような効果が出ないか試してみました。これが限界みたいですね。 scrollamountとpositionをいじくってみました。 （Ie5.5では onmoveend も認識しませんでしたので。。。） <div style="position:relative"> <marquee scrollamount=4 behavior=slide style="position:relative;left=0px;top:0px"> <img src="a.gif"></marquee> <marquee scrollamount=5 behavior=slide style="position:relative;left=176px;top:-31px"> <img src="a.gif"></marquee> <marquee scrollamount=3 behavior=slide style="position:relative;left=88px;top:-62px"> <img src="a.gif"></marquee> </div> gifはWIDTH:88px;HEIGHT:31pxを使用しています。
その他の回答 (2)
- xruz
- ベストアンサー率50% (72/143)
こんにちはnorizowさん、xruzです。 Ie6 は beginアトリビュートを認識するそうですので <marquee scrollamount=3 behavior=slide begin="1s"> と書けば 1秒後から動き始めるそうですよ。 100msと書けば0.1秒後だそうです。 あいにくIe6 の環境が無いので確認できませんでした。 間違っていたら、ごめんなさい(~:~i
お礼
調べていただいてありがとうございました。
こんにちは。 norizowさんのイメージとは少し違うかもしれませんが。 <marquee scrollamount=3 behavior=slide>のあとに、単純に <img src="最初の写真.jpg"> <img src="２枚目の写真.jpg"> <img src="３枚目の写真.jpg"> </marquee> ――と並べてみたら、とりあえず３枚くっついて出てきました。 ＃左端まで行くと、３枚がくっついて止まりました。 ただし、 <marquee>タグはＩＥの独自タグなので、ネスケではうまく表示されません。最初から３枚の写真が左端から並んで表示されるので、気をつけてください。 参考になれば幸いです。
お礼
これは私もやってみました。くっついて出てくるのではなく、 「少し離れて出てきて止まってくっつく」イメージでした。 わかりにくくてすみません。調べていただいてありがとうございました。
関連するQ&A
- 文字のスライド
文字の1回のみスライドさせる処理について教えて下さい。 以下の様な処理を行いました。 <marquee behavior="slide"> <img src="表示させたい画像 GIFやJPG" width="画像の横幅" height="画像の高さ"> </marquee> これでは、"Internet Explorer"でうまく行えたのですが、"Netscape"では、何度も流れていまいました。 1回のみスライドさえる方法で、両方に対応し書き方を 教えて下さい。
- ベストアンサー
- ホームページ作成ソフト
- 画像を右から左に回るようにしたいです
忍者でブログを書いています。 画像が右から左に自動で回るようにしたいのですが どうしたらよいのでしょうか？ 下記を好きなとこに貼り付ける、と教えていだだいたのですが、好きなとこって？わかりませんでした。動かす画像の場所ってどう指定したらよいのでしょうか？ <TABLE> <TBODY> <TR> <TD colspan="4" align="center" width="600"><MARQUEE scrollAmount=3><IMG src="anima/004.gif" width="80" height="80" border="0"></MARQUEE></TD> </TR> </TBODY> </TABLE> width="600"は、フレームの幅。好きなサイズに変えて。 anima/004.gifは、動かす画像の場所です。動かす画像の場所を指定してください！ width="80" height="80"は画像の幅と高さです。指定してください。
- 締切済み
- ホームページ作成ソフト
- onclickで画像と文字を別々の場所に表示したいのですが...
onclickで小さい画像を別の場所に大きな画像で表示することは出来たのですが、その時に別の場所に文字を表示したいのです。 （例えば：「山」の小さな画像をクリックすると大きな「山」の画像が表示されて←これはＯＫ、 その下に「富士山」の文字を表示したい←これです。） 下記のようにしています。 <script language="javascript"> <!-- function Image(img){ document.getElementById("image").src=img} //--> </script> </head> <table> <tr> <td><img src="sample1_small.jpg" onclick="Image('sample1.jpg')"></td> <td><img src="sample2_small.jpg" onclick="Image('sample2.jpg')"></td> <td><img src="sample3_small.jpg" onclick="Image('sample3.jpg')"></td> <td><img src="sample4_small.jpg" onclick="Image('sample4.jpg')"></td> </tr> <tr> <td colspan="4"><img src="sample1.jpg" name="image"></td> </tr> <tr> <td>***ここに文字を表示させたいのです***</td> </tr> </table> 宜しくお願いします。
- ベストアンサー
- JavaScript
- 画像枠のタグ
何度しても写真画像の枠ができないのですが、 枠をつけて枠の色と枠の太さを変更したいのですが。 このタグのどこが違うのでしょうか？ （枠をつけて画像のサイズだけ変更している状態です↓） <img src="http://＠＠＠＠＠.JPG" border=3 width="300" height="200"> <img src="http://＠＠＠＠＠.JPG" width="300" height="200"border=3> 両方してみたんですが、両方共できませんでした。どこが違うのでしょか？これ↑に枠と枠の色をつけて枠の太さを調節する時はどこにどのようにタグを入れたらよいのでしょうか？ 写真画像枠のタグの種類はborder=3、３のみでしょうか？ 以前聞いたことがありますが、Macのブラウザー サファリでは変更しても反映されず見ることができないのでしょうか？ お手数をお掛け致しますが、ご存知の方がおられましたら お知らせ頂けますととても助かります、宜しくお願い致します。
- ベストアンサー
- その他（インターネット・Webサービス）
- java スライド クリック メニューについて
左右に矢印画像がありクリックでサムネイルが移動するようなスクリプトにしたいです。 すみません、以下のようなスクリプトでサムネイル画像を横スクロールさせています。 実際にはスクロールではなく、一度に画像が配列されarrow_lをクリックすれば左にarrow_rをクリックすれば右に画像が移動するというようなサムネイル画像を作りたいのですが、以下のソースからどのようにすれば良いでしょうか？ また参照できるサイトがあればお教えいただきたく思っております。 何卒宜しくお願いします。 <input type="image" src="img/arrow_l.gif" id="左" onclick="hs.direction='left'" value="←" /> <marquee id="hs" scrollamount="6" onmouseover="this.stop()" onmouseout="this.start()"> <img src="images/sum-bw2.jpg" alt="bw" hspace="2" border="0" /> <img src="images/sum-ex2.jpg" alt="bw" hspace="2" id="bw" /> <img src="images/sum-sh2.jpg" alt="bw" hspace="2" id="bw2" /> </marquee> <input type="image" src="img/arrow_r.gif" onclick="hs.direction='right'" value="→" />
- 締切済み
- JavaScript
- html内にスライドショーを複数設置
こんにちは、質問があります。 http://allabout.co.jp/gm/gc/417216/3/ ↑のサイトさんに載っているコードを参考に、スライドショーをhtml内に書きました。html内にスライドショーを複数設置をしたいので、#slideshow の部分を#slideshow2や#slideshow3にしたりしたのですが、スライドショーが#slideshow3の部分しか動きません。全てのスライドショーを同時に動かすにはどうしたらいいのでしょうか？当方初心者なので分からないのです。どなたか教えていただけるとうれしいです。 以下が書いたコードです。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); var $active = $('#slideshow2 img.active'); var $active = $('#slideshow3 img.active'); if ( $active.length == 0 ) $active = $('#slideshow,#slideshow2,#slideshow3 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow,#slideshow2,#slideshow3 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 2000 ); }); </script> <p id="slideshow"> <img src="img/slide1.jpg" alt="" /> <img src="img/slide2.jpg" alt=""/> <img src="img/slide3.jpg" class="active" /> </p> <p id="slideshow2"> <img src="img/slide4.jpg" alt="" /> <img src="img/slide5.jpg" alt=""/> <img src="img/slide6.jpg" class="active" /></p> <p id="slideshow3"> <img src="img/slide7.jpg" alt="" /> <img src="img/slide8.jpg" alt=""/> <img src="img/slide9.jpg" class="active" /></p> どなたか回答よろしくお願いいたします。
- 締切済み
- JavaScript
- JavaScriptでの画像切り替えを複数セット
JavaScript初心者です。 サムネイルに画像を合わせると、IDの付いた画像2枚とテキストの3箇所が同時に入れ替える、 というものを以下の方法で作成しました。 <script> function swap(n) { var items = [ { Text:"テキスト１", ImageB:"b/sample1.jpg", ImageA:"a/sample1.jpg" }, { Text:"テキスト２", ImageB:"b/sample2.jpg", ImageA:"a/sample2.jpg" }, { Text:"テキスト３", ImageB:"b/sample3.jpg", ImageA:"a/sample3.jpg" }, ]; var o = document.getElementById("photo"); document.getElementById("Txt").innerHTML = items[n].Text; document.getElementById("PhotoB").src = items[n].ImageB; document.getElementById("PhotoA").src = items[n].ImageA; } </script> <div id="photo"> <img src="sample1.jpg" alt="" name="PhotoB" id="PhotoB"> <img src="sample2.jpg" alt="" name="PhotoA" id="PhotoA"> <div id="Txt" name="Txt">説明文１</div> </div> <a href="#" onmouseover="swap(0)"><img src="sample1.jpg" /></a> <a href="#" onmouseover="swap(1)"><img src="sample2.jpg" /></a> <a href="#" onmouseover="swap(2)"><img src="sample3.jpg" /></a> このセットを同一ページで複数作成したいのですが、 IDを変えたセットを作ってもうまく動かず、困っております。 知識不足で申し訳ありませんが、この場合、どのような方法でしたら 複数の画像切り替えを作れるのでしょうか？ よろしくお願い致します。
- ベストアンサー
- JavaScript
- imgタグなしで画像表示
imgタグなしで画像表示 JavaScriptでimgタグなしで画像URLから画像を表示したいです。 具体的には、次のビフォアフターのようにしたいです。 ■ビフォア (タグなしのプレーンな文章) サンプル文章サンプル文章サンプル文章。 http://sample.com/ サンプル文章サンプル文章サンプル文章。 http://sample.com/1.jpg 写真１ 画像２ http://sample.com/2.png 画像３ http://sample.com/3.gif アニメーション ■アフター (JSでimgタグとaタグが自動挿入される) サンプル文章サンプル文章サンプル文章。 <a href="http://sample.com/">http://sample.com/</a> サンプル文章サンプル文章サンプル文章。 <img src="http://sample.com/1.jpg"> 写真１ 画像２ <img src="http://sample.com/2.png"> 画像３ <img src="http://sample.com/3.gif"> アニメーション ■第１希望 （ぜひとも） 画像の種類はjpg、png、gifに対応可能にしたいです。 現在、URLを自動でハイパーリンク有りに変換していますので、これと競合しないようにもしたいです。 次のコードを使っています。 $("#main").each(function(){$(this).html($(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g,'<a href="$1" target="_blank">$1</a>'));}); ■第２希望 （可能であれば） 上記コードはjQuery必須ですが、可能ならjQueryを使いたくないです。なので、上記コードをそのままつかわずに、aタグとimgタグを自動挿入されるようにしたいです。 文章の途中にURLや画像URLがあっても正しく処理してほしいです。 ■第３希望 （お時間をさらにいただけるなら） コードの簡単な解説をお願いしたいです。 上記コードであれば、「(http|https|ftp):\/\/」が「http;//」等をあらわすのを次のページで理解しました。 http://www.openspc2.org/JavaScript/Ajax/jQuery_plugin/chapter8/index.html また、「$1」が検索対象の文字列であるのも理解しています。 「<a href="$1" target="_blank">$1</a>'」でハイパーリンクを生成しているのも理解しています。 簡単な解説をしていただけましたら、それを元に https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions で知見を深める所存です。 ■m(__)m そのままずばりの回答でなくとも、参考URLなどのご提案も助かります。 また、質問の意図がいまいち伝わりにくいようでしたら、その旨記載いただけましたら、加筆いたします。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- 1箇所に複数画像を別々に配置は可能でしょうか？
出来ないのかも知れませんが、もし可能かつご存知の方いらっしゃいましたらアドバイスをお願いいたします。 行いたいことは、1つの場所に複数の画像を配置し、それぞれの配置を異なる場所へ置きたいということです。具体的には…、 <div id="hoge"> ←このコンテナ内に画像を複数配置 <img src="img001.jpg" /> ←この画像はセンタリング <img src="img002.jpg" /> ←この画像は右寄せ </div> 1つのDIV内にセンタリングと右寄せで画像を配置という事です。 positionにて相対的に試してみたのですが、中央の<img src="img001.jpg" />のサイズによって<img src="img002.jpg" />の配置が変わってしまうので断念しました。その時は <div id="hoge"> <img src="img001.jpg" /><span id="hage"><img src="img002.jpg" /></span> </div> という感じで、<span id="hage">に相対positionでした…。駄目でしたが。。 条件としてはそれぞれにリンクを定義したいので背景ではなく画像として配置したいと思います。 どなたかアドバイスのほどよろしくお願いします。
- ベストアンサー
- CSS
- 動く文字<MARQUEE>
動かしたい文字を1回のみループさせ画面左端に止める処理について教えて下さい。 文字スクロール回数の設定をする<marquee loop=○>～</marquee>と 画面端で動作停止する<marquee behavior=slide>～</marquee>の併用をしようとしているのですがやり方がわかりません。 動かしたい文字を1回のみループさせ画面端に止めるタグを教えていただけると幸いです。ご回答お待ちしております。
- ベストアンサー
- HTML
お礼
思いもかけない不規則な動きが面白かったです。 効果的に使えそうです。ありがとうございました。