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

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

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

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

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

 

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


Талисман Сочи-2014

Обновить страницу

 

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

<script>
   pic=new Array(
   '<img src="image/im_1.gif" width=200 alt="">',
   '<img src="image/im_2.gif" width=200 alt="">',
   '<img src="image/im_3.gif" width=200 alt="">'
   );
   n=Math.floor,Math.random() * 3);
   document.write(pic[n]);
<script>

 

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

талисман

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

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

1 
<script>
function resize(img, x, y) {
    img.width = x;
    img.height = y;
   }
</script>

<img src="myImage.jpg" width=83 height=117
onmouseout="resize(this, 83, 117)" 
onmouseover="resize(this, 164, 234)">

2. Скрипт оформлен в виде 2-х функций 
<script>
function rostpic(a) {
    a.style.height = "234px";
    a.style.width = "164px";  
    }
    function normal(a) {
    a.style.height = "117px";
    a.style.width = "83px";  
    }
</script>

<style> 
    img.bb {
    width : 83px; 
    height : 117px;
    cursor: pointer; 
    }
</style>

<img class="bb" onmousemove = "rostpic(this)"onmouseout = "normal(this)" src = "myImage.jpg" alt = "">