0x6 Appeal

• 2009-08-14

  [.js] Make Your Links Boxes

  Text hyperlinks are boring. While they have their place in a document, common practice on the front page of a website still dictates a large text link for many. Why not put it a big box instead? First we’ll start with some CSS defining the block and it’s properties (and the background image):

  
      .linkBox {
  	background: #F5F5D3;
  	padding: 5px;
  	border: 1px solid #0B3636;
  	float: left;
  	width: 165px;
  	margin-right: 10px;
  	height: 100px;
      }
      #main .linkBox a {
  	color: #154040;
  	text-decoration: none;
      }
      #main .linkBox p {
  	font-size: 14px;
  	margin-top: 20px;
      }
      .hoverLinkBox {
  	background: url(../images/background.png) no-repeat right top;
      }
      #main .hoverLinkBox a {
  	color: #FFF;
      }
  
  
  

  Next we’ll introduce the JavaScript that initiates a hover event when a user’s mouse drifts over the box:

  
      $(document).ready(function() {
          var target = '.linkBox';
          var hoverClass = 'hoverLinkBox';
          $(target).each(function() {
              $(this).hover(
                  function() {
                      $(this).addClass(hoverClass);
                      status=$(this).find('a').attr('href');
                  },
                  function() {
                      $(this).removeClass(hoverClass);
                      status='';
                  }
              );
              $(this).click(function() {
                  location=$(this).find('a').attr('href');
              });
              $(this).css('cursor','pointer');
          });
      });