フォトギャラリー！JavaScriptが分かりません
- フォトギャラリー作成時にJavaScriptのコードを記述したが、サムネイルにマウスを乗せても大きな画像が表示されない。何が足りないのか、問題点を教えてください。
- HTMLとCSSを使用してフォトギャラリーを作成しましたが、JavaScriptのコードを追加したにもかかわらず、サムネイル上でマウスを乗せても拡大画像が表示されません。どこが間違っているのか、アドバイスをお願いします。
- フォトギャラリーの作成においてJavaScriptを使用しましたが、サムネイル上でマウスを乗せても大きな画像が表示されません。間違っている箇所や必要な追加要素についてアドバイスをいただきたいです。
- ベストアンサー
フォトギャラリー！ 何が足りませんか
JavaScriptが分かりません （ページソース）を記述しましたがサムネイルにマウスを乗せても大きい画像が表示されません。 何が足りないのか、何が間違いかご教授願います。 HTML ------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html 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"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="css/gallery.css" type="text/css"> </head> <body> <div align="center"> <div id="gallery"> <div id="thumbs"> <img src="gallery/cate/g (1)-s.jpg" title="eyes0271 梅" alt="梅" onmouseover="document.BigPhoto.src='gallery/cate/g (1).jpg';"> <img src="gallery/cate/g (2)-s.jpg" title="eyes0272 桜" alt="桜" onmouseover="document.BigPhoto.src='gallery/cate/g (2).jpg';"> <img src="gallery/cate/g (3)-s.jpg" title="eyes0273 山" alt="山" onmouseover="document.BigPhoto.src='gallery/cate/g (3).jpg';"> <img src="gallery/cate/g (4)-s.jpg" title="eyes0274 川" alt="川" onmouseover="document.BigPhoto.src='gallery/cate/g (4).jpg';"> </div> <p><img src="gallery/cate/gallery.jpg" alt="表紙（デフォルト画像）" class="waku" name="bak"></p> </div> </div> </body> </html> ------------- CSS ------------- #gallery { width: 900px; height:280px; padding: 10px; background-color: #888888; } img.waku { display: block; width: auto; margin: 5px auto; } #thumbs { float: left; width: 270px; margin: 0; padding:0; } #thumbs img { width: 80px; height:60px; float: left; margin: 0 0 5px 5px; } よろしくお願いします。
- meah1835
- お礼率74% (98/132)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 <img src="gallery/cate/gallery.jpg" alt="表紙（デフォルト画像）" class="waku" name="bak"> ここのname="bak"ですが name="BigPhoto" ではないでしょうか。
関連するQ&A
- JavaScriptにリンク設定は正しいですか
サイト作成中です。（アップはしていません） JavaScriptを使いギャラリーを設置しました。 （下記記述） これにサムネイルクリックでジャンプ出来るよう最初の一枚を <a href="index.html"></a>で囲んでみました。 <a href="index.html"><img src="gallery/cate/g (1)-s.jpg" title="eyes0271 梅" alt="梅" onmouseover="document.BigPhoto.src='gallery/cate/g (1).jpg';"></a> ジャンプは出来ましたが、この記述で問題ありませんか？ アップ後に JavaScriptに悪影響は及ぼしたりはしませんか？ ご教授ねがいます。 HTML ------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html 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"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="css/gallery.css" type="text/css"> </head> <body> <div align="center"> <div id="gallery"> <div id="thumbs"> <a href="index.html"><img src="gallery/cate/g (1)-s.jpg" title="eyes0271 梅" alt="梅" onmouseover="document.BigPhoto.src='gallery/cate/g (1).jpg';"></a> <img src="gallery/cate/g (2)-s.jpg" title="eyes0272 桜" alt="桜" onmouseover="document.BigPhoto.src='gallery/cate/g (2).jpg';"> <img src="gallery/cate/g (3)-s.jpg" title="eyes0273 山" alt="山" onmouseover="document.BigPhoto.src='gallery/cate/g (3).jpg';"> <img src="gallery/cate/g (4)-s.jpg" title="eyes0274 川" alt="川" onmouseover="document.BigPhoto.src='gallery/cate/g (4).jpg';"> </div> <p><img src="gallery/cate/gallery.jpg" alt="表紙（デフォルト画像）" class="waku" name="BigPhoto"></p> </div> </div> </body> </html> ------------- CSS ------------- #gallery { width: 900px; height:280px; padding: 10px; background-color: #888888; } img.waku { display: block; width: auto; margin: 5px auto; } #thumbs { float: left; width: 270px; margin: 0; padding:0; } #thumbs img { width: 80px; height:60px; float: left; margin: 0 0 5px 5px; } よろしくお願いします。
- ベストアンサー
- JavaScript
- javaもWEBも初心者もいいとこです。
よろしくおねがいいたします。 後任で一人でWEBをやることになってしまって、右も左もよくわかりません。 他の方が作成していましたjavaデータを試行錯誤したものが下記になります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>イベント情報</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <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"> <link href="base.css" rel="stylesheet" type="text/css" media="all"> ～～中略～～ <div class="all-data"> <img src="22img/fg5000.JPG" width="300" height="300" border="0" name="IMG_5" alt="展示会"></div> <!-- コメント --> <div id="image-cap">5月29～30日 展示会１ </div> <!-- S画像 --> <div id="image-Sall"> <center> <img src="22img/fg5001s.JPG" width="45" height="45" border="0" onmouseover="if(document.images)IMG_5.src='22img/fg5001.JPG'"> ～～中略（以下5008まで続く）～～ <img src="22img/fg5008s.JPG" width="45" height="45" border="0" onmouseover="if(document.images)IMG_5.src='22img/fg5008.JPG'"> この後、～～中略～～から下をコピーして、 (1)fg5で始まる数字を、全てfg6に変更し、同じように8枚の画像を用意 (2)IMG_5.src=の部分を、IMG_6.src=に変更した。 これが、追加して変更した以下の文です。↓ <div class="all-data"> <img src="22img/fg6000.JPG" width="300" height="300" border="0" name="IMG_6" alt="展示会2"></div> <!-- コメント --> <div id="image-cap"> 6月1～10日 展示会2 </div> <!-- S画像 --> <div id="image-Sall"> <center> <img src="22img/fg6001s.JPG" width="45" height="45" border="0" onmouseover="if(document.images)IMG_6.src='22img/fg6001.JPG'"> （以下6008まで続く） <img src="22img/fg6008s.JPG" width="45" height="45" border="0" onmouseover="if(document.images)IMG_6.src='22img/fg6008.JPG'"> fg5で始まるデータの方は、問題なく、別画像が表示されたのですが、 fg6で始まる方のデータは、fg6001～fg6004までが表示されず、 fg6005～fg6008までは、ちゃんと表示されます。 こういう場合は何のミスが考えられるのでしょうか？
- ベストアンサー
- JavaScript
- フッターを固定したい…
上の写真のようにDivを組んでいるのですが、 Div4のフッタをブラウザに固定して表示したいのですが、どうすればよろしいのでしょうか? Div4はCSSでbackground-imageとして画像(jpg)が指定されています。 ●html <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <link rel="stylesheet" href="design.css" type="text/css"> <style type="text/css"> </style> </head> <body> <div id="body"> <div id="main"> <div id="div1"> <p class="clip"> <img src="clip.jpg"alt="New clip!"> </p> <p class="b-design"> <a href="design.html"> <img src="b-design.jpg"> </a> </p> <p class="b-photo"> <a href="photo.html"> <img src="b-photo.jpg"> </a> </p> <p class="b-mail"> <a href="mailto:a@com"> <img src="b-mail.jpg"> </a> </p> </div> <div id="div2"> </div> <div id="div3"> </div> </div> <div id="div4"> </div> </div> </body> </html> ●CSS * {margin:0; padding:0} body {background-color:black; width:100%;} img {border-style:none} #body {position:relative; margin: 0 auto; width:800px} #main {} #div1 {float:left; width:330px; height:370px; background-image:url("div1.jpg")} #div2 {float:left; width:470px; height:370px; background-image:url("div2.jpg")} #div3 {float:clear; width:800px; height:800px; background-image:url("div3.jpg")} #div4 {float:clear; width:800px; height:210px; background-image:url("div4.jpg")} .clip {position:absolute; top:30px; left:20px} .b-design {position:absolute; top:290px; left:30px} .b-photo {position:absolute; top:320px; left:30px} .b-mail {position:absolute; top:350px; left:30px}
- ベストアンサー
- HTML
- インクルード関数
すみません、下記はインクルードの元のPHPファイルです。 これでインクルードすると CSSのリンクと画像のリンク のところでParse error: syntax error, unexpected T_STRING というエラーが出ます。 $HTMLHEADER の中を単純な文字にするとエラーが出ないという ことはインクルードそのものの構文は間違っていないということ だと思います。 インクルードの場合リンクはどうすればいいんでしょうか？ <?php //ページタイトル $APPTITLE = "関東近県の格安出張"; //ヘッダ部 $HTMLHEADER = " <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'> <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=utf-8'> <META http-equiv='Content-Style-Type' content='text/css'> <TITLE>" . $APPTITLE . "</TITLE> <link href="css/basic.css" rel="stylesheet" type="text/css" media="all" /> </HEAD> <BODY> <TABLE width='100%' bgcolor='#ff8000'> <TR> <TD> <div><img src="images/head.jpg" alt="" /></div> <div><img src="images/main.jpg" alt="" /></div> <ul class="u"> <li><a href="index.html"><img onmouseover="this.src='images/home2.jpg'" onmouseout="this.src='images/home.jpg'" src="images/home.jpg" alt="" border="0" /></a></li> </ul> </TD> </TR> </TABLE>"; //フッタ部 $HTMLFOOTER = "</BODY> </HTML>"; ?>
- ベストアンサー
- PHP
- css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。） 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 ＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>
- ベストアンサー
- HTML
- IE7にのみ有効なCSSソース
お世話になっております。 写真を縦に４枚並べているのですが、間が4pxあけたいのに、8px空いてしまいます。IEのみ有効のCSSソース「アンダーバー」を使用すると、IE6では、有効ですが、IE7では、有効となりません。いい方法はありますか。 （CSSソース) #left img{ margin:0 4px 4px 4px; _margin:0 4px 0px 4px; /* IE のみ有効 */ padding:0px; } (Ｈｔｍｌソース） <div id="left"> <h2>取扱商品（一例）</h2> <img src="ephoto/truck1.jpg" width="112" height="83" alt="トラック1" /> <img src="ephoto/truck2.jpg" width="112" height="83" alt="トラック2" /> <img src="ephoto/truck3.jpg" width="112" height="83" alt="トラック3" /> <img src="ephoto/truck4.jpg" width="112" height="83" alt="トラック4" /> <img src="ephoto/truck5.jpg" width="112" height="83" alt="トラック5" /> </div><!-- reft の終了タグ-->
- ベストアンサー
- その他（インターネット・Webサービス）
- IE６だと動かない マウスオーバーで画像の入れ替え
以下のように書いてみました。 IE6以外では期待した動作が得られます。 ※imgファイルは適当です。実際に動かす場合は、適当に直して下さい。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; } #itmImg{ width: 240px; float: left; position: relative; } #itmImg img{ display:block; } #itmImg a span{ display: none; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <img src="hoge1.jpg" width="240" height="240" alt=""> <ul> <li> <a href="javascript:void(0);"> <img src="hoge2.jpg" width="80" height="80" alt=""> <span><img src="hoge2.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge3.jpg" width="80" height="80" alt=""> <span><img src="hoge3.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge4.jpg" width="80" height="80" alt=""> <span><img src="hoge4.jpg" width="240" height="240" alt=""></span> </a> </li> </ul> </div> </body> </html> IE6でも動くようにするにはどうしたら良いでしょうか？ ご指導の程、宜しくお願いいたします。
- 締切済み
- CSS
- CSSのみで作る横ドロップダウンメニュー
教えてください。白旗です。 クライアントの指示でCSS＋xhtmlのみでサイトを作成していますが、横並びのプルダウンメニューで行き詰りました。 IE6以外のブラウザでは正常な表示をされるのですが、IE６のみへんてこりんになってしまいます。 下記ソースで、メニューAにマウスを乗せてドロップダウンをさせると、メニューBが右に動きます。 これに2日間はまってます。 よろしくお願いします。 ---ソース--- 【html】 <div id="gnavi_container"> <div id="gnavi"> <ul> <li class="gmenu02_off" onmouseover="this.className='gmenu02_on'" onmouseout="this.className='gmenu02_off'"><a href="#"><img src="img/1.jpg" width="122" height="25" alt="" onmouseover='this.src="img/3.jpg"' onmouseout='this.src="img/1.jpg"' /></a> <ul class="gmenu_sub"> <li><a href="#"><img src="img/4.jpg" width="138" height="19" alt="" /></a></li> </ul> </li> <li class="gmenu03_off" onmouseover="this.className='gmenu03_on'" onmouseout="this.className='gmenu03_off'"><a href="#"><img src="img/2.jpg" width="81" height="25" alt="" onmouseover='this.src="img/2.jpg"' onmouseout='this.src="img/2.jpg"' /></a> </li> </ul> </div> </div> 【css】 img{ border:0; } div#gnavi_container{ position : relative; z-index:100; width:800px; height:25px; text-align:left; } div#gnavi ul { margin: 0; padding: 0; list-style: none; } div#gnavi li { float : left; margin : 0; padding : 0; } .gmenu_sub li{ overflow:visible: } .gmenu02_off{ height:25px; width:122px; overflow : hidden; } .gmenu02_on{ width:122px; overflow :visible; } .gmenu03_off{ height:25px; width:81px; overflow : hidden; } .gmenu03_on{ width:81px; overflow :visible; } div#gnavi ul.gmenu_sub{ margin : 0; padding : 0; } div#gnavi ul.gmenu_sub li{ margin : 0; padding : 0; float : none; clear : both; }
- 締切済み
- HTML
- 画像のセンターリングについて
真ん中にはなるのですが、IEで見るとwidth900pxにしているのに940pxになったり、firefoxで見るとスクロールすると上下に背景ではなくて画像が動いてしまいます。どうやって治したらいいでしょうか？ html <div id="content"><img src="img/bacttrast.png" alt="aa" /></div> css #content{ padding: 40px; width: 900px; height:790px; margin: 0 auto; }
- ベストアンサー
- ホームページ作成ソフト
- 同HTML内で複数のjQueryを設置したいです
買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか？ 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
お礼
BigPhoto 動きました！ 言われてみれば "なるほど " 勝手に名前を変えた私が悪い！・・・ですね。 これでまた次に進めます ありがとうございました。