Прикрепить ссылку к иконке на JS
КОВЫРЯЮ бесплатный шаблон (вот его демо: http://joomlatemplates.youjoomla.info/memento/)
и озадачился прикреплением внутренней ссылки к анимированным круглым иконкам (где apple, android и win) Но не могу понять как прикрепить к ним ссылку, поскольку в js я дуб-дерево. А хочется, чтобы при клике на иконку пользователь перешел на нужную страницу сайта. Насколько я понял анимируются они (иконки) посредством JavaScript, а вот с Java, я знаком как с JAWA и то это был такой мотоцикл ))) что куда пихать не знаю, но седалищем чую, что все достаточно просто - помогите кто может. |
Самое простое, если плохо разбираешься, будет обернуть каждую из этих строк в ссылку:
<div class="icon_image_block" style="background-position: 0px 0px;"></div> <div class="icon_image_block android" style="background-position: 0px 0px;"></div> <div class="icon_image_block windows" style="background-position: 0px 0px;"></div> Например: <a href="http://google.com"> <div class="icon_image_block" style="background-position: 0px 0px;"></div> </a> |
Такие штуки можно и без js делать, с помощью css transition:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#wrapper{
width: 800px;
height: 200px;
}
.image{
width: 200px;
height: 200px;
float: left;
outline: 1px solid red;
overflow: hidden;
}
.inner{
padding: 10px;
background: rgba(48,36,36,0.5);
margin: 160px 0 0 0;
transition: all 0.5s;
}
.image:hover .inner{
margin: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="image">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dicta mollitia adipisci atque nemo nobis enim ipsa ad soluta optio assumenda, tempora dolorem, amet reprehenderit eos neque doloremque esse placeat.</div>
</div>
<div class="image">
<div class="inner">Ut voluptate beatae officia deserunt, enim quibusdam. Culpa ex asperiores quo praesentium eaque magni et explicabo, perferendis similique voluptates dolores voluptatem sit unde dolorem, officiis deserunt, deleniti debitis a placeat.</div>
</div>
<div class="image">
<div class="inner">Consequuntur dignissimos, aliquam nisi ullam cumque, dolores cum voluptatem earum libero sunt odio molestiae! Nulla repellendus eligendi, eius ipsam libero consectetur amet voluptatem molestiae, sint nobis et? Voluptas doloremque, sint!</div>
</div>
<div class="image">
<div class="inner">Soluta ipsa, quibusdam. Quibusdam hic voluptate nihil voluptatem neque, aliquid minima est quae architecto optio, rem. Iusto inventore obcaecati nisi cum necessitatibus, animi laudantium dolor, adipisci harum consequatur, quibusdam totam.</div>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 14:16. |