Ссылка картинка текст, одно целое. как?

[Sapres]

Вот вопрос у меня накипел, есть вот такая задача
<div>миниатюра 133x96</div>| <span><a>Ссылка на галерею</a></span>
| <span>описание</span>
| <span>дата</span>
Надо что бы при наведении на картинку засвечивалась ссылка, вариант взять в ссылку див и спан отпадает, у ссылки при наведении меняеться бекграунд, и при наведении получаеться плохой эфект, нет левого марджина, онстановиться коричневым. ПОМОГИТЕ!!! иль на джаве или на джквери?

[ЕЖ]

$('#image').hover(function(){$('#link').addClass('hoverClass')},functi on(){$('#link').removeClass('hoverClass')})

[Sapres]

2 ЕЖ
Чё то не работает, можно поподробней? Мне надо что бы при наведении на картинку также срабатывал ховер на ссылке которая находиться в спане.

[ЕЖ]

Sapres, ну так проверяй
- подключил ли jQuery
- поставил ли картинке и ссылке соответствующие id image и link
- написал ли стиль для ссылки при наведении - класс hoverClass

[BorLase]

Сообщение от Sapres

Надо что бы при наведении на картинку засвечивалась ссылка, вариант взять в ссылку див и спан отпадает, у ссылки при наведении меняеться бекграунд, и при наведении получаеться плохой эфект, нет левого марджина, онстановиться коричневым. ПОМОГИТЕ!!! иль на джаве или на джквери?

а ты можешь кинуть кусок нерабочего кода, чтоб точно было понятно - что глючит и что надо сделать?

[Sapres]

2 ЕЖ
СПАСИБО БОЛЬШОЕ ЗА ИДЕЮ! Пашет, но! Ховер класс не работал как я хотел, тоесть... Шрифт в ссылке был коричневый и 18пт, при наведении шрифт должен был быть белым и фон коричневым, инверсия. при указании ховер класса и потом где только не размещав его в цсс я получал то что при наведении на картинку фон у линка становился коричневым и шрифт не менялся, тоесть коричневый прямоугольник получал. Вообщем что бы всё работало как надо написал такое:

<script>
$(document).ready(function(){$('.img').hover(function(){$('.link').css ('color', '#fff').css('background-color', '#993300')},function(){$('.link').css('color', '#993300').css('background-color', 'transparent').addClass('link')})
$('.link').hover(function(){$('.link').css('color', '#fff').css('background-color', '#993300')},function(){$('.link').css('color', '#993300').css('background-color', 'transparent').addClass('link')})
});
</script>

Может у кого то такая же проблема будет, потом уже с помощью пхп размножаем link1,,5 img1,7 что бы при наведении на картинку не срабатывал ховер на всех линках

[Plague]

а почему бы не сделать через CSS? если я правильно понял задачу, делается левой ногой....
вот я писал http://www.blackberryworld.eu/ смотри хидер, навбар.. ни единого js там.... просто описаны классы, и зовутся везде где нужно..
пример:

<tr align="center" nowrap="nowrap" class="hTabs">
				
					<td nowrap="nowrap"><a title="User CP" href="usercp.php">User CP</a></td>
..... и далее

CSS:

.hTabs {  //общие понятия
background-color:#CEDCE9;
background-image:url(bg_1.gif);
background-repeat:repeat-x;
color:#FFFFFF;
overflow:hidden;
text-decoration:none;
width:100%;
}
.hTabs li, .hTabs tr { // уже не помню зачем оно мне понадобилось
	width: 100%;
	padding: 0px;
	margin: 0px;
	display: inline;
	float: left;
}

.hTabs a { //свойства гиперссылки класса
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;
	background-image: url(navbar-01.gif);
	background-repeat: no-repeat;
	background-position: right top;
	padding: 12px 16px 0px;
	height: 33px;
	display: block;
	color: #FFF;
	text-decoration: none;
}
.hTabs a:hover { //поведение гиперссылки класса при наведении на нее мыши
	background-position: 100% -45px;
}

иль вот тоже мои дорихтовки как раз на эту тему:
http://trusthouse.ru/montenegro/
кнопки "Все предложения" "Поиск по каталогу" "Заявка на подбор"

<div style="height: 32px;" class="text_button"><a href="/montenegro/?all=1">Все предложения (273)</a></div>

.text_button{
	background-image: url('/images/bg_button.png');
	background-repeat: no-repeat;
	text-decoration: none;
	background-position: center top;
	overflow: hidden;
	color: #F6F6F6;
	width: 100%;
	text-align: center;
}

.text_button a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	background-image: url('/images/bg_button.png');
	background-repeat: no-repeat;
	background-position: center top;
	padding: 4px 0px 0px;
	white-space:nowrap;
	width: 100%;
	height: 32px;
	display: block;
	color: #F6F6F6;
	text-decoration: none;
}

.text_button a:hover {
	background-position: center -32px;
	color: #F6F6F6;
	text-decoration: none;
}

изначально вроде как и больше по писанине, но преимущества такого варианта в том, что оно работает и в тех броузерах в которых js отключен по умолчанию. да и не люблю я js вообще

[Sapres]

2 Plague
тыкни носом на точную ссылку где это реализовано? на сайте я этого не увидел. Идёт речь про два разных блока. То что левой ногой не спорю. Не профи же... учимся только

[Plague]

Сообщение от Sapres

тыкни носом на точную ссылку где это реализовано?

по первой ссылке - точно такой же форум как и здесь (моё и Shooter'а творчество), только на немецком по умолчанию.
вот посмотри как там реализована панель навигации. то, что здесь "Панель управления - Справка - Сообщество - Календарь итд." вверху..
по второй я тож написал на какие кнопки там смотреть

Сообщение от Sapres

Не профи же... учимся только

если б мне кто года полтора назад сказал бы что я CSS рулить буду - я бы охренел точно. я тогда для Фатбоя какой-то ужас рихтовал, полностью на нем сделанный и башку сломал в нем помнится конкретно

добавлено: ааа, нет, тут галерея же. не пойдет наверно. для каждой картинки класс писать - это ужас получится. сорри. Но вообще, именно для оформления кнопок я считаю этот вариант лучшим решением.

[Sapres]

2 Plague
кнопки у меня тоже на цсс, а то что я имел ввиду можешь глянуть тут http://chimiaran.com.ua/exhibitions.php , вот это я и делал... Всё равно спасибо за участие.

[Plague]

да, ступил спросонья , про галерею не подумал сразу.. думал нужно просто текст поверх картинки написать и все это хозяйство в ссылку превратить

вот кстати очень симпатичный вариант для галереи на jQuery но без текста.
может сгодится куда.
http://dynamicdrive.com/dynamicindex4/imagemagnify.htm