Расширяемое меню ссылок SharePoint при наведении мыши на изображение с помощью Jquery - PullRequest
0 голосов
/ 17 октября 2011

У меня проблема с созданием меню при наведении курсора на изображение в веб-части редактора контента.

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

Это мой HTML-код для веб-части редактора контента, содержащей изображения:

<table _moz_resizing="true">
<tbody>
<tr>
<td>
<br/>
<center><a href="/sites/XXXX/AllItems.aspx"><img src="/sites/XXXX/SiteAssets/Link2.png" _moz_resizing="true" alt=""/></a></center>
</td>
<td>
<br/>
<center><a href="/sites/XXXX/Lists/XXXXX/AllItems.aspx"><img src="/sites/XXX/SiteAssets/Link3.png" _moz_resizing="true" alt=""/></a></center>
</td>
</tr>
</tbody>
</table>

Эти два изображения расположены рядом. Теперь я хотел бы включить эффект, который я отметил выше, как показано по этой ссылке: http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

(Только эффект наведения мыши и, по сути, только для одного «заголовка» (изображения), поскольку у меня будет только три ссылки в подменю.)

Я никогда не выучил javascript, а просто посмотрел ресурсы, которые нашел в Интернете, и включил их в страницы. Может кто-нибудь подсказать, как бы я структурировал HTML и Jquery с помощью соответствующих тегов DIV, чтобы это работало? Любая помощь будет принята с благодарностью.

1 Ответ

1 голос
/ 17 октября 2011

Вместо тегов img я поместил бы div в мой html-код, и изображения стали бы фоном моих div-ов.Я бы поместил тег выбора в каждый элемент div с отображением: ни один по умолчанию для тегов выбора внутри элементов div.У моих элементов div будет атрибут класса, и при наведении курсора мыши я изменю отображение выбора в элементе div, где был вызван указатель мыши.Когда произойдет отключение мыши, я вернусь обратно к отображению внутреннего div.Попробуйте поискать в Google для получения дополнительной информации.

Надеюсь, это поможет

...