Чтобы при наведении на картинку, она менялась, достаточно применить псевдокласс :hover.
Самый простой вариант
<style type="text/css">
.izo {
background: url(http://изо1.jpg) no-repeat 50% 50%;
display: block;
width: 400px;
height: 400px;
}
.izo:hover {
background: url(http://изо2.jpg) no-repeat 50% 50%;
} </style>
<a href="#" class="izo"></a>
Второй вариант, когда при наведении на картинку, она меняется
То же самое можно оформить с помощью прозрачности фона. Только здесь тег a не пустует.
<style type="text/css">
.demoizo {
display: block;
text-align: center;
}
.demoizo:hover, .demoizo:focus, .demoizo:active {
background: url(http://изо2.jpg) no-repeat 50% 50%;
}
.demoizo:hover img, .demoizo:focus img, .demoizo:active img {
background: transparent;
visibility: hidden;
}
</style>
<a href="#" class="demoizo">
<img src="http://изо1.jpg" />
</a>
Третий вариант
<style type="text/css">
.demo {
position:relative;
margin:0 auto;
height: 400px;
width:400px;
display: block;
}
.demo img {
left: 0;
position:absolute;
top: 0;
}
.demo img.raz {opacity:0;filter:alpha(opacity=0);}
.demo:hover img.raz {opacity:1;filter:alpha(opacity=100);}
.demo:hover img.dva, .demo img.dva:hover {opacity:0;filter:alpha(opacity=0);}
</style>
<a class="demo" href="#">
<img class="raz" src="http://изо2.jpg" />
<img class="dva" src="http://изо1.jpg" />
</a>
.demo img {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.demo img.raz {
-moz-transform:scale(0);
-webkit-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
}
.demo:hover img.raz {
-moz-transform:scale(1);
-webkit-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
}
.demo:hover img.dva {
-moz-transform:scale(0);
-webkit-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
}
Пункт 3.2. Или так.
.demo img.raz {
-moz-transform:scale(1,0);
-webkit-transform:scale(1,0);
-o-transform:scale(1,0);
-ms-transform:scale(1,0);
}
.demo:hover img.raz {
-moz-transform:scale(1);
-webkit-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
}
.demo:hover img.dva {
-moz-transform:rotate(360deg) scale(0);
-webkit-transform:rotate(360deg) scale(0);
-o-transform:rotate(360deg) scale(0);
-ms-transform:rotate(360deg) scale(0);
}
.demo { overflow:hidden; }
.demo img.dva, .demo:hover img.raz { margin-top: 0px; }
.demo:hover img.dva { margin-top: 400px; }
.demo img.raz { margin-top: -400px; }
Пункт 3.4. Главное, чтоб фантазии хватило.
.demo { overflow:hidden; }
.demo img.dva, .demo:hover img.raz { margin: 0px; }
.demo:hover img.dva {
margin-top:400px;
margin-left:400px;
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
}
.demo img.raz {
margin-top:-400px; margin-left:-400px;
}
Последний предложенный
Пункт 3.5. будет в разных браузерах отображаться по разному при наведении на картинку курсора, поскольку нет единой договорённости относительно сочетания transform: translate и
transform-origin. Мне нравится больше вариант в Mozilla Firefox.
.demo:hover img.dva {
-moz-transform: translate(250px, -1400px) scale(0.5, 0.5);
-webkit-transform: translate(250px, -1400px) scale(0.5, 0.5);
-o-transform: translate(250px, -1400px) scale(0.5, 0.5);
-ms-transform: translate(250px, -1400px) scale(0.5, 0.5);
-moz-transform-origin: 0px 2700px;
-webkit-transform-origin: 0px 2700px;
-o-transform-origin: 0px 10000px;
-ms-transform-origin: 0px 2700px;
opacity:0.3;filter:alpha(opacity=0.3);}
.demo:hover img.raz {z-index: 2;}
"Страницы" есть возможность добавлять до 20 Страниц. Они служат для такого содержания, как "Контакты", "О блоге" и т.п. Отличаются от Сообщений тем, что
, который создаёт меню, чаще верхнее. Расположение гаджета, а также список ссылок и их очерёдность можно определить на вкладке 
