[решено] Меняющаяся кнопка

Coutty · Конфигурация компьютера

Оооо... Да кто его знает, этот FrontPage?)
Зайдите в папку, куда сохранён сайт и подмените изображение кнопки.

Карина · Отправлено: **17:31, 09-10-2008** | #3

пыталась, но не могу найти папку

Профиль · Отправлено: **19:26, 09-10-2008** | #4

Карина, ЕМНИП, то Мои документы\Мои веб-сайты (Мои веб/web-страницы?)

Цитата Карина:

рисунок для меняющейся кнопки »

что вы имеете ввиду? Типа, рисунок 1, наводишь мышку - рисунок меняется на рис.2, отводишь мышку - обратно меняется на 1й? Если да, то делаем так:

Код:

<img src="1.jpg" onmouseover="this.src='2.jpg';" onmouseout="this.src='1.jpg';" />

Карина · Отправлено: **18:38, 10-10-2008** | #5

D_Master, сейчас попробую объяснить наглядно в рисунках. Кнопку со второго рисунка запихнуть в обзор кнопок. Это просто фон для кнопок. Вот мой сайт http://sfinxcats.narod.ru/ (он очень банальный, я новичок) По левой стороне расположены ссылки , я хочу сделать фон у надписей. У дизайнера на сайте были эти кнопки в бесплатной раздаче, значит они как то используются? Или надпись надо делать в фотошопе...? У меня в спрвке программы есть инструкции, но в программе нет таких опций.

Профиль · Отправлено: **20:54, 10-10-2008** | #6

Карина, если вы хотите сделать кнопки с надписями на фоне (рис.2.jpg), то можно сделать

Цитата Карина:

надпись в фотошопе »

Coutty · Конфигурация компьютера

Размещайте их на слоях. Например, так:

HTML код:

<img src='background.jpg' style='position:absolute; top:100; left:100; z-index:1' /><div style='position:absolute; top:100; left:100; z-index:2'>Текст поверх картинки</div>

Карина · Отправлено: **18:23, 11-10-2008** | #8

D_Master, Я не умею. Я не дружу с фотошопом.
Coutty, я такой диллетант, что я изнасиловала уже этот код и ничего не добилась. ) Что с ним надо делать?

Coutty · Конфигурация компьютера

Карина, сохраните это в html-файле:

HTML код:

<html>
<head>
<title>Заголовок</title>
<style>
div#nav a {
	font-weight:bold; 
	font-size:40;
	text-align:center;
	background-image:url('1.jpg');
	width:200;
	height:50;
	display:block;
	text-decoration:none;
	color:black
	}
	
div#nav a:hover {
	background-image:url('2.jpg');
	color:white;
	}
</style>
</head>

<body>
<div id='nav' style="top:100; left:100">
	<a href='link1.html'>Ссылка 1</a>
	<a href='link2.html'>Ссылка 2</a>
	<a href='link3.html'>Ссылка 3</a>
	<a href='link4.html'>Ссылка 4</a>
	<a href='link5.html'>Ссылка 5</a>
	<a href='link6.html'>Ссылка 6</a>
</div>
</body>
</html>

1.jpg и 2.jpg - картинки размером 200х50 в той же папке, что и html-файл.
Работает даже в Internet Explorer 6

(Да, я немного изменил то, что предложил изначально. Потому что это более простой вариант)

Карина · Отправлено: **16:39, 14-10-2008** | #10

Coutty, Это мой сайт http://sfinxcats.narod.ru/ и мне надо сделать аналогичные надписи на данном рисунке, Дугой. Не получается.