2017-02-17 8 views
1

私はクラスの対話型ブラックアウト詩を作りたいと思っています。 This is a blackout poem btw、私は要素を調べるときに、{ブラックアウトエディタスタイル。これは私が借りることができるものですか?芸術プロジェクトのブラックアウトテキスト

私はW3 SchoolsのHTMLとCSSのテキストとリンクのスタイリングに関する基本的なチュートリアルを終えています。私はそれが望むように動作するものは何も見つかりません。 私は標準的なテキストを使いたいと思っています。ユーザーがそれをクリックしたときに各単語が「ブラックアウト」し、その結果、画面上の黒でない単語を画面上で見ることができます。

アイデア? TIA、私はコーディングに新しいです。

+0

私はあなたがいくつかのHTMLを提供し、あなたが仕事をしてくれればあなたを助けることができると思う。 –

+0

@AlexanderTyapkov私の答えにはHTMLやCSSなどがありますか? :) –

+0

@KyleMartinあなたが知っていることは、彼女がそれを自分で作った場合、人が何かを学ぶ可能性が高いことです。たとえそれが小さくて実装が簡単なものであっても! ;-) –

答えて

0

例:アクションで

<span>Here </span> 
<span>are </span> 
<span>some </span> 
<span>words </span> 
<span>for </span> 
<span>a </span> 
<span>poem </span> 

<script> 
    $("span").on("click", function() { 
     $(this).css("background", "black"); 
    }); 
</script> 

<style> 
    span { 
     cursor:pointer; 
    } 
</style> 

:確かhttps://jsfiddle.net/kylemartin/f16okqsq/

、私の例では停電をアン行うためのメカニズムを持っていませんが、それはチェックと同じくらい簡単ですスパンの背景色とそれが黒ならば、それを黒くしないでください。

私はこれがあなたが探しているものだと思います。そうでない場合は、私に知らせてください、私はそれを改善することができます。ちょっと醜いですが、それは目標を達成します。

このコードは何:

私たちがやることは、私たちが自分の<span>秒にすべての単語を入れています。これは、各単語がクリック可能な「単位」になるように必要です。その後、<span>のいずれかのクリックをリッスンするJavascriptのクリックハンドラを作成します。誰かが<span>のいずれかをクリックすると、その背景色は<span>に変更されます。私はちょうど良い測定のためのCSSを追加しました。ちなみに、CSS <style>タグは、HTMLファイル(または外部スタイルシート)の<head>に入れる必要があります。

このコードの問題:

もちろん、言葉this--することができます「のハイライトを消し」ではないとの1つのプライム問題があります。ただし、クリックした<span>の背景色を確認するクリックハンドラーにifステートメントを追加するのと同じくらい簡単です。 <span>に背景がない場合は、黒にします。 <span>に黒い背景がある場合は、背景を削除します。私はあなた自身のためにその部分を理解できるようにします。 :)(良い学習経験)

+0

ありがとう、私はすぐに、私に意味をなさないすべての1つの答えを期待していない。私はの機能についても考えていませんでした。私はそれに渦を立てます。もう一度時間をとってくれてありがとう! – Aisling

+0

問題はありません、私は手伝ってうれしい!それ以上の援助ができたら、私に知らせてください。私はあなたがスタックオーバーフローを初めて知っていることを知っているので、受け入れられた答えとしてあなたのために働いた答えをマークするのが一般的な習慣です。明らかにあなたは*する必要はありませんが、それは感謝されます:) –

関連する問題