A A A A Автор Тема: Создание сайта !? (Прочитано 16698 раз)

Evgeny Trisko · « **Ответ #40 :** 15 Янв 2010 [01:37:20] »

Ребят, помогите!

В общем нужно прописать менюшку в HTML!
внизу образец. кнопки координатами прописывать буду, а вот как сделать что б при наведении на кнопу, она менялась, как бы на активную...?

artym · « **Ответ #41 :** 15 Янв 2010 [01:56:42] »

Если с помощью CSS,то сначала прописываешь класс,к которому относится кнопка,в бэкграунде указываешь изображение кнопки.
Потом прописываешь псевдо класс(т.е то же название класса,но через двоеточие дописываешь hover) и в нем задаешь значение бэкраунд с картинкой на которую нужно чтоб менялось при наведении мыши..

Например для тэга а:

a {background-color: #000000;}

a:hover{
background-color: #333333;}

Вместо цвета изображение с адресом..

Evgeny Trisko · « **Ответ #42 :** 15 Янв 2010 [02:43:50] »

а картинка обычным тегам в CSS указывается (<img src="#.jpg">) а то я CSS, чисто так теоретически знаю!... щя буду мозг ломать!)))
ди вообще как такое меню правильно делать? сделать для каждой страницы отдельно весь блок или или везде одинаковое, а по вех того будет появляться 2я картинка т.е. раздел в котором ты находишься или тот что под курсором... надеюсь вы поняли что я хотел сказать! а то чёт вообще туго думается!))

artym · « **Ответ #43 :** 15 Янв 2010 [02:54:45] »

Цитата: Евгений 16 от 15 Янв 2010 [02:43:50]

а картинка обычным тегам в CSS указывается (<img src="#.jpg">) а то я CSS, чисто так теоретически знаю!... щя буду мозг ломать!)))
ди вообще как такое меню правильно делать? сделать для каждой страницы отдельно весь блок или или везде одинаковое, а по вех того будет появляться 2я картинка т.е. раздел в котором ты находишься или тот что под курсором... надеюсь вы поняли что я хотел сказать! а то чёт вообще туго думается!))

Нет конечно

Выглядит так: background:url(название изображения.jpg);

Учи CSS,там есть готовые решения таких менюшек.

Evgeny Trisko · « **Ответ #44 :** 15 Янв 2010 [03:23:48] »

ещё помучаю!
да получилось! но получилось то что меняется цвет фона(фоном служат те картинки которые в цсс прописаны) текста <a href="#.html">111111111</a>
а когда там прописана картинка <a href="#.html"><img src="#.jpg"></a>

вот то что в цсс у меня написано ! правильно?

a {background:url(1.jpg);}
a:hover {background:url(2.jpg);
}

Evgeny Trisko · « **Ответ #45 :** 15 Янв 2010 [03:28:01] »

<a href="#.html">что должно быть прописано здесь</a>
извините конечно! буду изучать! просто это надо сделать в ближайшие сроки!
да и делаю только из-за того что хочу научится а так бы плюнул... и без это го бы обошлись!))

artym · « **Ответ #46 :** 15 Янв 2010 [03:45:01] »

Цитата

но получилось то что меняется цвет фона

Ну правильно.Ты же указал значения для тэга a.
А нужно было создать div-блок присвоить ему имя или класс,в него поместить содержимое.
А потом уже в CSS прописать свойства этого имени или класса.

Короче..Сделай так..

Это вставляешь там,где изображение меняется:

Код: [Выделить]

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','[color=red]первое изображение[/color].jpg',1)"><img src="[color=red]второе[/color].jpg" name="Image2" width="200" height="200" border="0" id="Image2" /></a>

Это вставляешь между <head>

Код: [Выделить]

 <script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i  ) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  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_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i =3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j  ]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i 2];}
}
//-->
</script>

Evgeny Trisko · « **Ответ #47 :** 15 Янв 2010 [04:08:59] »

короче идею с ЦСС похороню! а вот скрипт мне понравился!

:-[последний вопрос по этой теме!: куда между <title>? заключить в тег <title></title> или?

извините если туплю!.. голова совсем что т не варит, пойду спать, утром буду доделывать!

artym · « **Ответ #48 :** 15 Янв 2010 [04:14:26] »

Цитата: Евгений 16 от 15 Янв 2010 [04:08:59]

короче идею с ЦСС похороню! а вот скрипт мне понравился!
:-[последний вопрос по этой теме!: куда между <head>? заключить в тег <head></head> или?
извините если туплю!.. голова совсем что т не варит, пойду спать, утром буду доделывать!

Та делов-то две секунды.Копируешь>вставляешь между <head>сюда</head>

Блин,половина пятого,я тоже уже туплю

В голову нужно ставить.Поправил..

Evgeny Trisko · « **Ответ #49 :** 15 Янв 2010 [13:14:32] »

Если честно по не работает!
висит просто вторая картинка!...

artym · « **Ответ #50 :** 15 Янв 2010 [15:45:56] »

Цитата: Евгений 16 от 15 Янв 2010 [13:14:32]

Если честно по не работает!
висит просто вторая картинка!...

Ну фиг его знает,у меня работает.
В общем виде,еслибы была на сайте только картинка выглядело бы оно так:

Код: [Выделить]

<!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">
[color=blue]<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i  ) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  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_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i =3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j  ]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i 2];}
}
//-->
</script>
</head>[/color]

