#1 2012.06.08 17:08

POFIGISST
Участник
Зарегистрирован: 2011.03.20
Сообщений: 1531
Карма: 6
Профиль

Как сделать ссылку внутри картинки?

вот у меня идет такая картинка
http://hideporn.net/touch/art/v_menu_li_bg.gif

мне нужно чтоб в этой картинке посередине в ячейках была ссылка,и в верхней ячейке и в нижней,выравнивание слева,как такое можно сделать в css ?

Отредактировано POFIGISST (2012.06.08 17:13)

Неактивен

#2 2012.06.08 17:50

Gemorroj
Administrator
Откуда: Белоруссия
Зарегистрирован: 2007.11.03
Сообщений: 6538
Карма: 108
Профиль Веб-сайт

Re: Как сделать ссылку внутри картинки?

сделать у ссылки background-image

Неактивен

#3 2012.06.08 18:14

POFIGISST
Участник
Зарегистрирован: 2011.03.20
Сообщений: 1531
Карма: 6
Профиль

Re: Как сделать ссылку внутри картинки?

Gemorroj написал:

background-image

спс Паш, лучший ответsmile

http://htmlbook.ru/css/background-image

Неактивен

#4 2012.06.09 01:22

TLENS
Moderator
Откуда: Украина
Зарегистрирован: 2009.04.05
Сообщений: 2402
Карма: 14
Профиль

Re: Как сделать ссылку внутри картинки?

POFIGISST
Ну если картинка конечно с закругленными углами и средина будет однотонно то есть не так как у тебя идет на спад то лучше тремя блоками обвернуть
Это в десятки раз будет меньше размер картинки ну и чтобы было все красиво и картинка заканчивалась на конце ссылки.
Но тут тоже есть свои нюансы.

Неактивен

#5 2012.06.09 03:04

POFIGISST
Участник
Зарегистрирован: 2011.03.20
Сообщений: 1531
Карма: 6
Профиль

Re: Как сделать ссылку внутри картинки?

TLENS написал:

POFIGISST
Ну если картинка конечно с закругленными углами и средина будет однотонно то есть не так как у тебя идет на спад то лучше тремя блоками обвернуть
Это в десятки раз будет меньше размер картинки ну и чтобы было все красиво и картинка заканчивалась на конце ссылки.
Но тут тоже есть свои нюансы.

я тебе в аське скину адрес,посмотришь как я сделал,хотя вот скрин прикрепляю,несмог я вытаставить чтоб ссылки шли с одинаковым отступом сверху и снизу этой картинки,пробовал margin-top , но он чет не срабатвает(


Вложения

Неактивен

#6 2012.06.09 08:42

TLENS
Moderator
Откуда: Украина
Зарегистрирован: 2009.04.05
Сообщений: 2402
Карма: 14
Профиль

Re: Как сделать ссылку внутри картинки?

position: relative;
top: 5px;
Если не получится то обверни блоком

Неактивен

#7 2012.06.09 15:54

TLENS
Moderator
Откуда: Украина
Зарегистрирован: 2009.04.05
Сообщений: 2402
Карма: 14
Профиль

Re: Как сделать ссылку внутри картинки?

Код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<title>Test</title>
<style type="text/css">
div.ab {
height: 35px;
background: url('14.gif') left top no-repeat;
}
div.ab:focus, div.ab:hover, div.ab:active {
background-position: 0 -50px;
}
div.ab a {
position: relative;
top: 5px;
left: 10px;
}
</style>
</head>
<body>
<div class="ab"><a href="#">Link1</a><br /></div>
<div class="ab"><a href="#">Link2</a><br /></div>
<div class="ab"><a href="#">Link3</a><br /></div>
</body>
</html>


На средний наведен курсор мышы


Вложения

Неактивен

#8 2012.06.09 16:23

TLENS
Moderator
Откуда: Украина
Зарегистрирован: 2009.04.05
Сообщений: 2402
Карма: 14
Профиль

Re: Как сделать ссылку внутри картинки?

Я завтыкал что обработчики на hover и focus не срабоют на блок

Код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<title>Test</title>
<style type="text/css">
a.b {
display: block;
height: 35px;
padding-left: 10px;
padding-top: 5px;
background: url('14.gif') left top no-repeat;
}
a.b:focus, a.b:hover, a.b:active {
background-position: 0 -50px;
}
</style>
</head>
<body>
<a class="b" href="#">Link1</a>
<a class="b" href="#">Link2</a>
<a class="b" href="#">Link3</a>
</body>
</html>

Неактивен

#9 2012.06.11 03:55

POFIGISST
Участник
Зарегистрирован: 2011.03.20
Сообщений: 1531
Карма: 6
Профиль

Re: Как сделать ссылку внутри картинки?

aitrainsher
самый лучший ответ по теме:D big_smile

Неактивен

Дополнительно

forum.wapinet.ru

PunBB Mod v0.6.1
0.015 s