Текст затемнения для арт-проекта

Я хочу создать интерактивное стихотворение для класса. This is a blackout poem btw, и я вижу, когда я проверяю элемент, у которого есть {. затемнение редактора. Это что-то, что я могу взять?Текст затемнения для арт-проекта

Я прошел через основные уроки по школам W3 для HTML и CSS текста и стилей ссылок, и я не могу найти ничего, что работает так, как я этого хочу. Я хочу использовать стандартный текст и для каждого слова «затемнение», когда пользователь нажимает на него, и конечным результатом является то, что пользователь просто может видеть нечерненные слова на экране.

Любые идеи? TIA, я очень новичок в кодировании.

источник

2017-02-17 Aisling

Я думаю, что некоторые люди могут вам помочь, если вы предоставите некоторые html и css, над которыми вы работали. –

@ Александр Тяпков Как и HTML и CSS в моем ответе? :) –

@ KyleMartin, вы знаете, шансы, что человек узнает что-то, выше, если она сделает это сама. Даже если это что-то маленькое и простое в использовании! ;-) –

примера:

<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/

Конечно, мой пример не имеет механизма для ун-Пукто затемнение, но это так же просто, как проверка цвет фона пролета, а если он черный, сделайте его не черным.

Я думаю, что это делает то, что вы ищете. Если нет, сообщите мне, и я могу это улучшить. Это немного уродливо, но он достигает цели.

Что делает этот код:

Что мы делаем, мы помещаем все слова в свои  с. Нам нужно это, чтобы каждое слово было его собственной интерактивной «единицей». Затем мы создаем наш обработчик Javascript, который прослушивает любой щелчок на одном из . Когда кто-то нажимает на один из  s, мы меняем цвет фона этого  на черный. Я просто добавил CSS для хорошей оценки. Кстати, тег CSS <style> должен идти в <head> вашего файла HTML (или во внешней таблице стилей).

Проблема с этим кодом:

Очевидно, есть один простой вопрос с this-- вы не можете «» снятия выделения слова. Однако это так же просто, как добавление оператора if в обработчик кликов, который проверяет цвет фона , который был нажат. Если у  нет фона, сделайте его черным. Если  имеет черный фон, удалите фон. Я позволю тебе понять, что часть для себя. :) (хороший опыт обучения)

источник

2017-02-17 03:49:40

спасибо, я не ожидал ответа так быстро, и меньше всего того, что имеет смысл для меня LOL. Я даже не думал о функции .Я дам этому вихрь. Еще раз спасибо за то, что нашли время! – Aisling

Без проблем, я рад помочь! Если я могу оказать какую-либо дальнейшую помощь, просто дайте мне знать. Я вижу, что вы новичок в Stack Overflow, так что вы знаете, это общепринятая практика, чтобы отметить ответ, который сработал для вас как принятый ответ. Очевидно, вы не * имеете *, чтобы это сделать, но было бы признательно :) –

Текст затемнения для арт-проекта

ответ

Смежные вопросы