[color=green]<body onload="MM_preloadImages('images/5.jpg')">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/2.jpg',1)"><img src="images/1.jpg" name="Image1" width="200" height="200" border="0" id="Image1" /></a>
</body>[/color]
</html>

Evgeny Trisko · « **Ответ #51 :** 16 Янв 2010 [13:43:00] »

artym, Спасибо огромное за всё! будем пробовать и учиться дальше! вы очень помогли!

wdaemon · « **Ответ #52 :** 16 Янв 2010 [13:57:23] »

Цитата: Евгений 16 от 15 Янв 2010 [04:08:59]

короче идею с ЦСС похороню! а вот скрипт мне понравился!

Хоронить не надо...

css_test.html

Код: [Выделить]

<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<a href="http://ya.ru"><div class="button">Кнопка</div></a>
</body>
</html>

style.css

Код: [Выделить]

@charset "utf-8";
.button {
	height: 30px;
	width: 150px;
	text-align:center;
	line-height:30px;
	font-weight:bold;
	background:url(bg_off.jpg) repeat-x;
	border:1px solid;
}

.button:hover, .button:active {
	background:url(bg_on.jpg) repeat-x;
}

Пример во вложении.

wdaemon · « **Ответ #53 :** 16 Янв 2010 [14:00:50] »

Цитата: Евгений 16 от 15 Янв 2010 [03:23:48]

ещё помучаю!
да получилось! но получилось то что меняется цвет фона(фоном служат те картинки которые в цсс прописаны) текста <a href="#.html">111111111</a>
а когда там прописана картинка <a href="#.html"><img src="#.jpg"></a>

вот то что в цсс у меня написано ! правильно?

a {background:url(1.jpg);}
a:hover {background:url(2.jpg);
}

a {background:url(1.jpg);display:block; width:150px; height:30px;}
a:hover {background:url(2.jpg);
}

Evgeny Trisko · « **Ответ #54 :** 16 Янв 2010 [16:27:33] »

ВО!!! работает! спасибо!!!
как только теперь это дело привезать к карте

wdaemon · « **Ответ #55 :** 16 Янв 2010 [17:05:35] »

Цитата: Евгений 16 от 16 Янв 2010 [16:27:33]

ВО!!! работает! спасибо!!!
как только теперь это дело привезать к карте

<img src="home.jpg" usemap="#karta1">
<map name="karta1">
<area href="index.html" shape="rect" coords="25,0,195,30">
</map>

А зачем к карте?
Замучаешься вырезать! Я делал такое тут:
http://tourleaderspb.ru/

Задолбались реально!

Evgeny Trisko · « **Ответ #56 :** 16 Янв 2010 [20:09:47] »

ну вот смори то что я сейчас делаю! http://vestnikkavkaza.narod.ru/
кнопки через карту работают, просто теперь оживить их хочется!

как это сделать!?

wdaemon · « **Ответ #57 :** 16 Янв 2010 [21:09:35] »

Цитата: Евгений 16 от 16 Янв 2010 [20:09:47]

ну вот смори то что я сейчас делаю! http://vestnikkavkaza.narod.ru/
кнопки через карту работают, просто теперь оживить их хочется! как это сделать!?

резать. или через css-спрайты

DarWin · « **Ответ #58 :** 21 Янв 2010 [03:03:07] »

Цитата: Евгений 16 от 16 Янв 2010 [20:09:47]

ну вот смори то что я сейчас делаю! http://vestnikkavkaza.narod.ru/
кнопки через карту работают, просто теперь оживить их хочется! как это сделать!?

Я не пойму -это сайт астронома любителя или издательства? А вообще как то шаблонно смотрится. Хотя и всякие движки (CMS) они и есть шаблоны. Может стоит, хотя бы как то, расширить фоном? Вот сейчас доделываю свой, с помощью мазилы можно проследить работу цсс.. Специалистам не смотреть там бардак, еще не разбирался - dcreo.net.

Evgeny Trisko · « **Ответ #59 :** 21 Янв 2010 [03:16:40] »

Цитата: Darvin от 21 Янв 2010 [03:03:07]

Цитата: Евгений 16 от 16 Янв 2010 [20:09:47]
ну вот смори то что я сейчас делаю! http://vestnikkavkaza.narod.ru/
кнопки через карту работают, просто теперь оживить их хочется! как это сделать!?
Я не пойму -это сайт астронома любителя или издательства? А вообще как то шаблонно смотрится. Хотя и всякие движки (CMS) они и есть шаблоны. Может стоит, хотя бы как то, расширить фоном? Вот сейчас доделываю свой, с помощью мазилы можно проследить работу цсс.. Специалистам не смотреть там бардак, еще не разбирался - dcreo.net.

это саит издательства который я сейчас делаю!

шаблонно не шаблонно, делаем как умеем!...

сейчас хочу проработать весь саит, а потом конкретно дизайном займусь...посмотрел dcreo.net, очень даже симпотно!!
попутные вопросы: КАК div боксу придать прозрачности что б через него просматривался фон на %70 примерно.?
как контур задать боксу?
и как закруглить углы(без картинок по углам)?

Новости:

A A A A Автор Тема: Создание сайта !? (Прочитано 16698 раз)