Связанные ссылки. - HTML и CSS

lukovoy · 01.04.2011, 22:28

Здравствуйте.
У меня есть один важный вопрос.
Как можно связать 2 ссылки?
Что имееться ввиду.
В шапке сайта есть несколько моделей автомобилей, которые кликабельны - ведут на страницу с описанием (изображения).
Также есть горизонтальное меню с названием этих моделей (список).
Изображение не получится поместить в список (по дизайну)
Как сделать, чтобы при наведении мышки на модель автомобиля подсвечивалось соответствующий пункт меню?
Буду очень благодарен за совет (помощь)

lukovoy · 02.04.2011, 07:50

Хотел добавить. Это верстка дивами. Каждая модель авто (изображение) находится в отдельном блоке див.

xDyPx · 03.04.2011, 00:15

тут без javascript не обойтись. нужно код смотреть

lukovoy · 03.04.2011, 03:41

Вот хтмл одной из моделей
<div class="xc60"><a href="#"><img src="images/xc60.png" width="165" height="92" alt="xc60"></a></div> - картинка

<ul>Кроссоверы<br />
<li class="lxc60"><a href="#">XC60</a></li></ul>

Ну и css этих элементов
.xc60 {width:165px; height:92px; position:relative; left:15px; z-index:1;}

#model ul li {float: left;
height: 14px;
margin-top: 5px;
text-align:center;
padding: 0 15px 30px;
color:#333;
font: 14px Tahoma, Geneva, sans-serif; font-weight:bold; color: #333333; text-transform:uppercase; }

#model ul li a{text-decoration:none; color: #333;}
#model ul li a:hover {color:#fff; text-shadow: black 0.1em 0.1em 0.2em; background:url(images/modelmenu_cur.jpg) no-repeat bottom center; padding-bottom: 6px;}

А вот изображение самой шапки (часть только)

xDyPx · 03.04.2011, 10:53

Если я вас правильно понял, то при наведении курсора мыши на

Код:

<div class="xc60"><a href="#"><img src="images/xc60.png" width="165" height="92" alt="xc60"></a></div>

"подсвечивался" один из элементов списка

Код:

<ul>Кроссоверы<br />...

Вот пример:

Код:

<body>
<div class="xc60" onMouseOver="document.getElementById('model').getElementsByTagName('ul')[0].getElementsByTagName('li')[0].style.textShadow='black 0.1em 0.1em 0.2em'" onMouseOut="document.getElementById('model').getElementsByTagName('ul')[0].getElementsByTagName('li')[0].style.textShadow=''">
<a href="#"><img src="xc60.png" width="165" height="92" alt="xc60"></a>
</div>
<div class="xc60" onMouseOver="document.getElementById('model').getElementsByTagName('ul')[0].getElementsByTagName('li')[1].style.textShadow='black 0.1em 0.1em 0.2em'" onMouseOut="document.getElementById('model').getElementsByTagName('ul')[0].getElementsByTagName('li')[1].style.textShadow=''">
<a href="#"><img src="xc60.png" width="165" height="92" alt="xc60"></a>
</div>
<div id="model">
<ul>Кроссоверы<br />
<li class="lxc60"><a href="#">XC60</a></li>
<li class="lxc60"><a href="#">XXC60</a></li>
</ul>
</div>
</body>

Если вы показали весь код, то можны было и по-короче написать пример.

Для каждого div'a с моделью автомобиля нужно добавить события onMouseOver - то, что происходит при наведении мыши, и onMouseOut - то, что происходит при "отведении" мыши с этого div'a.

Код:

document.getElementById('model').getElementsByTagName('ul')[0].getElementsByTagName('li')[0]

- так получаем доступ к первому элементу списка <ul>Кроссоверы<br />.... Если в последних квадратных скобках изменить значение с 0 на 1, то получим доступ ко 2 элементу списка, и так далее.
С помощью .style можно изменять стили элемента. В моем примере изменяется text-shadow. Если нужно изменить, например, цвет фона, то вместо .textShadow нужно написать .backgroundColor и далее после "равно" в кавычках написать нужный цвет. Для изменения фоновой картинки нужно писать .backgroundImage и после "равно" в кавычкак указать ссылку на картинку. И так можно изменять все свойства стилей.
Когда наводится мышка на модель автомобиля, то onMouseOver изменяет свойства элемента списка ("подсвечивается"), а когда курсор убирается с этой модели, то onMouseOut возвращает свойства в стилях обратно.

