Несколько или отдельные ролловеры с использованием Jquery.Макет для лучшего объяснения

Question

ОБНОВЛЕНО: 06.29.10 Вот код, который я использую до сих пор. Я очень близок после поиска по документации Jquery.

$(document).ready(function(){

//Rollovers for circle buttons

    $('img').hover(
        function(){
            this.src = this.src.replace("_org","_over");
        },
        function(){
            this.src = this.src.replace("_over","_org");
    });

//Disjointed rollover - on hover make circles use secondary hover (over2)

    $(".genBtn80").hover(
        function(){
            $(".gen80circle").src = $(".gen80circle").src.replace("_org","_over2");
        },
        function(){
            $(".gen80circle").src = $(".gen80circle").src.replace("_over2","_org");
        });
});

Так что у меня все работает в отношении ролловеров. У меня есть изображения с суффиксом _org (для нормального состояния), _over (первое состояние ролловера) и _over2 (для вторичного состояния ролловера). Я предполагаю, что моя проблема сейчас заключается в нацеливании круглых кнопок для несвязанного ролловера или вторичного ролловера. Пожалуйста, смотрите ссылку на макет.

Следующий макет - именно то, что мне нужно для навигации. Нажмите здесь для макета

ОБНОВЛЕНИЕ: 06.30.10 Работаю сейчас !!! Я не могу опубликовать более одной ссылки, хотя ... аааа! Я выложу комментарий с тестовой ссылкой.

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

$(document).ready(function(){

//Rollovers for circle buttons

    $(".circleBtn").hover(
        function(){
            this.src = this.src.replace("_org","_over");
        },
        function(){
            this.src = this.src.replace("_over","_org");
    });

//Rollovers for navigation buttons

    $(".navBtn").hover(
        function(){
            this.src = this.src.replace("_org","_over");
        },
        function(){
            this.src = this.src.replace("_over","_org");
    });

//Disjointed rollovers - use secondary rollover for circle imgs

    $(".genBtn80").hover(
        function(){
            this.src = this.src.replace("_org","_over"); 
            $("#janice_circle").attr("src", "images/janice_over2.gif"); 
            $("#sugi_circle").attr("src", "images/sugi_over2.gif"); 
    },
        function(){
            this.src = this.src.replace("_over","_org");
            $("#janice_circle").attr("src", "images/janice_org.gif"); 
            $("#sugi_circle").attr("src", "images/sugi_org.gif"); 
    });

    $(".genBtn70").hover(
        function(){
            this.src = this.src.replace("_org","_over"); 
            $("#hatsuko_circle").attr("src", "images/hatsuko_over2.gif"); 
            $("#satoko_circle").attr("src", "images/satoko_over2.gif"); 
    },
        function(){
            this.src = this.src.replace("_over","_org");
            $("#hatsuko_circle").attr("src", "images/hatsuko_org.gif"); 
            $("#satoko_circle").attr("src", "images/satoko_org.gif"); 
    });

    $(".genBtn60").hover(
        function(){
            this.src = this.src.replace("_org","_over");
            $("#noriko_circle").attr("src", "images/noriko_over2.gif");
            $("#yuki_circle").attr("src", "images/yuki_over2.gif"); 
    },
        function(){
            this.src = this.src.replace("_over","_org");
            $("#noriko_circle").attr("src", "images/noriko_org.gif"); 
            $("#yuki_circle").attr("src", "images/yuki_org.gif"); 
    });

    $(".genBtn50").hover(
        function(){
            this.src = this.src.replace("_org","_over"); 
            $("#ritsuko_circle").attr("src", "images/ritsuko_over2.gif"); 
            $("#yuka_circle").attr("src", "images/yuka_over2.gif"); 
    },
        function(){
            this.src = this.src.replace("_over","_org");
            $("#ritsuko_circle").attr("src", "images/ritsuko_org.gif"); 
            $("#yuka_circle").attr("src", "images/yuka_org.gif"); 
    });

    $(".genBtn40").hover(
        function(){
            this.src = this.src.replace("_org","_over"); 
            $("#christina_circle").attr("src", "images/christina_over2.gif"); 
            $("#chiharu_circle").attr("src", "images/chiharu_over2.gif");
    },
        function(){
            this.src = this.src.replace("_over","_org");
            $("#christina_circle").attr("src", "images/christina_org.gif"); 
            $("#chiharu_circle").attr("src", "images/chiharu_org.gif"); 
    });

    $(".genBtn30").hover(
        function(){
            this.src = this.src.replace("_org","_over"); 
            $("#haruko_circle").attr("src", "images/haruko_over2.gif"); 
            $("#shiho_circle").attr("src", "images/shiho_over2.gif"); 
    },
        function(){
            this.src = this.src.replace("_over","_org");
            $("#haruko_circle").attr("src", "images/haruko_org.gif"); 
            $("#shiho_circle").attr("src", "images/shiho_org.gif"); 
    });

    $(".genBtn20").hover(
        function(){
            this.src = this.src.replace("_org","_over"); 
            $("#aoi_circle").attr("src", "images/aoi_over2.gif"); 
            $("#tomoko_circle").attr("src", "images/tomoko_over2.gif"); 
            $("#miho_circle").attr("src", "images/miho_over2.gif"); 
    },
        function(){
            this.src = this.src.replace("_over","_org");
            $("#aoi_circle").attr("src", "images/aoi_org.gif"); 
            $("#tomoko_circle").attr("src", "images/tomoko_org.gif"); 
            $("#miho_circle").attr("src", "images/miho_org.gif"); 
    });


});

