Смена текста при обновлении страницы (текст на картинке с заданными параметрами)

@Skvoznyak · Регистрация: 16.03.2018

Студворк — интернет-сервис помощи студентам

У меня есть несколько рабочих скриптов. Но нее знаю как их объединить.
Задача стоит такая. Есть фоновое изображение, поверх него текст. Текст в несколько строк с заданным цветом, стилем шрифта и размерами.
Надо что бы вся эта "композиция" была кликабельна (вела на нужную страницу).
А теперь самое интересное - текст должен меняться при обновлении страницы.
Вот что у меня есть (по отдельности все работает)
текст на картинке (и текст, и картинка – ссылка, текст с заданными параметрами):

HTML5
1
2
3
4
5
6
<div style="position: relative;"><a href="http://www.vniiprh.ru/glocsariy"><img alt="Глоссарий" border="0" height="109" src="http://www.vniiprh.ru/sites/default/files/file/glossariy/00.jpg" width="260" /></a>
    <a href="http://www.vniiprh.ru/glocsariy">
<div style="font-family: Georgia; font-size: 80%; left: 20px; position: absolute; top: 15px; width: 260px; text-indent: 0px;"><span style="font-size:18px;"><span style="color:#ffffff;"><span style="font-size:20px;"><strong>Авитаминоз у рыб</strong></span> -</span></span></div>
    <div style="font-family: Georgia; font-size: 80%; left: 20px; position: absolute; top: 40px; width: 260px;"><span style="font-size:18px;"><span style="color:#ffffff;">недостаток витаминов</span></span></div>
    <div style="font-family: Georgia; font-size: 80%; left: 20px; position: absolute; top: 65px; width: 260px;"><span style="font-size:18px;"><span style="color:#ffffff;">в организме рыб...</span></span></div></a>
</div>

Ява скрипт смены текста при обновлении:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<SCRIPT language="javascript">
var howMany = 10 
var quote = new Array(howMany+1) 
quote[0]="Текст 0" 
quote[1]="Текст 1" 
quote[2]="Текст 2" 
quote[3]="Текст 3" 
quote[4]="Текст 4" 
quote[5]="Текст 5" 
quote[6]="Текст 6" 
quote[7]="Текст 7" 
quote[8]="Текст 8" 
quote[9]="Текст 9" 
quote[10]="Текст 10"
 
function rndnumber(){ 
var randscript = -1 
while (randscript < 0 || randscript > howMany || isNaN(randscript)){ 
randscript = parseInt(Math.random()*(howMany+1)) 
} 
return randscript 
} 
quo = rndnumber() 
quox = quote[quo] 
document.write(quox)
</SCRIPT>

Как их объединить не знаю

Qwerty_Wasd · 16.03.2018, 19:35

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

HTML5
1
2
<div style="position: relative;"><a href="http://www.vniiprh.ru/glocsariy"><img alt="Глоссарий" border="0" height="109" src="http://www.vniiprh.ru/sites/default/files/file/glossariy/00.jpg" width="260"/>
    <div id="text" style="font-family:Georgia;font-size:20px;color:#ffffff;left:20px;position:absolute;top:15px;width:260px;text-indent:0px;">Авитаминоз у рыб - недостаток витаминов в организме рыб</div></a></div>

JavaScript
1
window.onload=function(){var quote=["Текст 0","Текст 1","Текст 2","Текст 3","Текст 4","Текст 5","Текст 6","Текст 7","Текст 8","Текст 9","Текст 10"]; text.innerText=quote[Math.floor(Math.random() * quote.length)]}

@Skvoznyak · 17.03.2018, 20:13 **[ТС]**

Да, все верно. Нужно то бы менялся только текст, а фон оставался прежним.
Я правильно понимаю что в этом коде все параметры текста задаются в HTML коде, а в яве прописываются сами варианты сменного текста?
Просто у меня стоит задача, что бы текст заголовка был жирным (до дефиса), а остальной текст - нормальный.

Qwerty_Wasd · 17.03.2018, 23:13

Skvoznyak,

Сообщение от Skvoznyak

а в яве

АААААААААААААА - аж передернуло. Нет такого ЯП. Есть язык сценариев Javascript(Джаваскрипт) и язык программирования Java(Джава). Ява это индонезийский остров, еще сигареты были с таким названием и мотик.
Далее.. "параметры" - стиль текста можно задавать и в файле стилей.

