0

皆さん、インターンシップで頭がいっぱいになりました。Wolfram Alphaの元部門長であるコンピュータ理論の教授でさえ、実際には何の有用な情報も教えてくれません。他に役立つサイトが見つからないので、あなたの指示だけでこの一連の Web ページの作成に着手しなければならないようです。

教室環境に統合したさまざまなテクノロジを説明するページをまとめています。画像にカーソルを合わせると、より大きな画像がポップアップするという意味で、このようなCSS 画像ギャラリーを使用したいと考えています。

ただし、iframe 内の画像とそれに付随するテキストおよびリンクを交換できるようにしたいと考えています。これが私の言いたいことの実例です。マウスを左側のギャラリーの写真の 1 つに合わせると、画像、その下のテキスト、およびその左側のテキスト ボックスの情報が変更されます。私の考えは、必要なすべての情報を iframe 内に表示して、その技術に関連するすべてを 1 か所で取得できるようにすることです。

「Podium Components」の下のボックスがiframeになります。Web開発クラスでCSSを利用してWebサイトを構築したので、画像の交換はCSSで実行できることを知っています(Wolfram Alphaの先生:D)

可能であれば、これには Java や JavaScript を使用せず、純粋な CSS に固執したいと思います。ウェブサイトに使用している CMS は Drupal であるため、すでにかなり複雑になっています。JavaScript をミックスに投入すると、奇抜になりすぎます。

追記として、私はプロジェクトに取り組んでいるときに、StackOverflow を使用することにいつも罪悪感を覚えます。だまされているように感じます:/。そのため、チュートリアルを参照していただくか、必要な場所にたどり着くための検索用語を教えていただければ幸いです。より市場に出られるようになるために独学を手伝ってくれますか? :D よろしくお願いします！

4

2 に答える 2

1

javascriptを使用せずにこれを本当に実行したい場合（最近は奇妙なことはないと思います）、「表彰台のコンポーネント」を非表示の<div>要素に配置して、左側のギャラリーの各アイテム内に配置できます。このようなもの：

<ul id="gallery">
    <li id="item1">
        Left-hand item 1
        <div class="hidden-data">
            Your podium component's content here
        </div>
    </li>
    <li id="item2">
        Left-hand item 2
        <div class="hidden-data">
            Another podium component
        </div>
    </li>
</ul>

:hoverこれで、リストアイテムのスタイルを作成して、マウスがその上にあるときにのみ表示されるようにすることができます。このソリューションは必要ありません<iframe>。左側のギャラリーに大量のアイテムがある場合を除いて、より最適だと思います。

表彰台のコンポーネントを必要な場所に配置するには、positionとして設定しabsoluteます。それらがどのように機能するかを調べるのはあなたに任せます（ヒント：親要素をposition: relative-として設定する必要がありますが、親要素だけでなく、賢明に選択してください！）:)

編集：実際の動作を確認したい場合は、これがスポイラーです。

于 2012-05-09T15:05:07.527 に答える
1

CSSを使用するためだけにCSSを使用したい場合、それはWeb開発のセマンティクスに関して間違ったアプローチです。でもお尻にならないように頑張ってお手伝いします！;）

JavaScriptのようなものを使用せずに、CSSプロパティ'content'を使用してDIVなどのコンテンツを変更できます 。http ：//www.w3schools.com/cssref/pr_gen_content.aspこのソリューションの利点は、変更したいコンテンツのiframeを作成する必要はありません。

もちろん、iframeの使用を主張する場合は、他の解決策もあります。画像のホバー状態でCSSの疑似クラスを使用して、iframeの表示値を変更することもできます。

http://devsnippets.com/article/5-advanced-css-pseudo-class.html

のように、画像にカーソルを合わせると画像が拡大され、同時にDIVの内容が変更されます。そんなに難しいことではないと思います！

これが少しお役に立てば幸いです。

于 2012-05-09T15:05:50.140 に答える