Как сделать случайное фото html из списка

Случайная картинка

Каждый раз при загрузки или обновлении страницы появляется «случайная» картинка.

В нашем Примере каждый раз при загрузке страницы выводится разная картинка.

Картинка выбирается из массива с использованием функции случайного числа — Math.random() .

В этом Примере (im_1.gif, im_2.gif и im_3.gif) — три, заранее подготовленные, картинки.

pic=new Array( ‘ ‘, ‘ ‘, ‘ ‘ ); n=Math.floor,Math.random() * 3); document.write(pic[n]);

Изменение размера картинки при наведении на неё мышки

Наведи мышь на картинку

Ниже показаны Пример 1 и Пример 2, которые используют атрибут событий мыши:
1) onmouseout (указатель мыши за пределами элемента)
2) onmousemove (указатель мыши над элементом)

 function resize(img, x, y) onmouseout="resize(this, 83, 117)" onmouseover="resize(this, 164, 234)">

2. Скрипт оформлен в виде 2-х функций

 function rostpic(a) < a.style.height = "234px"; a.style.width = "164px"; >function normal(a) img.bb onmousemove = "rostpic(this)"onmouseout = "normal(this)" src = "myImage.jpg" alt = "">

Выводим случайную картинку при обновлении страницы

Сегодня поговорим как вывести случайную картинку или файл из группы одинаковых элементов.

На примере: на одном из последних сайтов, который делался клиенту, было необходимо в шапке выводить при обновлении страницы одну из 3 шапок случайным образом.

Можно было бы использовать вот такую штуку Ротатор баннеров при помощи небольшого кода, но у нас одинаковые элементы, которые можно спокойно переименовать. В связи с этим я использовал стандартную функцию php echo(rand(1,5)); .

По итогу достаточно было вставить такое:

Используется стандартный тег HTML для изображений, а вместо цифр в названии изображений стоит функция echo(rand(1,5)); . Т.е. у меня имеется 5 картинок с названиями ferrari_1.jpg, ferrari_2.jpg, ferrari_3.jpg и т.д. Именно в этих названиях я и подменил цифру в функцию.

Смотрите пример ниже (пообновляйте страницу пару раз, CTRL+R).

Таким образом можно случайно выводить изображение не только в шапке сайта, но и в сайдбаре, либо статьях. При этом не только изображения, но и различные файлы. Просто меняем в функции echo(rand(1,5)); цифру 5 на нужное количество файлов и радуемся.

• Как заставить работать PHP-код в виджете WordPress
• WP PHP widget — добавляем произвольный код в сайдбар

На том же сайте premierdevelopment.ru можно в ротацию поставить примеры квартиры в Климовске и других городах, чтобы пользователи больше взаимодействовали с сайтом.

Привет. Я автор этого блога и ридера вебмастеров/SEO-специалистов WMSN.ru Можешь оставить свой вопрос в комментариях к статье или предложить идею для новой статьи. Не стесняйся.

Загрузка случайной картинки

Загрузка случайной картинки из папки
здравствуйте. Имеется папка, в которой хранятся картинки с именами по порядку 1.jpg 2.jpg и так.

Загрузка случайной картинки в Image
На рабочем листе разместить два окна для рисунков (объекты ”рисунок”), две кнопки и две надписи.

Загрузка картинки (имя картинки заносится в базу, но на сервер она не закачивается)
Добрый вечер! Друзья выручайте. Набросал код (кое что взял с Интернета) для загрузки картинок.

