JQuery инструменты - вкладки наведения мыши - добавление ссылки

Question

Я люблю этот инструмент, чтобы показать текст при перемещении мыши над пикс:

http://flowplayer.org/tools/demos/tabs/mouseover.htm

Теперь я пытаюсь открыть ссылку, когда один из пикс нажата мышкой. Я попробовал этот путь:

original: <'img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" />' 

adding link: <'a title="Mylink" href="http://mylink.com" target="_blank"><'img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" /></a>'' 

[ 'вставлены, чтобы показать источник только.]

С помощью этой ссылки при наведении курсора мыши больше не работает. Кто-нибудь знает, что там делать?

Заранее благодарим за помощь!

Answer 1

Я не использовал этот инструмент jQuery. Но я думаю, что было бы, что инструмент требует структуры

<div id="products"> 
    <img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" /> 
    <img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" /> 
    <img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" /> 
</div> 

Инструмент будет выглядеть для IMG внутри DIV (опять же, я не видел код, так что это предположение). Множество плагинов jQuery требует определенного формата.

Я хотел бы сделать это:

<div id="products"> 

     <img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" id="image1" /> 
     <img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" id="image2" /> 
     <img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" id="image3" /> 
    </div> 

Добавление идентификаторов для каждого тега. Я пробовал, и, похоже, он не сломал плагин. (Простите страшное соглашение об именовании :))

Затем связать щелчок изображений для редиректа с помощью JavaScript:

$("#image1").click(function() { 
    window.location = 'http://www.google.co.za'; 
}); 

$("#image2").click(function() { 
    window.location = 'http://www.google.co.za/somwhereelse'; 
}); 

$("#image3").click(function() { 
    window.location = 'http://www.google.co.za/helloworld'; 
}); 

Надежда, что помогает

EDIT

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

В зависимости от того, что происходит, тот, кто работает, скрывает все изображения, кроме первого, используя встроенные стили.

Так что нам нужно удалить этот стиль с первого изображения и добавить его ко второму изображению. Помните, что это должно происходить только один раз при загрузке страницы, поэтому вам нужно добавить его в функцию document.ready.

Важно, чтобы это происходило только один раз, а затем функциональность FlowPlayer обычно срабатывает при наведении курсора мыши.

Answer 2

Я думаю, вам нужно забыть этот плагин, потому что он на самом деле не предназначен для того, чтобы делать то, что вы хотите. Этот плагин предназначен для создания вкладок, и то, что вы показываете, фактически является вкладками в другой куртке. И вкладки не открывают URL-адреса, они отображают содержимое их панели.

Что вам нужно, это какая-то подсказка. Ниже приведен список всплывающих подсказок: http://speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/

Answer 3

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

<span><a href="http://yourlink"><IMG src="./jQuery Tools standalone demo_files/free.png" alt="Free version" class=""></a></span> 

Вы должны должны придерживаться все изображения в пролете, так что структура такая же, даже если вы не связать все изображения.

Преимущество этого в том, что он будет проиндексирован как реальная ссылка, подход к использованию JavaScript не будет.

Answer 4

ПРОСТОЕ решение: обязательно все изображения завернуты в <a>. то есть:

<div id="products"> 
    <a href="#"><img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" /></a> 
    <a href="#"><img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" /></a> 
    <a href="#"><img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" /></a> 
</div> 

Это прекрасно работает; Я просто попробовал. Я предполагаю, что вкладки инструментов jQuery Tools работают только в том случае, если все дочерние элементы указанного вами контейнера имеют один и тот же тип.

EDIT: да, похоже, он работает только с первым типом тега, с которым он сталкивается. например если вы положите первые две ссылки в <a>, а не на третье, мышь работает только для первых двух.