Jump to content
  • 0

как сделать кнопку, при нажатии на которую окрашивался бы в определенный цвет кусок текста?

amunejia

Asked by amunejia,

 Share

Question

amunejia Explorer

amunejia

Posted
Posted

Вопрос отражен в заглавии. Пусть дан текст "мама мыла раму".

Нужно сделать кнопку, после нажатия которой текст бы становился, например, красным.

Опишите, пожалуйста, более подробно, если это возможно.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
amunejia Explorer

amunejia

Posted
  • Author
Posted

Как-нибудь так, мб http://jsfiddle.net/Softlink/eUVwk/? :)

да, именно так, спасибо :)

но как мне теперь вогнать это все в тело html документа?

попробовал скопировать прямо так, но ничего не работает

Как-нибудь так, мб http://jsfiddle.net/Softlink/eUVwk/? :)

вернее сказать, в мой javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Lab8-Javascript</title>

<link rel="stylesheet" type="text/css" href="lab7.css">

<SCRIPT language="javascript">

<!--

document.write("<p><b>XXX</b></p>")

function change(pic3, pic2)

{

var pi3=document.getElementById(pic3);

var pi2=document.getElementById(pic2);

var zind=pic3.style.zIndex;

pic3.style.zIndex=pic2.style.zIndex;

pic2.style.zIndex=zind;

}

-->

</SCRIPT>

<style type="text/css">

<!--

.style_p{margin-left: 20%;margin-right: 20%;line-height: 150%;text-indent:50px;}