Загрузка картинки на сервер по ссылке, отправка, удаление картинки
Какие есть методы, чтобы: а) Загрузить на сервер в папку ../temp картинку по ссылке (например.

Регистрация: 23.05.2013
Сообщений: 129

для этого html и css не подходят, нужен js.

Что-то типа этого.

1 2 3 4 5 6 7 8 9 10 11 12 13

function getrandom() { var min_random = 0; var max_random = 2; max_random++; var range = max_random - min_random; var n=Math.floor(Math.random()*range) + min_random; return n; } function randomfotos() { var myArray= ['photo1', 'photo2', 'photo3']; document.images.foto1.src="photos/randomfotos/"+myArray[getrandom()]+".jpg"; }

Если нужно больше 3х фоток, то меняем max_random на нужное значение минус 1, и соответственно добавляем имена этих фоток в массив myArray

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Вывод случайной картинки
Нужно по нажатии на кнопку вывести 1 случайную картинку из 52 в picturebox.

Вывод случайной картинки
Есть картинка,после каждого обновления формы — меняется картинка,сохраненная по адресу D:/image.gif.

Выбор случайной картинки
Здравствуйте! Надо сделать так, чтобы из списка с названиями картинок, которые есть на форме.

Вывод случайной картинки из папки
Есть папка с картинками и несколько форм Image. Как сделать что бы по нажатию кнопки в каждую из.

Использование изображений Unsplash.com на страницах сайта

Unplash.com — очень известный сайт, на котором вы найдете изображения на самую разную тематику, причем бесплатно или за условную плату в виде предложения поделиться этим фото в соцсетях.

Как правило, изображения с unsplash.com скачиваются на локальный компьютер по ссылке типа https://unsplash.com/photos/Y6I4VvyN_sA , но при использовании такой ссылки в качестве атрибута src в теге img , вы увидите значок незагруженной картинки наподобие такого:

Варианты использования изображений с Unsplash.com

На этом ресурсе вы можете найти вполне конкретное изображение по его id или использовать несколько вариантов загрузки случайного фото. Начнем с последних и рассмотрим примеры.

Случайное фото от конкретного пользователя

Чтобы выбрать случайную фотографию определенного автора, необходимо использовать такой формат ссылки:

Фото конкретного автора
https : //source.unsplash.com/user/
или с указанием размеров
https : //source.unsplash.com/user//widthxheight

Например, такой код:

Случайное фото автора aaronburden

приведет к загрузке случайного изображения автора aaronburden со случайными размерами:

Вы можете точно указывать размер фото, причем, желательно знать, какой именно размер фото у этого автора. Например,

Пример случайного фото одного автора с unsplash.com

Если вы неверно указали автора или размер картинки, то вместо изображения увидите стандартное фотосообщение Unsplash:

Случайное фото от автора с отметкой «like»

На Unsplash.com можно поставить отметку Like в виде сердечка любому понравившемуся фото. Поэтому вы можете загрузить только те фото автора, которые имеют такую отметку. Они будут подобраны также в случайном порядке из понравившихся людям фотографий этого пользователя. Синтаксис:

Случайное изображение автора с отметками
https : //source.unsplash.com/user//likes

Вариант отображения (поменяется при обновлении страницы):

Случайное фото из раздела Collections

Вы можете загружать случайное изображение из раздела Collections на Unsplash.com. Для этого вам необходимо кликнуть на соответствующей ссылке в меню на сайте.

Выбирайте подходящую по названию или по картинкам коллекцию и щелкайте по ней.

В адресной строке вы найдете id — номер данной коллекции, который вам необходимо вставить в свой код в таком виде:

https : //source.unsplash.com/collection/
https : //source.unsplash.com/collection//widthxheight

Фото из коллекции будет меняться после перезагрузки страницы.

Фото дня/недели

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

https : //source.unsplash.com/daily

Получаем фото недели:

Фото недели
https : //source.unsplash.com/weekly

Смотрим на результат:

Фото дня одного автора

Фото дня одного автора
https : //source.unsplash.com/user//daily

Само фото автора:

Случайное фото по поисковым словам

Фото недели из раздела People

Вы указываете поисковое слово после знака вопроса:

Пример фото недели из раздела People на unsplash.com

Случайное фото по ключевым словам

Фото по ключевым словам
https : //source.unsplash.com/featured/?,
https : //source.unsplash.com/?nature,water
или с размерами
https : //source.unsplash.com/1600×900/?nature,water

Смотрим на фото:

Загрузка конкретного фото по id

Если вам нужно конкретное фото, которое вы нашли, например, по такой ссылке:

Ссылка на страницу с фото на unsplash.com
https : //unsplash.com/photos/MxjSV_INz_k

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

Конкретное фото с unsplash.com
https : //source.unsplash.com/photo_id/widthxheight

При обновлении страницы вы получите отображение одной и той же картинки, т.к. id — это ее уникальный идентификатор.

Достаточно часто именно этот вариант встраивания фото с unsplash.com используется при программировании на JavaScript, особенно, если необходимо отследить процесс или прогресс загрузки фото с внешнего источника. В статье «Пример использования метода jQuery $.post для AJAX-запросов» был использован массив с id различных фото из 5 категорий для демонстрации работы связки JavaScript + PHP при отправке AJAX-запросов.

Лицензия Unsplash.com

Все фото, которые пользователи добавляют на ресурс Unsplash.com, могут быть использованы как в коммерческих, так и в некоммерческих целях, что отображено на странице Лицензия. Вы можете редактировать эти фото и вставлять их на страницы сайта.
Имейте в виду, что лицензия Unsplash не распространяется на использование:

• Любых логотипов, торговых марок или брендов, которые есть на фото;
• Фотографий людей, которых можно узнать на фото — стоит спросить их разрешения на публикацию;
• Произведений искусства, которые изображены на фотографиях.

Если вам нужно опубликовать что-либо из этого списка, нужно получить разрешение правообладателя — связаться с владельцем бренда, всеми людьми с фото или автором картины.

Использование фото с unsplash.com на codepen.io

Codepen.io — это ресурс, на котором вы можете выкладывать свой код на HTML, CSS и JS, а также использовать препроцессоры типа Pug, SASS, TypeScript для написания кода. При создании любого pen-а — примера с кодом — вы можете нажать на кнопку Assets внизу слева и воспользоваться изображениями с unsplash.com:

Бесплатное использование этого сервиса предполагает, что вы можете вставлять изображения с помощью тега в малом и полном размере (это очень большие изображения, как правило) или в качестве фона в CSS.

Код всех приведенных примеров вы можете посмотреть на codepen.io:

Для разработчиков есть раздел Unsplash API, в котором вы можете бесплатно зарегистрироваться и использовать все многообразие фото с этого ресурса для своих целей в коде на JavaScript, PHP и Ruby.