lukovoy · 03.04.2011, 11:11

Вот весь код хтмл

Код:

<!-- Модельный ряд-->    
        <div class="xc60"><a href="#"><img src="images/xc60.png" width="165" height="92" alt="xc60"></a></div>
       <div class="xc70"><a href="#"><img src="images/xc70.png" alt="xc70"></a></div>
       <div class="xc90"><a href="#"><img src="images/xc90.png" alt="xc90"></a></div>
       <div class="v50"><a href="#"><img src="images/v50.png" alt="v50"></a></div>
       <div class="v60"><a href="#"><img src="images/v60.png" alt="v60"></a></div>
       <div class="s40"><a href="#"><img src="images/s40.png" alt="s40"></a></div>
       <div class="s60"><a href="#"><img src="images/s60.png" alt="s60"></a></div>
       <div class="s80"><a href="#"><img src="images/s80.png" alt="s80"></a></div>
       <div class="c30"><a href="#"><img src="images/c30.png" alt="c30"></a></div>
       <div class="c70"><a href="#"><img src="images/c70.png" alt="c70"></a></div>
       <div class="break"></div>
       
       <div id="model">
       <ul>Кроссоверы<br />
       <li class="lxc60"><a href="#">XC60</a></li>
       <li><a href="#">XC70</a></li>
       <li><a href="#">XC90</a></li>       
       </ul>
       
        <ul>Универсалы<br />
       <li><a href="#">V50</a></li>
       <li><a href="#">V60</a></li>
       </ul>
       
        <ul><li class="all"><a href="#">все<br />модели</a></li>
       </ul>
       
         <ul>Седаны<br />
       <li><a href="#">S40</a></li>
       <li><a href="#">S60</a></li>
       <li><a href="#">S80</a></li>       
       </ul>
       
        <ul>Купе<br />
       <li><a href="#">C30</a></li>
       <li><a href="#">C70</a></li>
       </ul>    
       
       </div>

Ну и естественно под каждый див с машиной свой класс. Для li классов нет.

Скажите пожалуйста, а в onMouseOver="document.getElementByI d('model').getElementsByTagName('ul ')[0].getElementsByTagName('li')..... можно вписать стили для каждого li чтобы было понятно, для какого из пунктов меню необходима подстветка. Т.е. сделать так например .getElementsByTagName('li class="lcx60" ').....

xDyPx · 03.04.2011, 12:21

Чтобы получить доступ к элементу по классу нужно писать .getElementsByClassName("lcx60")[0]. так как может быть на странице несколько элементов с таким классом, то получим массив со всеми элементами, которые имеют класс lcx60. В квадратных скобках указывается номер элемента, который нужен (в каком порядке встречаются элементы на странице, в таком же порядке они будут и в этом полученном массиве). Если элемент с классом lcx60 только один, то просто пишется в квадратных скобках 0.
В вашем коде, чтобы получить доступ к <li class="lxc60"><a href="#">XC60</a></li> нужно писать

Код:

document.getElementById('model').getElementsByTagName('ul')[0].getElementsByClassName("lcx60")[0]

А чтобы получить доступ к <li class="all"><a href="#">все<br />модели</a></li>

Код:

document.getElementById('model').getElementsByTagName('ul')[3].getElementsByClassName("all")[0]

Вот тут http://javascript.ru/tutorial/dom/search можете по-подробнее об этом почитать.
PS. если же все-таки не понятно что-то, то если подробнее напишите, что вы хотите сделать, то есть на какой div наводится курсор и какой li как изменяется, то я подробнее подсказал что и как нужно сделать.

lukovoy · 03.04.2011, 14:41

Спасибо большое за детальный ответ. Постараюсь разобраться. Спасибо, что приделили мне столько внимания.

lukovoy · 03.04.2011, 15:39

Еще один вопрос.
Как в этой строке прописать стиль -

Код:

color:#fff; text-shadow: black 0.1em 0.1em 0.2em; background:url(images/modelmenu_cur.jpg) no-repeat bottom center;  padding-bottom: 6px;

(тут получается несколько параметров стиля, не только тень текста)

xDyPx · 03.04.2011, 17:14

Для onMouseOver

Код:

document.getElementById('model').getElementsByTagName('ul')[0].getElementsByClassName("lcx60")[0].style.cssText='color:#fff; text-shadow: black 0.1em 0.1em 0.2em; background:url(images/modelmenu_cur.jpg) no-repeat bottom center;  padding-bottom: 6px;'

