画像をフェードインしながら切り替えたい方法
- フェードインしながら画像を切り替える方法についてアドバイスをお願いします。
- 現在の実装コードとしては、マウスオーバー時に画像を切り替えていますが、即座に切り替わってしまいます。フェードインしながら切り替える方法を教えてください。
- リンク先のコードを使用して、画像をフェードインしながら切り替える方法についてアドバイスをいただきたいです。
- ベストアンサー
お世話になります。
お世話になります。 早速質問させていただきます。 画像をオンマウスで切り替わるようにしたいのですが、画像切替の時に直ぐに切り替わるのではなく、フェードインしながら切り替わる様にしたいと思っています。 今使っているのは下記の通りです。これをフェードインしながら切り替わるようにできますか？ アドバイス宜しくお願い致します。 <table bgcolor="#000000" width="800" align="center" border="2"> <tr align="center"> <td width="150" align="center"> <!-- 商品サブ画像 --> <img src="画像１" width="130" onmouseover="document.myPIC.src='画像リンク"> <img src="画像２" width="130" onmouseover="document.myPIC.src='画像リンク"> <img src="画像３" width="130" onmouseover="document.myPIC.src='画像リンク"> <img src="画像４" width="130" onmouseover="document.myPIC.src='画像リンク"> <!-- 商品メイン画像 --> <td width="650"><BR> <img name="myPIC" src="最初に表示される大きい画像" style=" margin:10px 25px 30px 25px;"> </td> </tr></table>
- you_c
- お礼率8% (8/97)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
HTML5の<canvas>を使おうと、思ったけどIEだとcanvasでopacity操作 出来ないし、<td>の中に<canvas>入れてよいのやら調べるの後にして とりあえず、jQueryを使って安直に... <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> <script type="text/javascript"> $(function(){ $(".thumbnail").mouseover(function(){ $("#myPIC").hide(); $("#myPIC").attr("src",$(this).parent().get(0).href); $("#myPIC").fadeIn("slow"); }); $(".thumbnail").click(function(){ return false; }); }); </script> <body> <table bgcolor="#000000" width="800" align="center" border="2"> <tr align="center"> <td width="150" align="center"> <!-- 商品サブ画像 --> <a href="画像リンク1"><img src="画像1" width="130" class="thumbnail"></a> <a href="画像リンク2"><img src="画像2" width="130" class="thumbnail"></a> <a href="画像リンク3"><img src="画像3" width="130" class="thumbnail"></a> <a href="画像リンク4"><img src="画像4" width="130" class="thumbnail"></a> </td> <!-- 商品メイン画像 --> <td width="650"><BR> <img id="myPIC" src="最初に表示される大きい画像" style=" margin:10px 25px 30px 25px;"> </td> </tr></table> </body>
その他の回答 (1)
- azkurw
- ベストアンサー率33% (41/124)
関連するQ&A
- オンマウスで画像と文字を同時に任意の位置に表示したい
絵を閲覧するページで以下のようにしたいです。 1.リンク文字の上にマウスを置く 2.任意の位置に『画像』とその画像の下に『文章』が同時に表示される （何も記載されていない位置に表示されるようにしたいです） 3.マウスを離したら最後に表示したものが消えずにそのまま 画像だけ表示は一応できましたが、 文字と同時にというのはわかりませんでした。 それと何もないところに表示するのができませんでした。 以下、作ったソースです。 <SCRIPT TYPE="text/javascript"> <!-- if (document.images) { var img0 = new Image(); img0.src = "gallery/0.png"; var img1 = new Image(); img1.src = "gallery/1.png"; var img2 = new Image(); img2.src = "gallery/2.png"; } function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // --> </SCRIPT> <!-- ↓ここからBODY --> <Table Border="0" Cellspacing="0" align="center" Width="907" style="line-height:18px;"> <Tr><Td Valign="top"> <Table Border="0" Width="300" Cellspacing="0" style="line-height:18px;"> <Tr><Td ColSpan="2"><Font Size="2"> イラスト </Td></Tr> <Tr><Td Width="10"> </Td><Td><Font Size="2"> <A HREF="gallery/0.png" onMouseOver="On('img0')">作品１</A><BR> <A HREF="gallery/1.png" onMouseOver="On('img1')">作品２</A><BR> <A HREF="gallery/2.png" onMouseOver="On('img2')">作品３</A><BR> </Td></Tr> </Table> </Td> <Td Width="500" Valign="top"> <IMG SRC="" NAME="def"> </Td></Tr> </Table> <!-- ↑ここまでBODY --> 作品を追加していく形式のページなので、 なるべくシンプルなソースでお願いします。
- 締切済み
- JavaScript
- テーブル高さ指定タグについて
テーブル高さ指定タグについて サイズがバラバラの４枚の画像をテーブルを使って同じ幅・高さ縦横各２枚並べて表示したいと思っています。 下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか？
- ベストアンサー
- HTML
- ホームページの画像が表示されない
宜しくお願いします。 忍者ホームページの簡単ホームページでホームページを作りましたが画像が表示されず コメントだけの表示に成ります。 忍者ホームページにアップロードした画像ファイル名は一致しております 幾度試しましたが同じ状態です 下記のHTMLは間違って居りますでしょうか困って居ります <table align="right"> <tr><td><img src="img142.jpg"width="250" height="250"></td> <td><img src="img004.jpg"width="250" height="250"></td></tr> <tr align="center"><td bgcolor="#ffcccc">ハイブリットフリウス</td> <td bgcolor="#66cc66">フーガハイブリット</td></tr> <tr><td><img src="img013.jpg"width="250" height="250"></td> <td><img src="img889.jpg"width="250" height="250"></td></tr> <tr align="center"><td bgcolor="#cc9900">ポルシェカレラ</td> <td bgcolor="#9999cc">フェラリーモンディアル</td></tr> </table>
- ベストアンサー
- その他([技術者向] コンピューター)
- 複数のJavascript の組込み方についてです。初心者で色々試して
複数のJavascript の組込み方についてです。初心者で色々試してがんばったのですが、行き詰ってしまいました。私の作りたい物は、ページの左側にリスト部分があり、そのリストをクリックすると右側に写真が出るものです。そしてその写真をクリック、もしくは画像下に作ったいくつかの対応したボタンを押すと、新たな写真が最初に出た写真と同じ場所に表示される、というものになります。私が試行錯誤してみたソースでは、一つ目のリストでは「マウスが触ると写真が切り替わる基本スクリプト」になるように、そして二つ目のリストでは「複数の画像を同じ場所に表示させ切替える」を目指しています。もしお詳しい方で何かお気付きの点があれば、お力を貸して頂けますでしょうか。どうか宜しくお願い致します。 <body> <div align="center"> <TR> <SCRIPT language="JavaScript"><!-- a_data=new Array(); a_data[0]='<CENTER><TABLE><TR>' +'<TD style="width:300;"><img galleryimg=no src="../img/hana1.jpg" onmouseover="this.src='../img/hana2.jpg';" onmouseout="this.src='../img/hana1.jpg';"></TD></TR></TR>' +'<TD style="font-size:14px;vertical-align:bottom;">' +' 写真の説明<br>写真にポインタを合わせると、写真が替わります。' +'</TD>' +'</TR></TABLE></CENTER>'; a_data[1]='<CENTER><TABLE><TR>' +'<TD style="width:300;"><IMG name="myimg" src="../img/0.png" style="float:right; margin:10px 0px 10px 20px;"></TD></TR></TR>'; +'<TD style="font-size:14px;vertical-align:bottom;">' +' 写真の説明' <INPUT type="button" value="写真１" OnClick="document.myimg.src='../img/1.png';"> <INPUT type="button" value="写真２" OnClick="document.myimg.src='../img/2.png';"> <INPUT type="button" value="写真３" OnClick="document.myimg.src='../img/3.png';"> <INPUT type="button" value="最初の写真" OnClick="document.myimg.src='../img/0.png';"> +'</TD>' +'</TR></TABLE></CENTER>'; function pic(sel){document.getElementById("l_menu").innerHTML=a_data[sel];} //--> </SCRIPT> </TR> <div id="A_spc"> <TABLE> <tr> <td style="width:120;height:30;background-color:#ffeeee;font-size:12px;" onclick="pic(0);"> <CENTER>リスト１</CENTER> </td> </tr> <tr> <td style="width:120;height:30;background-color:#ffeeee;font-size:12px;" onclick="pic(1);"> <CENTER>リスト２</CENTER> </td> </tr> </TABLE> </A_spc> </div> <div id="B_spc"> <TABLE> <TR> <TD colspan=2 style="width:350; font-size:12px;padding-left:20;padding-top:35;" id="l_menu"> <CENTER><p class="sample1">左のリストをクリックするとココに写真が出ます。</p></CENTER> </TD> </TR> </TABLE> </B_spc> </div> </div> </div> </body>
- 締切済み
- JavaScript
- 透過してしまうのですが・・・
現在タグでメニューバーをつくっているのですが、 背景が透過されるテーブルタグを利用したところあとから設置した画像までもが透過されてしまいました。その場合はどこのタグを直せばいいのでしょうか？ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <!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>○○</title> <style type="text/css"> <!-- body { background-image: url(jfes_menupict.jpg); background-repeat: no-repeat; margin-left: 50px; margin-top: 20px; } --> </style></head> <body> <p> </p> <table style="filter:Alpha(opacity=50); background-color:#ffffff;"> <tr> <td width="281"><p align="center"> <img src="about.png" width="144" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="schedule.png" width="225" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="event.png" width="139" height="28" /></p> </td> </tr> <tr> <td><p align="center"><img src="blog.png" width="112" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="access.png" width="173" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="link.png" width="94" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="mail.png" width="96" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="toppage.png" width="200" height="27" /></p> </td> </tr> <tr> <td height="15"> </td> </tr> </table> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
- テーブルに画像を入れると、テーブルの幅が広がってしまいます
HTML初心者の者です。 ３行２列のテーブルを作り、左側の列に縮小した画像を入れたのですが、左側の列が画面いっぱいに広がってしまい、画像の幅に合わせて幅を狭くすることが出来ないでいます。 どうしたら、画像の幅に合わせて左列の幅を狭くすることが出来るでしょうか。 その部分のHTMLは、以下の通りです。 <table border="0" align="center"> <tr> <td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> <tr> </td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> <tr> </td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> </table>
- ベストアンサー
- HTML
- imgタグについて
imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2～ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか？ もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>
- ベストアンサー
- HTML
- safariで特定条件下でデーブル幅が効かなくなります
safariでcolspanでセルを結合し、その中に大きい要素（下の例ですとwidth500pxの画像や、文字数60のテキスト領域）を入れると、他の行の幅が変わってしまいます。 スタイルシートでtd幅を指定してやったりしてみたのですが、どうしても幅が変わってしまいます。 何か解決方法等ございましたら、ご教授願います。 <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20％</td> <td width="80%" align="center">80％</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" width="500" height="24"></td> </tr> </table> <br> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20％</td> <td width="80%" align="center">80％</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"><form name="form1" method="post" action=""> <textarea name="textarea" cols="60"></textarea> </form> </td> </tr> </table> <br> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20％</td> <td width="80%" align="center">80％</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"> </td> </tr> </table>
- ベストアンサー
- HTML
- 画像の配置（上下の間隔）で教えて下さい。
初心者なのですが、本についていたｒｏｍを使って ＨＰを作成中です。 使用しているフォントの関係で、文字を加工して画像としてＵＰしたいのですが、その文字（画像）の間隔が広すぎて、どうしたらいいのかわかりません。 <table width="400"border="0 "align="center" cellpadding="0"lspacing="0"> <tr><td> <div align="center"><img src画像1.gif" width="700" height="300"vspace="10"> <img src画像2.gif" width="700" height="300"vspace="10"> </div></tr> </td> </tr> </table> <p align="center"> </p> こういった形になっているのですが、 どう直せば画像の間隔が狭くなるのでしょうか？ 宜しくお願いします。
- 締切済み
- HTML
- DIVで同一ページ内にポップアップってできる？？
普通ポップアップをするときには別ウィンドウを立ち上げますが、DIVを使ってリンク元があるhtmlに別のhtmlを立ち上げることは可能でしょうか？？ 画像のポップアップを同一ページに立ち上げるポップアップは既に手元にあります。 それを立ち上げるのを画像ではなくhtmlにしたいんです。 ----ソース---- 【HTML】 <div id="pWindow" style="position:absolute; visibility:hidden; width:100%; height:100%;"> <table style="width:100%; height:100%;" border="0" cellspacing="0" cellpadding="0"> <tr><td align="center" valign="middle"> <table style=" background-color:#FFF; border:1px solid #000;" border="0" cellspacing="15" cellpadding="0"> <tr><td align="center" valign="middle"> <img src="img/loading.gif" width="400" height="300" id="lPhoto"> </td></tr> <tr><td align="center" valign="middle"> <a href="javascript:cls()"><img src="img/close.gif" width="53" height="17" border="0"></a> </td></tr> </table> </td></tr> </table> </div> 【JavaScript】 //拡大画像を表示する function pwinOpen(imgSrc){ var lgPhoto=document.getElementById('lPhoto'); lgPhoto.src = imgSrc; var pWin=document.getElementById('pWindow'); pWin.style.visibility = 'visible'; } //拡大画像を閉じる function cls(){ var pWin=document.getElementById('pWindow'); pWin.style.visibility = 'hidden'; var lgPhoto=document.getElementById('lPhoto'); lgPhoto.src = "img/loading.gif"; } 分かる方、お忙しいところ申し訳ないんですがご教授ください！！
- ベストアンサー
- JavaScript
補足
すいません。知識不足でご紹介頂いたサイトがを見てもどれをどの部分に入れればいいのか分かりません。宜しければもう少し詳しくアドバイス頂けませんか？宜しくお願いします。