Вывод случайного изображения при помощи Javascript


Делая один из сайтов на CMS WodrPress, мне потребовался вывод случайного изображения. Использовать плагины я не хотел, потому что они очень грузят базу данных. Глаз пал на старый-добрый Javascript.


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

HTML код выглядит так:
<script type="text/javascript">
function r_out01(){
var ip=[];
ip[0]='<b>Кабы не было зимы</b>';
ip[1]='<s>В городах и селах</s>';
ip[2]='<i>Никогда бы не знали мы</i>';
ip[3]='<img src="//site.com/photo.jpg" alt="Этих дне весёлых"/>';
ip[4]='<a href="//ded-moroz.org">Не спешил бы Дед Мороз</a>';
ip[5]='<u><h2>К нам через ухабы</h2></u>';
ip[6]='<i><h3>Кабы, кабы, кабы</h3></i>';
document.write(a[Math.floor(Math.random()*a.length)])};
</script>

Кстати, можно организовать этот javascript в отдельный файл, например под названием,  images_out.js, тогда нужно заменить код выше, следующим:
<script src='//site.com/js/images_out.js'  type="text/javascript">

2. Теперь html-код который отвечает за вывод указанного нами кода выше.

HTML код выглядит так:
<script type="text/javascript">r_out01()</script>

Вот и всё. Это маленькая функция поможет вывести не только изображения, но и, например, цитаты или какие-то текстовые ссылки. У меня так реализован вывод баннеров в вверху сайта (в т.н. "шапке"). Думаю, Вы  найдете применение.

На этом всё. Жду ваши вопросы ниже в комментариях. До встречи ;)

Ах да, друзья, чуть не забыл! Я недавно завел канал в Telegram, где делюсь своими наблюдениями и мнением о важном. Не блогерством единым живем. Буду рад каждому ;)



Комментарии

  1. Есть старый-добрый жабаскрипт для смены символа при наведении мышом? Перечень символов нужно предопределить кодами UTF-8, в каком-нибудь списке.

    ОтветитьУдалить
    Ответы
    1. А как символы меняться должны? По очереди (по списку) или рандомно?

      Или символ "?" на символ "*", а "%" на "-"?

      Удалить

Отправить комментарий

Популярное

Установка и настройка модема Huawei HG532e (+ мини-обзор)

Виджет профиля Instagram на ваш сайт/блог

14 лучших шаблонов для Blogger в 2015 году [выпуск 2]