Сообщение от Skvoznyak

Просто у меня стоит задача, что бы текст заголовка был жирным (до дефиса), а остальной текст - нормальный.

Песочница

HTML5
1
2
<div style="position: relative;"><a href="http://www.vniiprh.ru/glocsariy"><img alt="Глоссарий" border="0" height="109" src="http://www.vniiprh.ru/sites/default/files/file/glossariy/00.jpg" width="300"/>
    <div style="font-family:Georgia;font-size:20px;color:#ffffff;left:20px;position:absolute;top:15px;width:260px;text-indent:0px;"><span id="boldText" style="font-size:22px;font-weight:bolder;">Авитаминоз у рыб</span> - <span id="normText">недостаток витаминов в организме рыб</span></div></a></div>

JavaScript
1
window.onload=function(){var bt=["Авитаминоз у рыб","Авитаминоз у собак","Авитаминоз у кошек","Авитаминоз у свиней","Авитаминоз у коров","Авитаминоз у мышей","Авитаминоз у птиц","Авитаминоз у человека","Авитаминоз у ?","Авитаминоз у ???","Авитаминоз у ?????"], nt=["недостаток витаминов в организме рыб","недостаток витаминов в организме собак","недостаток витаминов в организме кошек","недостаток витаминов в организме свиней","недостаток витаминов в организме коров","недостаток витаминов в организме мышей","недостаток витаминов в организме птиц","недостаток витаминов в организме человека","недостаток витаминов в организме ?","недостаток витаминов в организме ???","недостаток витаминов в организме ?????"],rand=Math.floor(Math.random() * bt.length); boldText.innerText=bt[rand];normText.innerText=nt[rand]}

Дальше, я думаю, разберетесь сами.

@Skvoznyak · 18.03.2018, 16:12 **[ТС]**

Прости пожалуйста. Никого не хотела обидеть и вызывать нервный тик тем более. Искреннее "Спасибо!", что помогаешь.

Qwerty_Wasd · 18.03.2018, 16:20

Skvoznyak,

Не по теме:

да все нормально - это я без зла. Просто куча людей на форуме так "путает". Не знаю, что на меня нашло? В общем не думайте дурного. Удачи Вам :)

@Skvoznyak · 19.03.2018, 11:19 **[ТС]**

Вставила код все круто, все работает. Только после того как я занесла более 40 переменных, код отказался работать

Возможно это из-за того что слишком большой массив информации?

Qwerty_Wasd · 22.03.2018, 18:00

Skvoznyak, прошу прощения - был занят. Вы уже сами справились? Или трабла актуальна?

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .

@Skvoznyak 0 / 0 / 0 Регистрация: 16.03.2018 Сообщений: 5
	17.03.2018, 20:13 [ТС]
	Да, все верно. Нужно то бы менялся только текст, а фон оставался прежним. Я правильно понимаю что в этом коде все параметры текста задаются в HTML коде, а в яве прописываются сами варианты сменного текста? Просто у меня стоит задача, что бы текст заголовка был жирным (до дефиса), а остальной текст - нормальный. 0

@Skvoznyak 0 / 0 / 0 Регистрация: 16.03.2018 Сообщений: 5
	18.03.2018, 16:12 [ТС]
	Прости пожалуйста. Никого не хотела обидеть и вызывать нервный тик тем более. Искреннее "Спасибо!", что помогаешь. 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	18.03.2018, 16:20
	Skvoznyak, Не по теме: да все нормально - это я без зла. Просто куча людей на форуме так "путает". Не знаю, что на меня нашло? В общем не думайте дурного. Удачи Вам :) 0

@Skvoznyak 0 / 0 / 0 Регистрация: 16.03.2018 Сообщений: 5
	19.03.2018, 11:19 [ТС]
	Вставила код все круто, все работает. Только после того как я занесла более 40 переменных, код отказался работать Возможно это из-за того что слишком большой массив информации? 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	22.03.2018, 18:00
	Skvoznyak, прошу прощения - был занят. Вы уже сами справились? Или трабла актуальна? 0

Смена текста при обновлении страницы (текст на картинке с заданными параметрами)

Решение