Master-X
Форум | Новости | Статьи
Главная » Форум » Дизайн » 
Тема: Вопрос css
цитата
03/07/13 в 14:26
 WorldTraffic

можно с помощью css (или еще как) сделать фоновую картинку активной? что бы при клике вела по ссылке
цитата
03/07/13 в 16:17
 Joseph
Да. Чтобы было валидно, с помощью jQuery надо будет повесить событие click на контейнер с фоном (body или враппер с фоном).

Код:

<script type="text/javascript">
$("body").click(function(e){
   if( e.target !== this ) return;
   var url = "http://www.google.com/";
   window.location = url;
});
</script>
цитата
03/07/13 в 16:34
 Yacc
http://jsfiddle.net/yacc/zCYpU
цитата
03/07/13 в 18:13
 WorldTraffic
Yacc: спасибо, на примере работает, попробовал сделать не работает, может что то упустил?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$('#red').on('click', function (event){
      if($(event.target).is('#red')) {
          window.open('http://master-x.com', '_blank')
      }
});
</script>
<style>
#red {
    background: red
}

#green {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: green
}
</style>
</head>

<body>
<div id="red">
    <div id="green">
       
    </div>
</div>
</body>
</html>


Joseph: спасибо, тоже не работает

что то не так сделал?
цитата
03/07/13 в 18:26
 Yacc
Скрипт из секции head убери и вставь перед </body>

Или замени на

Код:
$(document).ready(function(){
    $('#red').on('click', function (event){
          if($(event.target).is('#red')) {
              window.open('http://master-x.com', '_blank')
          }
    });
});


Вообще скрипты в секции head грузить это моветон. icon_smile.gif
цитата
03/07/13 в 18:57
 WorldTraffic
Yacc: заработало спасибо,

а можно ли еще как-то дать понять, что можно кликнуть? а то курсор мышки не меняется, тайтл вывести при наведении?
цитата
03/07/13 в 19:41
 Yacc
http://jsfiddle.net/yacc/zCYpU/

Код:
$('#red').on('click', function (event){
    if($(event.target).is('#red')) {
        window.open('http://master-x.com', '_blank')
    }
}).on('mouseover', function(event) {
    var div = $(event.target);
    if(div.is('#red')) {
        div.attr('title', 'Click here').css('cursor', 'pointer');       
    }
});

$('#green').on('mouseover', function(event) {
    $('#red').attr('title', '').css('cursor', 'default');
})
цитата
05/07/13 в 10:22
 undefined
Можно не нагружать скрипт курсорами:

<style>
#red { background: red; cursor: pointer; }
#green { width: 200px; cursor: default; height: 200px; margin: 0 auto; background: green; }
</style>


Эта страница в полной версии