ホームページ上のリンクについて
- 会社のシステム関係の担当者が、ホームページの管理方法について質問しています。
- 現在のホームページの構成は、トップページに大きな写真とサムネイル写真が並んでおり、サムネイル画像がスライドする仕組みです。
- 今後、大きな写真をクリックすると解説のページにリンクするようにしたいと考えています。どのようなhtmlソースを使用すれば良いのか教えてほしいとのことです。
- ベストアンサー
ホームページ上のリンクについて
何卒宜しくお願いいたします。 私は会社のシステム関係の担当をしており、弊社のホームページの管理も行っております。 ホームページは「modx evolution」を使用して作成しております。 トップページに大きな写真とそのすぐ下に10個ほどサムネイル写真が10個並んでおり、そのサムネイル画像がスライドすることで大きな写真もスライドしていくような作りです。現在はその大きな写真をクリックしても何も変わらないのですが、今後その大きな写真をクリックするとその写真の解説のページにリンクするようにしたいと思っているのですが、どのようなhtmlソースを使用すればよいか教えていただけますでしょうか？ 【補足】 管理方法としては下記のとおりです。 管理画面「エレメント」→「エレメント管理」→「チャンク」→「トップページ」（ここでhtmlソースの編集を行っています。 ソース：<li><a href="img/n-common/slide/大きい画像ファイル名"><img src="img/n-common/slide/小さい画像ファイル名"title="写真の名前"alt="写真のキャプション"></a></li> 以上です。何卒よろしくお願いいたします。
- thomas-com
- お礼率66% (2/3)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
MODX Japanの中の人です。 いつもご利用いただきありがとうございます。 おそらく、aタグで大きい画像にリンクしているので、限界があるのではないかと思います。 CSS・JSを使えばもっと色々出来るとおもいますが、一つの解決策として、iframeを使ってはいかがでしょう。 <li><a href="img/n-common/slide/大きい画像ファイル名.html（もしくはリソースID）"><img src="img/n-common/slide/小さい画像ファイル名"title="写真の名前"alt="写真のキャプション" target="image_frame"></a></li> 大きい画像ファイル名.html img→n-common→slideというコンテナの階層を作り、その中にリソースを作成して下さい。 MODX内でコンテナ・リソースを作成しても、実際のファイルが優先して使用されます。 テンプレートは[*content*]のみの空白のテンプレートを作成して使用してください。 <html> <head><title>ごにょごにょ</title></head> <body bgcolor="#FFFFFF"> <a href="img/n-common/slide/解説文.html（もしくは解説文リソースID）"><img src="img/n-common/slide/大きい画像ファイル名"title="写真の名前"alt="写真のキャプション"></a> </body> </html> ご参考になれば幸いです。
関連するQ&A
- スライドショーの画像にリンクがはれない。
http://bxslider.com/examples/thumbnail-pager-1 上記のjsプラグインでＨＰのスライドショーを作っています。 一応、うまくできましたが。ソースの１２２行目 <li><img src="/images/730_200/tree_root.jpg" /></li> この画像にリンクをはるために、 <li><a href="●●●●.html"<img src="/images/730_200/tree_root.jpg" /></a></li> と入力してアップロードしなおすと、スライドショーができなくなります。 何がいけないのでしょうか。お願いします。
- ベストアンサー
- JavaScript
- ホームページにスライドショーを・・
ホームページ作成初心者です。 ホームページのトップページに写真を数枚スライドショーで出したいのですが、どのようにしたらいいのでしょうか？ スライドショーの作成方法（使用ソフトなど。。。出来ればソフトはフリーで作りたいです） ソースへの書き方 など 教えていただければ、と思います。 どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- jquerymobileのページ遷移のような遷移
いつもお世話になっております。 jquerymobileのページ遷移のような遷移を行いたいのですが、 イメージ（スライドはしなくても可） URL：http://billboardtop100.net/jquery_mobile/slide/slide.html 流れとしては、ページローディングしている最中、画面がオーバーレイしながら、 ローディングのアニメーション画像を表示し、 ロードが完了したら、スライドしてURL先へリンクする というイメージなのですが（スライドはしなくても可） ajaxとかそういう技術を使わないと、スムーズに遷移しないのでしょうか、、 以下に作ってみたサンプルを記載しますが、 単純にオーバーレイしてからリンク先へアクセスしているので、 読み込みも遅くなりますし、以下のコードだと、ロードの画像が真ん中にきません、、 そして画像を隠す動作が一瞬ちらついてしまいます、、、 html <div id="shade"><img src="/img/ajax-loader.gif" alt="ローディング中"></div> <section data-role="content"> <ul data-role="listview"> <li><a href="/aboutus.html" data-transition="slide">hoge</a></li> <li><a href="sample.html" data-transition="slide">hoge2</a></li> <li><a href="sample.html" data-transition="slide">hoge3</a></li> </ul> </section> js jQuery(function(jQuery){ jQuery("#shade").css({ opacity: '0.6', display: 'none', position: 'absolute', top: '0', width: '100%', height: '100%', background: '#000', zIndex: '1' }); jQuery("a[href]").click(function(e){ link = jQuery(this).attr("href"); if (!link.match(/#/i)) { e.preventDefault(); jQuery("#shade").css('display', 'block'); } }); }); カッコいいページ遷移がしたいです。。 是非ご教授下さい。 どうぞよろしくお願いします
- 締切済み
- JavaScript
- リンクページがちゃんと画像表示されない
PHP5.0、Smartyで開発しています（個人サイト） リンクを押すと、リンクページ（自サイト）は表示されるのですが、 画像などが表示されないことがあります。 .tplファイルなので、↓の同じリンクをいくつものファイルに書きましたが、ふつうにちゃんと表示されるページもあれば、リンクページの画像落ちといったページにもなります。 これはどうしてでしょうか？ </div><!--header--> <ul id="menu"> <li><a href="{$info.back_url}">TOP</a></li> <li><a href="{$info.http_url}">記事一覧</a></li> <li><a href="{$info.http_url}/archive">過去ログ</a></li> <li><a href="{$info.http_url}/search">記事検索</a></li> <li><a href="{$info.http_url}/rss">RSS</a></li> <li><a href="{$info.https_url}/admin">管理者用</a></li> </ul> <img src="./image/main_img.jpg" alt="" width="760" height="340" id="main-img" />
- ベストアンサー
- PHP
- jQueryプラグイン「Skitter」でリンク
jQueryプラグイン「Skitter」でリンクについて jQueryプラグイン「Skitter」でリンクについてわからないことが２点ございます。 まず、画像の淵に青色のラインが入る（IMGの「 border="0"」が効かない） あと、インラインフレーム内で動かし、変わる画像のリンク指定を全ウィンドウ（target="_parent"）に指定したいのですが、これもうまくいきません。。。 ぜひお助けいただきたいと思っております。よろしくお願いします。 ↓例えば下記のように３つの画像を指定した場合にborderもtargetもききません。 <div class="box_skitter box_skitter_large"> <ul> <li> <a target="_blank" href="http://www.yahoo.co.jp/"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/calmlife/cabinet/detai..." border="0" class="circles" ></a> </li> <li> <a target="_blank" href="http://www.google.co.jp/"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/calmlife/cabinet/detai..." border="0" class="circles" ></a> </li> <li> <A target="_blank" href="http://www.rakuten.co.jp/"><IMG src="http://thumbnail.image.rakuten.co.jp/@0_mall/calmlife/cabinet/detai..." border="0"></A> </li> </ul> </div>
- 締切済み
- JavaScript
- ホームページビルダーで・・・
現在ビルダーV6.5でホームページを作成しています。 下記のURLと同じようなことをやりたいのですが ソースを見てもやり方がわからず行き詰っています。 http://www.shashinkan.ne.jp/~yoshida/ このTOPページの画像は1枚なのですが、 それぞれの写真によってリンク先が異なっています。 画像が5枚バラバラならできるのですが 1枚の画像の上でその部分部分によってリンク先を 変えたいときはどうすればよいのでしょうか？？ よろしくお願いしますm(_ _)m
- ベストアンサー
- その他(ソフトウェア)
- jQueryスライドショーについて
jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを 参考にしようとしています。皆様のお知恵をお貸しいただければ 幸いです。 http://jsdo.it/alicex/45Jv 実際に配置して、ブラウザチェックを行ったのですが、 (1)Chrome・Firefoxだと、スライドショーを配置しているページから離れて 戻ってきた際に、離れていた時間分だけスライドショーのメインイメージが暴走 して、勝手に動いてしまいます。 (2)また、サムネイル上でカーソルを高速で通過させると、 させた分だけ記憶してメインイメージが変化してしまいます。 (1)のバグを無くしたいのと、(2)は、今カーソルを合わせている サムネイルに対応したメインイメージにすぐ変化して欲しいです。 jsに原因があると思うのですが、どの部分を修正すればよいでしょうか。 $(function() { var thumb = $("#thumbnail"); var main = $("#main"); $("li:first-child",thumb).addClass("on").children("img").hide(); $("li:not(:first-child)",main).hide(); slider(); $("li",thumb).hover(function() { $("li",thumb).removeClass("on").children("img").show(); $(this).addClass("on").children("img").hide(); num = $(this).index() + 1; mainSelector = $("li:nth-child(" + num + ")",main); mainSelector.fadeIn(); $("li",main).not(mainSelector).fadeOut(); }); }); function slider() { $("#thumbnail li img").show(); $("#thumbnail li.on img").hide(); c = $("#thumbnail li.on").index() + 1; c2 = $("#thumbnail li.on").index() + 2; mainSelector = $("#main li:nth-child(" + c + ")"); $(mainSelector).fadeIn(); $("#main li").not($(mainSelector)).fadeOut(); $("#thumbnail li").removeClass("on"); if (c2 == 6) { $("#thumbnail li:nth-child(1)").addClass("on"); }else{ $("#thumbnail li:nth-child(" + c2 + ")").addClass("on"); } timerID = setTimeout('slider()',3000); } 本来ならば作者様に質問する事がよいと思うのですが、 より多くの方からお知恵を拝借したいと考え、この場で質問 させていただきました。 何卒よろしくお願いいたします。
- ベストアンサー
- JavaScript
- Webページ 画像切替する場合のタグ表記について
初めてWebページ作成する者です。 以下のように記述したTOPページの画像(main.jpg)があります(下記は抜粋)。 ソース(1) <div id="contents"> <div id="main_area"> <p id="main"><img src="img/main.jpg" width="580" alt="" /></p> </div> </div> 現在、JavaScriptを使用して、自動的に画像を切替できるよう修正しています。 切替る画像は、main01.jpg、main02.jpg、main03.jpgの３つで、HTML部でリストを 使用する場合、下記のソース(2)をソース(1)に組み込むには、どのようにすれば 良いでしょうか。 ソース(2) <ul id="xxxxx"> <li> <img src="img/main01.jpg" width="580" alt="" /> </li> <li> <img src="img/main02.jpg" width="580" alt="" /> </li> <li> <img src="img/main03.jpg" width="580" alt="" /> </li> </ul> 周りに質問できる人がおらず、困っています。 申し訳ありませんが、よろしくお願い致します。
- ベストアンサー
- HTML
- サムネイル画像をリンクにしたとき align="top"が効かない
サムネイル画像をリンクにしたときに横に"＊"を画像topと揃えて表示したいのですが、 <A HREF="リンク先"><img border="0" src="image.gif" align="top"></a>＊<br> 上記ソースで"＊"が下になってしまうのはなぜでしょうか。 解決策がありましたら、ご教示お願いします。
- ベストアンサー
- HTML
- jsでグリッドデザインのサムネイルを制御する方法
図1のような、運用時にサムネイル画像の数が増えたり減る仕様でグリッドデザインをコーディングしているのですが、更新の度にhtmlソースを書き直すのは手間なので、どうにか簡単に更新できないか悩んでいます。 ▼仕様 サムネイル画像は画像の番号順に増えたり減ったりする。 ▼問題点 ・サムネイル画像の縦の長さが一定ではない。かつ、並んだ時のマージンは一定。 ↓ ・上記の条件があるので、コーディング時には図2のように、縦にエリアを割って、area1、area2、area3、area4それぞれfloatをかけて並べる必要がある。 縦にエリアを割ってコーディングすると、htmlソース上では画像の順番がバラバラになるので、どうにかして、下記ようにリストのような状態で、図1のようなデザインを実現したいのですが、JavaScriptで出来るものでしょうか？ （※別にリストでなくてもいいのですが） <ul> <li>タイトル<img src="thum01.jpg"></li> <li>タイトル<img src="thum02.jpg"></li> <li>タイトル<img src="thum03.jpg"></li> <li>タイトル<img src="thum04.jpg"></li> ～ </ul> ご教授をお願いしたく、、、。 よろしくお願い致します。
- 締切済み
- JavaScript
補足
お返事が遅くなり大変申し訳ございません。 この度はご回答とても感謝いたします。早速modx内のエレメント→エレメント管理→テンプレートで*content*の空白のテンプレートを作成し、その中に教えていただいた下記のhtmlを作成いたしました。 <html> <head><title>ごにょごにょ</title></head> <body bgcolor="#FFFFFF"> <a href="img/n-common/slide/解説文.html（もしくは解説文リソースID）"><img src="img/n-common/slide/大きい画像ファイル名"title="写真の名前"alt="写真のキャプション"></a> </body> </html> そこで教えていただいたimg→n-common→slideというコンテナの作成方法について教えていただけないでしょうか。素人な内容をお聞きして誠に申し訳ございません。既にエレメント→ファイル管理にimg→n-common→slide→トップページ写真jpgデータという階層でファイルは作成してあるのですがそことは別の場所にコンテナを作成すればいいのでしょうか？ 何卒ご享受お願いいたします。