Answer 1

Мой первый подход - назначить круги пустым классам CSS, просто сгруппировать их и выбрать с помощью jquery. Например, круги 1, 4 и 5 могут иметь класс «nav1_links». Помните, что вы можете назначить несколько классов элементу, что замечательно, если вы хотите, чтобы одна ссылка находилась под зонтами двух навигационных ссылок, например, nav 1 выделяет 1, 4 и 5 и nav 2 выделяет 1, 2 и 3 - поэтому у круга 1 будет атрибут class="nav1_links nav2_links". Тогда вы можете использовать jquery для доступа к соответствующим кругам:

$("#nav1").hover(function(){
    this.src = this.src.replace("_org","_over"); // Change src for nav1
    $(".nav1_links").attr("src", "rolloverState.png"); // Change src for all corresponding circles
});

Если изображение для каждого круга отличается, это становится немного сложнее. Самый простой способ справиться с этим (хотя и не самым чистым) - просто повторить эту строку для каждого задействованного круга, но заменить имя класса ".nav1_links" на имя идентификатора отдельного круга ("#circleID"). *

Более гибкий (и сложный) способ состоял бы в том, чтобы поместить все возможные значения src для одного круга в массив, а затем использовать .each (), чтобы перебрать все соответствующие круги для текущей активной ссылки навигации и применить соответствующий src из массива srcs для каждого круга. Но массивы и циклы for - это отдельный вопрос, поэтому, если это не имеет смысла, просто придерживайтесь простого маршрута (я не уверен, какой у вас опыт написания сценариев).

Это отвечает на ваш вопрос? Я признаю, что немного озадачен вашим представлением о несвязанных / вторичных ролловерах.

Answer 2

Нет простого ответа на такой огромный вопрос. То, что вы спрашиваете, «как мне сделать эту веб-страницу?»

Я думаю, что тот вопрос, который вы рассматривали ранее, ставит вас на правильный путь. Лучше всего использовать методы .css () или .addClass () и .removeClass (). Например, если ваша первая навигационная кнопка имеет id = "nav1" и вы хотите, чтобы она выделяла кнопки 1, 4 и 5, первое, что вы должны сделать, это:

$("#nav1").mouseover(function(){
    $("#button1").addClass("circleHighlight");
    $("#button4").addClass("circleHighlight");
    $("#button5").addClass("circleHighlight");
});

$("#nav1").mouseout(function(){
    $("#button1").removeClass("circleHighlight");
    $("#button1").removeClass("circleHighlight");
    $("#button1").removeClass("circleHighlight");
});

Затем в вашем css определите, как вы хотите .circleHighlight выглядеть. Если вы хотите динамически изменять href для каждого из этих кругов (вставлять ссылки, текст и т. Д.), Вы можете добавить такую ​​строку в эту первую функцию:

$("#button1").attr('href', 'http://www.address.com');

Кроме того, если вы хотите немного навести порядок, вы можете создать массив для каждой навигационной кнопки в нижней части, который содержит информацию о том, к каким кружкам эта кнопка должна получить доступ. Затем вы также можете создать массив кнопок навигации. Таким образом, вы можете использовать цикл for (или .each () в jquery) для внесения этих изменений во все кнопки навигации и, в свою очередь, во все круги, на которые должна воздействовать каждая отдельная кнопка навигации.

Помогает ли это вообще? Если вам нужна более конкретная помощь, вы можете задать конкретный вопрос. Или просто попробуйте что-нибудь и связывайтесь с jquery, пока он не заработает - вот как я учился. enter code here