ZorNet.Ru — сайт для вебмастера » Графика для сайта » Красивые кнопки двух намерений для ucoz

Красивые кнопки двух намерений для ucoz

Красивые кнопки двух намерений для ucoz
Отличные кнопки которые вы можете видеть на картинке сайта depotfile.
at. Сама кнопка выдержана в светлом дизайне цвета. И под светлые порталы она будит как раз под них
Я Вам предлагаю два варианта установки этих кнопок:
С помощью JS
С помощью CSS

Начнём с JS, Вставляйте между head и /head этот скрипт:
Код
<script type="text/JavaScript">  
/*  
  * Источник: depotfile.at.ua  
  * Изменять эти строки запрещено  
  * Копировать без разрешения автора запрещено  
*/  
function MM_preloadImages() {  
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();  
  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)  
  if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}  
}  
   
function MM_findObj(n, d) { //v4.01  
  var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {  
  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  
  if(!x && d.getElementById) x=d.getElementById(n); return x;  
}  
   
function MM_nbGroup(event, grpName) {  
  var i,img,nbArr,args=MM_nbGroup.arguments;  
  if (event == "init" && args.length > 2) {  
  if ((img = MM_findObj(args[2])) != null && !img.MM_init) {  
  img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;  
  if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();  
  nbArr[nbArr.length] = img;  
  for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {  
  if (!img.MM_up) img.MM_up = img.src;  
  img.src = img.MM_dn = args[i+1];  
  nbArr[nbArr.length] = img;  
  } }  
  } else if (event == "over") {  
  document.MM_nbOver = nbArr = new Array();  
  for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {  
  if (!img.MM_up) img.MM_up = img.src;  
  img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);  
  nbArr[nbArr.length] = img;  
  }  
  } else if (event == "out" ) {  
  for (i=0; i < document.MM_nbOver.length; i++) {  
  img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }  
  } else if (event == "down") {  
  nbArr = document[grpName];  
  if (nbArr)  
  for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }  
  document[grpName] = nbArr = new Array();  
  for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {  
  if (!img.MM_up) img.MM_up = img.src;  
  img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;  
  nbArr[nbArr.length] = img;  
  } }  
}  
   
</script>

Затем сайм код кнопки:
Код
<body onLoad="MM_preloadImages('/img/knorange1.png','/img/knorange2.png')">  
<table border="0" cellpadding="0" cellspacing="0">  
  <tr>  
  <td><a href="ваша ссылка" target="_top"  
onClick="MM_nbGroup('down','group1','buttom','/img/knorange1.png',1)"  
onMouseOver="MM_nbGroup('over','buttom','/img/knorange2.png','/img/knorange2.png',1)"  
onMouseOut="MM_nbGroup('out')">  
<img name="buttom" src="/img/knorange1.png" border="0" alt="текст хинта" onload=""></a>  
</td>  
  </tr>  
</table>

Текст хинта - изменяйте надпись на ту, которую хотите видеть при наведении мыши на картинку.
Ну а теперь способ по проще! CSS
в самый низ вашего css ставим:
Код
#resevil {  
  float: center;  
}  
   
#resevil a {  
  text-decoration: none;  
  color: #ffffff;  
  background: url(/img/knorange1.png) no-repeat center top;  
  display: block;  
  height: 90px;  
  width: 155px;  
  text-align: center;  
  font: bold 13px/65px tahoma, Times, serif;  
}  
   
#resevil a:hover {  
  text-decoration: none;  
  color: #ffffff;  
  background: url(/img/knorange2.png) no-repeat center top;  
  display: block;  
  height: 90px;  
  width: 155px;  
  text-align: center;  
  font: bold 13px/65px tahoma, Times, serif;  
}

Код
<table border="0" cellpadding="0" align="center" cellspacing="0" width="100%" ;>  
<tr>  
<td width="1000"></td>  
  <td id="resevil"><a href="Ссылка" >название</a></td>  
<td width="1000"></td>  
</tr>  
</table>

Как вы поняли этот код выводит только одну кнопку, чтобы сделать много кнопок и из них вышло примерное горизонтальное меню, то просто копируйте
Код
<td id="resevil"><a href="Ссылка" >название</a></td>

И вставляйте сразу же после этой строки, тем самым должно получится вот что:
Код
<table border="0" cellpadding="0" align="center" cellspacing="0" width="100%" ;>  
<tr>  
<td width="1000"></td>  
  <td id="resevil"><a href="Ссылка" >название</a></td>  
  <td id="resevil"><a href="Ссылка" >название</a></td>  
  <td id="resevil"><a href="Ссылка" >название</a></td>  
  <td id="resevil"><a href="Ссылка" >название</a></td>  
  <td id="resevil"><a href="Ссылка" >название</a></td>  
  <td width="1000"></td>  
</tr>  
</table>
2012-03-14 Загрузок: 6 Просмотров: 1335 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar