Сделать свою собственную временную шкалу для веб-сайта

Timeline JS может быть именно тем, что вы ищете. Поскольку это инструмент с открытым исходным кодом, вы можете изменить его в соответствии со своими потребностями.

Я бы сделал много делений, по одному для каждой части (в данном случае года) временной шкалы. Таким образом, будет около 20 элементов div, которые вместе составляют всю белую линию.

CSS будет примерно таким:

.timeline { /*"timeline" is a class name that I made up.*/
    background-color:#ffffff; /* This is white color, change it to the cream color of the timeline.*/
    height: 30px; /*estimation*/
    width: 30px; /*estimation*/
    position:absolute;
}


.timeline:hover {
    background-color:#000000; /* This is black color, change it to the brownish background color.*/
}

Это всего лишь часть CSS. Вам нужно будет расположить каждое деление с полями. Когда код CSS будет готов, у вас будет временная шкала, которая изменит свой цвет для каждого div, на который вы наводите курсор.

Сложнее всего изменить текст, и для этого мы будем использовать javascript. Чтобы код не был слишком длинным (и чтобы мне было легче его писать), я напишу его так, как если бы на временной шкале было всего 2 деления. Как только вы получите то, что я делаю, вы сможете легко покончить с этим.

Итак, прежде всего, добавьте идентификатор в раздел, в котором находится текст, «текст», например. В html добавьте к 2 делениям временной шкалы событие onmouseover, затем функцию. Функции пронумерованы.

<div id="text">Here is some text</div>
<div class="timeline" onmouseover="changeText1()"></div>
<div class="timeline" onmouseover="changeText2()"></div>

Теперь нам нужно написать функции. Мы создадим переменную, которая будет включать в себя весь «текстовый» идентификатор, затем создадим 2 функции (по одной для каждого div) и заставим каждую функцию изменять текст в соответствии с номером функции.

var text_div=document.getElementById("text");
function changeText1()
{
    text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the FIRST part of the timeline.
}
function changeText2()
{
    text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the SECOND part of the timeline.
}

Итак, давайте рассмотрим. CSS заставляет разделение менять цвет при наведении курсора. Кроме того, при наведении курсора на часть временной шкалы запускается функция из кода javascript, которая меняет текст в зависимости от того, на какой раздел был наведен курсор.

Еще одна вещь, которую вы должны заметить: на изображении, которое вы добавили, есть не только один абзац, для каждого абзаца свой код CSS. Код javascript, который я написал, изменит все «текстовое» разделение, сделав его CSS влияющим на весь текст, который вы ввели в javascript (часть «Некоторый текст»). Если вы хотите, чтобы CSS оставался другим, вам следует:

1. сделать для каждого абзаца свой id (в html).

2. затем создайте новую переменную в javascript для каждого идентификатора.

3. а затем добавьте новую строку в каждую функцию, которая изменит внутренний HTML-код нового абзаца отдельно.

Если что-то непонятно, спрашивайте.