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

IMHO.WS (http://www.imho.ws/index.php)

- Веб-программирование (http://www.imho.ws/forumdisplay.php?f=29)

- - Ссылка картинка текст, одно целое. как? (http://www.imho.ws/showthread.php?t=141843)

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

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

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

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

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

Цитата:

Сообщение от Sapres (Сообщение 1683161)

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

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

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

Цитата:

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

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

Код HTML:

<tr align="center" nowrap="nowrap" class="hTabs">

                                

                                        <td nowrap="nowrap"><a title="User CP" href="usercp.php">User CP</a></td>

..... и далее

CSS:

Код HTML:

.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/
кнопки "Все предложения" "Поиск по каталогу" "Заявка на подбор"

Код HTML:

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

Код HTML:

.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 вообще :rolleyes:

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

Цитата:

Сообщение от Sapres (Сообщение 1683547)

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

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

Цитата:

Сообщение от Sapres (Сообщение 1683547)

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

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

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

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

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

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