А для onMouseOut .cssText='' (оставить последние кавычки пустыми)

Тут, честно говоря, довольно большой javascript код получается. Если вам это не мешает, можете так оставить. Но, как вариант, можете почитать про jQuery. Это библиотека javascript, чтобы упростить его использование. В интернете много документации, примеров и статей по нему.

01.04.2011, 22:28	#1
lukovoy Регистрация: 01.04.2011 Сообщений: 9	Связанные ссылки. Здравствуйте. У меня есть один важный вопрос. Как можно связать 2 ссылки? Что имееться ввиду. В шапке сайта есть несколько моделей автомобилей, которые кликабельны - ведут на страницу с описанием (изображения). Также есть горизонтальное меню с названием этих моделей (список). Изображение не получится поместить в список (по дизайну) Как сделать, чтобы при наведении мышки на модель автомобиля подсвечивалось соответствующий пункт меню? Буду очень благодарен за совет (помощь)

03.04.2011, 10:53	#5
xDyPx Форумчанин Регистрация: 21.01.2009 Сообщений: 148	Если я вас правильно понял, то при наведении курсора мыши на Код: `<div class="xc60"><a href="#"><img src="images/xc60.png" width="165" height="92" alt="xc60"></a></div>` "подсвечивался" один из элементов списка Код: `<ul>Кроссоверы<br />...` Вот пример: Код: <body> <div class="xc60" onMouseOver="document.getElementById('model').getElementsByTagName('ul')[0].getElementsByTagName('li')[0].style.textShadow='black 0.1em 0.1em 0.2em'" onMouseOut="document.getElementById('model').getElementsByTagName('ul')[0].getElementsByTagName('li')[0].style.textShadow=''"> <a href="#"><img src="xc60.png" width="165" height="92" alt="xc60"></a> </div> <div class="xc60" onMouseOver="document.getElementById('model').getElementsByTagName('ul')[0].getElementsByTagName('li')[1].style.textShadow='black 0.1em 0.1em 0.2em'" onMouseOut="document.getElementById('model').getElementsByTagName('ul')[0].getElementsByTagName('li')[1].style.textShadow=''"> <a href="#"><img src="xc60.png" width="165" height="92" alt="xc60"></a> </div> <div id="model"> <ul>Кроссоверы<br /> <li class="lxc60"><a href="#">XC60</a></li> <li class="lxc60"><a href="#">XXC60</a></li> </ul> </div> </body> Если вы показали весь код, то можны было и по-короче написать пример. Для каждого div'a с моделью автомобиля нужно добавить события onMouseOver - то, что происходит при наведении мыши, и onMouseOut - то, что происходит при "отведении" мыши с этого div'a. Код: `document.getElementById('model').getElementsByTagName('ul')[0].getElementsByTagName('li')[0]` - так получаем доступ к первому элементу списка <ul>Кроссоверы<br />.... Если в последних квадратных скобках изменить значение с 0 на 1, то получим доступ ко 2 элементу списка, и так далее. С помощью .style можно изменять стили элемента. В моем примере изменяется text-shadow. Если нужно изменить, например, цвет фона, то вместо .textShadow нужно написать .backgroundColor и далее после "равно" в кавычках написать нужный цвет. Для изменения фоновой картинки нужно писать .backgroundImage и после "равно" в кавычкак указать ссылку на картинку. И так можно изменять все свойства стилей. Когда наводится мышка на модель автомобиля, то onMouseOver изменяет свойства элемента списка ("подсвечивается"), а когда курсор убирается с этой модели, то onMouseOut возвращает свойства в стилях обратно. МОЙ САЙТ Компьютер позволяет решать все те проблемы, которые до появления компьютера не существовали. Последний раз редактировалось xDyPx; 03.04.2011 в 10:59.