.style1{ bgcolor:#F3D3D3;font-size:12pt;width:900px;margin-left:auto;margin-right:auto;}

.style2{display: inline;}

.style3{color:green;font-size:30pt;}

.style4{color:black;font-size:20pt;}

h1 {text-align:center;color:green;font-size:20pt;}

-->

</style>

</head>

<body background="001.jpg">

<table align="right"><tr>

<td><FORM name="form1">

<INPUT type="button" value="Window" onclick="alert('Google Crome');">

</FORM></td>

<td><FORM name="form2">

<INPUT type="button" value="Navigator"

onclick="alert('Браузер: ' +navigator.appName+' Версия: ' +navigator.appVersion);">

</FORM></td>

<td><FORM name="form3">

<INPUT type="button" value="Location" onclick="window.alert('Полный URL: ' +location.href);">

</FORM></td>

<td><FORM name="form4">

<INPUT type="button" value="Screen"

onclick="window.alert('Глубина цвета: '+ screen.colorDepth+ '<-->Ширина экрана: '+screen.width+ '<-->Высота экрана: '+screen.height);">

</FORM></td></tr>

</table>

<br><br><br><br><br>

<h1><i>Течения мирового океана</i></h1>

<table border="1" cellSpacing="0" class="style1" bgcolor="#D3D3D3" bordercolor="87CEFA"><tr><td class="style_p" >

<p onmouseover=" this.style.color='green';

this.style.fontSize='x-large';"

onmouseout=" this.style.color='black';

this.style.fontSize='medium';">

Летом 1881 года в Северном Ледовитом океане, к северо-востоку от Новосибирских островов,

разыгралась трагедия: судно американской полярной экспедиции «Жанетта» было раздавлено льдами и затонуло. Три года спустя, в 1884 году,

у юго-западных берегов Гренландии было найдено 58 различных предметов, принадлежащих этой экспедиции.</p>

<p onmouseover=" this.style.color='red';

this.style.fontSize='x-large';"

onmouseout=" this.style.color='black';

this.style.fontSize='medium';">

Плоды, растущие на Антильских островах, иногда обнаруживаются у берегов Шотландии и даже у берегов Шпицбергена. Пемзу, выброшенную при

извержении вулкана Кракатау в Зондском проливе в 1883 году, моряки находили через год у берегов Мадагаскара и южной оконечности Африки.</td></tr></table></p>

<p class="style_p" onmouseover=" this.style.color='blue';

this.style.fontSize='x-large';"

onmouseout=" this.style.color='black';

this.style.fontSize='medium';">

<font size="10">Эти</font> <span style="font-size:30px">примеры</span> говорят о передвижении воды в океанах от Новосибирских островов к южной оконечности Гренландии, от Антильских островов к Шпицбергену,

от Зондского пролива к Мадагаскару. Такие перемещения воды в океанах на большие расстояния называются морскими течениями.</p>

<h1><i>Течения Атлантического океана</i></h1>

<div id="tablecenter">

<table border="1" cellSpacing="2" cellPadding="10" bordercolor="A52A2A"

onmouseover=" this.style.fontSize='x-large';"

onmouseout=" this.style.fontSize='medium';">

<tr bgcolor="#BBBBBB"><th align=center onmouseover="this.style.color='blue';"><p><i>Название</i></p></th>

<th align=center><p><i>Скорость (км/сутки</i></p></th>

<th align=center><p><i>Температура воды</i></p></th>

<th align=center><p><i>Где протекает</i></p></th></tr>

<tr><td align=center><p>Северное пассатное</p></td>

<td align=center><p>20-45</p></td>

<td align=center><p>Тёплое</p></td>

<td align=center><p>К северу от экватора, от Африки к Антильским островам</p></td></tr>

<tr bgcolor="#BBBBBB"><td align=center><p>Гольфстрим</p></td>

<td align=center><p>25-60</p></td>

<td align=center><p>Тёплое</p></td>

<td align=center><p>От берегов Америки на северо-восток</p></td></tr>

<tr><td align=center><p>Северо-Атлантическое</p></td>

<td align=center><p>20-45</p></td>

<td align=center><p>Тёплое</p></td25-60>

<td align=center><p>Продолжение Гольфстрима к северо-западу Европы</p></td></tr>

<tr bgcolor="#BBBBBB"><td align=center><p>Лабрадорское</p></td>

<td align=center><p>15-60</p></td>

<td align=center><p>Холодное</p></td>

<td align=center><p>Вдоль северо-восточного берега Северной Америки</p></td></tr>

</table></div>

<br>

<div> <img style="position:absolute; top:1000px; left: 30px; z-index:0" src="2.jpg" name="pic1"></div>

<div> <img style="position:absolute; top:1000px; left:500px; z-index:1" src="10.jpg" name="pic3"></div>

<div> <img style="position:absolute; top:1000px; left:400px; z-index:2" src="6.jpg" name="pic2"></div>

<table align="left">

<tr><FORM name="form5">

<input type="button" value="Hide" name="b3" onclick="pic1.style.visibility='hidden'">

</FORM></tr>

<tr><FORM name="form6">

<input type="button" value="Show" name="b3" onclick="pic1.style.visibility='visible'">

</FORM></tr>

<tr><FORM name="form7">

<INPUT type="button" value="Change Location" onclick="change(pic3, pic2)">

</FORM></tr>

</table>

<FORM name="formk">

<INPUT type="button" value="Close Window" onclick="window.close();">

</FORM>

мама мыла раму

</body>

</html>

——

я выделил то, что предполагается окрасить в красный цвет; извините за громоздкость :)

не совсем понимаю, как действовать теперь, имея ваш способ

Link to comment
Share on other sites
  • 0
amunejia Explorer

amunejia

Posted
  • Author
Posted

http://jsfiddle.net/Softlink/ZcmnU/1/ так? На кнопке Close window. Ваши скрипты не копировал.

p.s. вообще, вам бы все переверстать нормально, верстка, мягко говоря, страшненькая.

да, все именно так, спасибо вам огромное;

при первой возможности, конечно, все переверстаю.

и хотел бы у вас спросить последнее, если можно:

теперь вместо onclick="Close Window" перед классом redtext, что мне нужно вбить?

так как она само собой закрывает окно вместо окрашивания текста

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Алеся
      Изменение цвета шрифта блока меню при hover
      By Алеся
      Подскажите, пожалуйста, что прописать в коде для изменения цвета шрифта меню при наведении на БЛОК (не на ссылку) с черного на белый при hover. На скрине цвет меняется при наведении на ссылку. И как можно меню отодвинуть влево? Заранее спасибо!  
      <div class="three navigation items">       <nav> <ul>   <li> <div class="navigation__item"></div> <a href="#">Hot themes</a>   </li>   <li> <div class="navigation__item"></div> <a href="#">EURO-2016 Playoffs</a>   </li>   <li>     <div class="navigation__item"></div>     <a href="#">El'Classico</a>   </li> </ul>       </nav>     </div>   .navigation {
          background-color: rgba(31, 30, 30, 0.438);
          width: 900px;
          height: 30px;  
      }
      .navigation li {
          display: inline-block;
          padding: 5px 15px;
      &:hover {
          content: "";
          background-color: rgb(36, 36, 36);
          cursor: pointer;
      }
      }
      a {
          color: black;
          text-decoration: none;
          font-family: sans-serif;
      &:hover {
        content: "";
        color: white;
       }
      }

    • Shoker2
      Как передвинуть кнопку вправо в таблице HTML
      By Shoker2
      Вот мой код:
      <table class="down_table_main" bgcolor="#F7F7F7">     <tr>         <td><button class="down_button_main">Подробнее</button></td>     </tr> </table> Почему-то когда я использую align, ничего не происходит. А в другом коде align работает.
      <table border="0" bgcolor="white" width="800px">     <tr align="center">         <td>             <br>             <img src="https://ru-minecraft.ru/uploads/posts/2018-03/medium/1522109759_cosmicnpcs.jpg" alt="">             <h3>Мод <b>CosmicNPCs</b> - создайте второго игрока и запишите, что он будет делать.</h3>             <p>Интересный мод который позволит снимать ролики без участия других игроков, вы сможете записать свои движения и действия, а потом воспроизвести с произвольным скином, таким образом для записи каких то прикольных моментов вам не нужен второй игрок.</p>         </td>     </tr> </table>  
    • Antoshka007
      Есть ли такой сервис?
      By Antoshka007
      Всем привет!

      Подскажите, есть ли такой сервис, который генерирует названия для цветов? Например, даешь ему шестнадцатеричный код цвета, а он тебе то, как его можно обозвать по-человечески.

       
    • FRUTALITY
      Инверсия цвета части текста (в зависимости от фона)
      By FRUTALITY
      Доброго времени суток.
       
      Пытаюсь добиться эффекта, как на изображении

      Картинка взята с поста на Хабре, там реализация меню с плавным переходом от одного пункта к другому.
       
      Мне нужно нечто попроще: есть блок фискированной ширины (назову "родитель"), внутри него еще один блок (ширина любая, не превышающая родительскую — "потомок"). Внутри текст. Та часть текста, что не выходит за границы потомка - одним цветом. А та часть, что выходит - должна быть другим цветом.
       
       
      Как можно добиться этого эффекта? JS можно использовать. Получается что-то вроде прогресс-бара с надписью внутри.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept