Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Ссылки внутри другой ссылки (https://javascript.ru/forum/events/30659-ssylki-vnutri-drugojj-ssylki.html)

Madgeniy 11.08.2012 11:54

Ссылки внутри другой ссылки
 
Вложений: 1
Доброго времени суток!
Пытаюсь реализовать поведение ссылки, когда внутри нее есть еще две ссылки (удобно с точки зрения css).
Так вот.

Такое работает в FF, больше нигде не работает.

<a href="">Alexandr Babko 
<img class="note_img" src = "img/0.png"  width="15" height="12" onClick="location.href='index.html'">
<img class="letter_img" src = "img/0.png"  width="15" height="12" onClick="location.href='index.html'">
</a>


Хочу получить эффект как на прикрепленном рисунке.
Чем можно заменить полученное?

Aetae 11.08.2012 12:55

Впринципе и это можно заставить работать, но не нужно.

Надо как-то так:
<style>
div a{
float:left;
display:block;
width:100%;
background-color:#ddd;
height:24px;
}
div a:hover{
background-color:#ccd;

}

.img{
display:block;
font-size:0;
background-color:transparent !important;
}

.img.note_img{
background-image:url(http://learn.javascript.ru/modules/play/images/export.png);
width:24px;
height:24px;
margin-left:-24px;
}
.img.letter_img{
background-image:url(http://learn.javascript.ru/modules/play/images/readme.png);
margin-left:-50px;
width:24px;
height:24px;
}

</style>

<div>
	<a href="#Babko">Alexandr Babko</a>
	<a href="#note" class="img note_img">Alexandr Babko note</a>
	<a href="#letter" class="img letter_img">Alexandr Babko letter</a>
	<a href="#Babko">Alexandr Babko</a>
	<a href="#note" class="img note_img">Alexandr Babko note</a>
	<a href="#letter" class="img letter_img">Alexandr Babko letter</a>
	<a href="#Babko">Alexandr Babko</a>
	<a href="#note" class="img note_img">Alexandr Babko note</a>
	<a href="#letter" class="img letter_img">Alexandr Babko letter</a>
</div>

bes 11.08.2012 13:02

Добавьте #
<a href="#">Alexandr Babko

Madgeniy 11.08.2012 14:43

Последний вариант очень понравился, т.к. сохраняется поведение подсветки ссылк при наведении на пикторгаммки. Спасибо. А в чем отличие пустой ссылки от ссылки с якорем?

bes 11.08.2012 14:58

Ну видимо потому, что # используется для переходов внутри страницы, пусто значит "никуда внутри", а без # - на внешние страницы, пусто значит "никуда снаружи".
Это лишь предположение, точно не знаю, если кто знает, подскажет, главное, что обработка идёт так, что эффект получается только в первом случае.


Часовой пояс GMT +3, время: 10:50.