03.04.2011, 12:21	#7
xDyPx Форумчанин Регистрация: 21.01.2009 Сообщений: 148	Чтобы получить доступ к элементу по классу нужно писать .getElementsByClassName("lcx60")[0]. так как может быть на странице несколько элементов с таким классом, то получим массив со всеми элементами, которые имеют класс lcx60. В квадратных скобках указывается номер элемента, который нужен (в каком порядке встречаются элементы на странице, в таком же порядке они будут и в этом полученном массиве). Если элемент с классом lcx60 только один, то просто пишется в квадратных скобках 0. В вашем коде, чтобы получить доступ к <li class="lxc60"><a href="#">XC60</a></li> нужно писать Код: `document.getElementById('model').getElementsByTagName('ul')[0].getElementsByClassName("lcx60")[0]` А чтобы получить доступ к <li class="all"><a href="#">все<br />модели</a></li> Код: `document.getElementById('model').getElementsByTagName('ul')[3].getElementsByClassName("all")[0]` Вот тут http://javascript.ru/tutorial/dom/search можете по-подробнее об этом почитать. PS. если же все-таки не понятно что-то, то если подробнее напишите, что вы хотите сделать, то есть на какой div наводится курсор и какой li как изменяется, то я подробнее подсказал что и как нужно сделать. МОЙ САЙТ Компьютер позволяет решать все те проблемы, которые до появления компьютера не существовали. Последний раз редактировалось xDyPx; 03.04.2011 в 12:27.

03.04.2011, 15:39	#9
lukovoy Регистрация: 01.04.2011 Сообщений: 9	Еще один вопрос. Как в этой строке прописать стиль - Код: `color:#fff; text-shadow: black 0.1em 0.1em 0.2em; background:url(images/modelmenu_cur.jpg) no-repeat bottom center; padding-bottom: 6px;` (тут получается несколько параметров стиля, не только тень текста)

03.04.2011, 17:14	#10
xDyPx Форумчанин Регистрация: 21.01.2009 Сообщений: 148	Для onMouseOver Код: `document.getElementById('model').getElementsByTagName('ul')[0].getElementsByClassName("lcx60")[0].style.cssText='color:#fff; text-shadow: black 0.1em 0.1em 0.2em; background:url(images/modelmenu_cur.jpg) no-repeat bottom center; padding-bottom: 6px;'` А для onMouseOut .cssText='' (оставить последние кавычки пустыми) Тут, честно говоря, довольно большой javascript код получается. Если вам это не мешает, можете так оставить. Но, как вариант, можете почитать про jQuery. Это библиотека javascript, чтобы упростить его использование. В интернете много документации, примеров и статей по нему. МОЙ САЙТ Компьютер позволяет решать все те проблемы, которые до появления компьютера не существовали.

02.04.2011, 07:50	#2
lukovoy Регистрация: 01.04.2011 Сообщений: 9	Хотел добавить. Это верстка дивами. Каждая модель авто (изображение) находится в отдельном блоке див.

03.04.2011, 00:15	#3
xDyPx Форумчанин Регистрация: 21.01.2009 Сообщений: 148	тут без javascript не обойтись. нужно код смотреть МОЙ САЙТ Компьютер позволяет решать все те проблемы, которые до появления компьютера не существовали.

03.04.2011, 03:41	#4
lukovoy Регистрация: 01.04.2011 Сообщений: 9	Вот хтмл одной из моделей <div class="xc60"><a href="#"><img src="images/xc60.png" width="165" height="92" alt="xc60"></a></div> - картинка <ul>Кроссоверы<br /> <li class="lxc60"><a href="#">XC60</a></li></ul> Ну и css этих элементов .xc60 {width:165px; height:92px; position:relative; left:15px; z-index:1;} #model ul li {float: left; height: 14px; margin-top: 5px; text-align:center; padding: 0 15px 30px; color:#333; font: 14px Tahoma, Geneva, sans-serif; font-weight:bold; color: #333333; text-transform:uppercase; } #model ul li a{text-decoration:none; color: #333;} #model ul li a:hover {color:#fff; text-shadow: black 0.1em 0.1em 0.2em; background:url(images/modelmenu_cur.jpg) no-repeat bottom center; padding-bottom: 6px;} А вот изображение самой шапки (часть только)

03.04.2011, 14:41	#8
lukovoy Регистрация: 01.04.2011 Сообщений: 9	Спасибо большое за детальный ответ. Постараюсь разобраться. Спасибо, что приделили мне столько внимания.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Связанные таблицы	aimk0	БД в Delphi	10	01.11.2010 22:56
связанные списки	Proger_1	Общие вопросы C/C++	1	28.05.2010 22:11
связанные selectы	sozonya	JavaScript, Ajax	0	18.05.2010 00:50
Связанные поля	Fezdipekla	Microsoft Office Access	1	20.04.2010 18:29
Связанные списки	Fezdipekla	Microsoft Office Access	3	02.04.2010 22:07