CSS を使用してテキストから画像への効果を実現する_CSS/HTML

テキストの場合、マウスをクリックするとテキストが消えますが、元のテキストがあった場所が画像に変わります。画像をクリックすると画像が消え、元のテキストが表示されます。まるで魔法のようですね。面白いでしょう?! この効果は Dreamweaver の Behavirs 関数を使用して実現することもできますが、それには明らかに大量のコードが追加されます。 CSS を使用してこの効果を作成すると、必要なコードははるかに少なくなります。

原則: CSS プロパティ値は動的に変更できるという事実を利用します。

アイデア: HTML 要素の CSS 属性の 2 つの属性値を定義し、イベントを使用してそれをトリガーします。イベントが発生すると、目的の目的を達成するために HTML 要素の属性値が変更されます。 。

製造方法:

1. Web ページにテキストを入力し、「Span」タグで囲み、それに CSS の「ID」属性を追加します (つまり、テキストに「Text1」などのコード名を付けます)。 、識別用); 別の画像を挿入し、「Span」で囲み、次のように「ID」属性を追加します。

2. Web ページのソースコードの と の間に次の CSS コードを追加します。

上記のコードの「top」と「left」の値は、Web ページ上でテキストと画像を配置するために使用され、「backgroud-color」はテキストの背景色を決定するために使用されます。これらの属性値は、実際の状況に応じて変更する必要があります。可視性は、現在のオブジェクトが表示されるかどうかを決定する CSS プロパティです。この例では、このプロパティの値は効果を実現するために動的に変更されます。

3. CSS「.style2」を「Text1」の「span」に読み込み、そのテキストを先頭に表示させ、「onclick」トリガーイベントを読み込みます。このイベントが発生したら、次の 2 つのことを行います。もう 1 つは、「Text1」に CSS「.style1」を採用させてテキストを非表示にすることです。もう 1 つは、「image1」に CSS 「.style4」を採用させて画像を表示させることです。このように、「Text1」とそのテキストのコードは次のようになります: このテキスト上でマウスをクリックすると、テキストが消えて画像になります。画像をクリックすると画像が消えて本文に戻ります。

4. また、「image1」の「span」にCSS「.style3」をロードして、最初は画像が非表示になるようにし、これが完了したら、別の「onclick」トリガーイベントをロードします。イベントが発生すると、2 つの処理が行われます。1 つは、「Text1」に CSS「.style2」を採用させてテキストを表示させること、もう 1 つは、「image1」に CSS 「.style3」を採用させて画像を非表示にすることです。このように、「image1」とその画像のコードは次のようになります:

height="26">

上記コードの「img」内のコードは、実際の制作では挿入される画像に応じて変わります。