Ruslan333
Новичок
Дата регистрации:
29.08.2014 21:57:20
Сообщений: 4
Не очень понял, что за миниатюра, но :
1) Для того, чтоб при наведения курсора картинка изменялась,
есть функция hover.
h1 {
color : blue;
background: red;
}
h1: hover {
color : red;
background: blue;
}
Если ты имеешь в виду фотку , то почитай в гугле про сss спрайты.
tikkiwiki
Модератор
Дата регистрации:
15.11.2013 15:36:59
Сообщений: 194
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test title image</title> <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /></head><body> <p> <a href="java script:;" title="Image"> <span>Это подсказка, как и было задумано.</span> <img src="images/test-img.jpg" alt="Это картинка, при наведении на которую появляется красивая подсказка. Сделано без JS." /> </a> </p></body></html>* {padding: 0; margin: 0}body {padding: 40px; font: 24px Arial, Tahoma, Verdana, sans-serif}p {text-align: center}img {border: 0}a {position: relative; display: inline-block; width: 226px; color: lightblue; text-decoration: none; cursor: default}a:hover {background: transparent}a span {display: none; width: 200px; position: absolute; top: 50%; left: 50%}a:hover span {display: block; border: 3px solid #e5e5e5; opacity: 0.9; background: #5d5d5d; filter: alpha(opacity=90)}Если использовать конструкцию:
<a><img /></a>, то можно и без js
Lestreyd
Новичок
Дата регистрации:
21.03.2015 19:15:49
Сообщений: 4
Хоть часть полезного кода, спасибо.
atlanta
Новичок
Дата регистрации:
01.05.2015 04:53:39
Сообщений: 18
https://jsfiddle.net/txoffu0x/ вот так ! правда поздно ответил
