WGN,
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
img{
height: 150px;
}
</style>
<script type="text/javascript">
var quotes = {
maxpayne: {
image: "http://images.gamersyde.com/thumb_image_max_payne_3-19012-1894_0002.jpg",
quote: ["Собирать улики стало поздно ещё пару сотен патронов назад. Я так давно миновал точку невозвращения, что забыл, как она выглядит.", "Я бы засмеялся, если бы помнил, как это делается.", "Если единственный выбор является неправильным, то это скорее не выбор, а судьба.", "Закон ямы. Неважно сколько карабкался наверх-обратно слетишь в один миг.", "В жизни есть вещи, которые ты не выбираешь — это то, как ты себя чувствуешь.", "Боязнь смерти заставляет нас контролировать эмоции — но без страсти Вы уже мертвы.", "Чем быстрее бежишь, тем больше кажется, что тебя в самом деле преследуют.", "Твои права зачитают тебе на похоронах.", "Намек был таким же туманным и неопределенным, как пуля в сердце.", "Дуло ее пистолета смотрело мне в лицо. Я ответил любезностью на любезность.",
"Положение быстро менялось от плохого к худшему.", "Рано или поздно обнаруживаешь, что леди удача — обыкновенная проститутка, а у тебя закончились наличные.", "Когда люди выходят из себя, они начинают совершать ошибки. Это я знал по собственному опыту.", "Как только я вошел, он завял, как двойка перед флеш-роялем.", "Иногда надо упасть, чтобы потом встать.", "Нет ничего, кроме пути вперед.", "Меняются твои взгляды, меняешься и ты.", "Спастись — это не для меня. Хэппи-энда не будет.", "Я чувствовал себя мёртвым. Я был мертв внутри."]
},
test: {
image: "http://grammatiki.net/wp-content/uploads/2012/01/test.gif.png",
quote: ["Собирать улики стало поздно ещё пару сотен патронов назад. Я так давно миновал точку невозвращения, что забыл, как она выглядит.", "Я бы засмеялся, если бы помнил, как это делается.", "Если единственный выбор является неправильным, то это скорее не выбор, а судьба.", "Закон ямы. Неважно сколько карабкался наверх-обратно слетишь в один миг.", "В жизни есть вещи, которые ты не выбираешь — это то, как ты себя чувствуешь.", "Боязнь смерти заставляет нас контролировать эмоции — но без страсти Вы уже мертвы.", "Чем быстрее бежишь, тем больше кажется, что тебя в самом деле преследуют.", "Твои права зачитают тебе на похоронах.", "Намек был таким же туманным и неопределенным, как пуля в сердце.", "Дуло ее пистолета смотрело мне в лицо. Я ответил любезностью на любезность.",
"Положение быстро менялось от плохого к худшему.", "Рано или поздно обнаруживаешь, что леди удача — обыкновенная проститутка, а у тебя закончились наличные.", "Когда люди выходят из себя, они начинают совершать ошибки. Это я знал по собственному опыту.", "Как только я вошел, он завял, как двойка перед флеш-роялем.", "Иногда надо упасть, чтобы потом встать.", "Нет ничего, кроме пути вперед.", "Меняются твои взгляды, меняешься и ты.", "Спастись — это не для меня. Хэппи-энда не будет.", "Я чувствовал себя мёртвым. Я был мертв внутри."]
}
};
function handler(event)
{ event.preventDefault(); //отмена перезагрузки страницы
var keysItem = Object.keys(quotes);// массив всех ключей обьекта quotes
var key = keysItem[keysItem.length * Math.random()|0]; // выбор случайного ключа
var src = quotes[key].image;
var text = quotes[key].quote;//массив цитат
text = text[text.length * Math.random()|0];// выбор случайной цитаты
document.querySelector('#quotes').innerHTML = '<h1>'+key+'</h1><img src="'+src+'" alt=""><p>'+text+'</p>' //вывод на страниицу
}
window.addEventListener('DOMContentLoaded', function() { // после загрузки страницы
document.querySelector('button').addEventListener("click", handler); // поставить на клик по button вызов функции handler
});
</script>
</head>
<body>
<form>
<div>
<p id="quotes"></p>
<button>Следующая цитата</button>
</div>
</form>
</body>
</html>