1

私はウェブサイトをやっています。クライアントがログインすると、サイト デザインの 5 つのアイデア (異なるレイアウト、色など) が表示されます。

今は、私が作成してアップロードした 5 つのプリントスクリーンだけを見せています。各画像は、建設中のさまざまな Web サイトにリンクしています。

私が望むのは、何かを変更するたびにプリントスクリーンを手動で変更する必要をなくすことです。

iFrame ソリューションを試しましたが、インタラクティブです。

最善のアプローチは何ですか？

編集：

（回避策）ソリューションがありますが、Chromeのみです。

<a target="_parent" href="http://url.com">
<div>
<iframe id="iframe" src="http://url.com" width="300px" height="300"></iframe>
</div>
</a>

ズームアウトしてウェブサイトをサムネイルのように見せるためのCSS：

#iframe{
zoom: 4.0;
-moz-transform: scale(0.25);
-moz-transform-origin: 0 0;
-o-transform: scale(0.25);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.25);
-webkit-transform-origin: 0 0;
}

Chrome =サイズは完璧です。iframeブラウザ内のリンクをクリックすると、私のhrefが開きます（非常に多くのロジック...）。iframe内をクリックしてもリンクではなく、何も起こりません。

FF = Chrome の 4 分の 1 のサムネイル

IE = サムネイルの 4 倍の大きさ

4

1 に答える 1

0

ページ全体をカバーするdivコンテナを挿入して、ユーザーが何もクリックできないようにすることができますが、div.

<div style="position:fixed;width:100%;height:100%;"></div>

完全なコードは次のようになります。

<html>
    <body>
        <div style="position:fixed;width:100%;height:100%;"></div>
        <iframe src="http://www.http://stackoverflow.com" width="100%" height="300" ></iframe>
   </body>
</html>

編集:これを試すことができます:

    <div id="myiframes">
        <div style="position: relative; width: 300px; height: 300px; display: inline-block;"></div>
        <iframe src="http://www.w3schools.com" width="300px" height="300" style="margin-left:-300px;"></iframe>
        <div style="position: relative; width: 300px; height: 300px;display:inline-block;"></div>
        <iframe src="http://www.w3schools.com" width="300px" height="300" style="margin-left:-300px;"></iframe>
</div>

基本的に、-300px のマージンを追加して、各 iframe を div を超えて移動します。各iframeに。ニーズに合わせて変更

于 2013-07-03T21:30:02.767 に答える