ansaurus

Question

Multiple or separate rollovers using Jquery. Mock up for a better explanation.

Answer 1

A:

There's no simple answer to such a huge question. What you're asking is "how do I make this web page?"

I think that question you looked at earlier sets you on the right track. Your best bet is to use the .css() or .addClass() and .removeClass() methods. For example, if your first nav button has id="nav1" and you want it to highlight buttons 1, 4, and 5, the first thing you would do is:

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

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

Then in your css, define what you want .circleHighlight to look like. If you want to change the href for each of those circles (to put in links and text, etc.) dynamically, you could add a line like this to that first function:

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

Also, if you want to clean things up a bit, you could create an array for each nav button on the bottom that holds which circles that button should access. Then you could also create an array of the nav buttons. That way, you could use a for loop (or .each() in jquery) to make those changes to all of the nav buttons, and in turn all of the circles that each individual nav button should affect.

Does that help at all? If you need more specific help, you might want to ask a specific question. Or just try things out and mess with the jquery until it works -- that's how i've been learning.enter code here

Josh 2010-06-29 23:22:37

First and foremost thanks for the detailed help. I truly appreciate it. I really don't want to come off as one of those, "hey how do I do this" guys. I thought creating the mockup would help people. Trust me I've been spending hours playing with Jquery trying to get this to work. I'm updating my question now with the code I'm using right now. The only thing I can not figure out is the disjointed rollover. Please take a look if you have a minute. Thanks again.

ESB 2010-06-30 04:17:09

Correct me if I'm wrong, damn good chance I am, but with the code you kindly wrote it's not possible to use CSS to change the img src right? I'm much better with CSS than Jquery or Javascript, but TMK there's no way to 'swap' the src of an img tag by adding a different CSS class. Am I totally wrong?

ESB 2010-06-30 04:24:02

True, you can't use css to change the src of an img tag. However, there are two other options that come to mind -- either use the background-image property in your css (you could have different classes with different background images, each representing a different state, then use the jquery .addClass and .removeClass to toggle the class), OR use the jquery .attr to change the src of the img tag (similar to the example of changing the href value for button1 in my first response).$("#imgID").attr('src', '/images/rolloverState.png');This would probably suit your needs best.

Josh 2010-06-30 07:44:55

Answer 2

A:

My first approach would be to assign the circles to empty css classes just to group them and select them with jquery. For example, circles 1, 4 and 5 could have the class "nav1_links". Remember that you can assign multiple classes to an element, which is great if you want to have one link be under the umbrellas of two nav links, e.g. nav 1 highlights 1, 4 and 5 and nav 2 highlights 1, 2 and 3 -- so circle 1 would have the attribute class="nav1_links nav2_links". Then you could use jquery to access the appropriate circles:

$("#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
});

If the image for each circle is different, however, this gets a bit more tricky. The easiest way to handle this (though not the cleanest) would be to just repeat that line for each circle involved, but replace the class name ".nav1_links" with the id name of the individual circle ("#circleID").

The more flexible (and complex) way would be to put all possible src values for one circle into an array, then use .each() to iterate through all the relevant circles for the currently active nav link and apply the appropriate src from the array of srcs for each circle. But arrays and for loops are a whole separate question, so if that doesn't make sense, then just stick with the easy route for now (I'm not sure how much scripting experience you have).

Does that answer your question? I admit I'm a bit confused about your notion of disjointed/secondary rollovers.

Josh 2010-06-30 08:18:13

Thanks so much. I have it all working now. See this link for a test page:http://www.ericsbowman.com/storage/cwac/index_test.htmlIsn't this a disjointed rollover? I'm hovering over the buttons in the horizontal nav bar, and swapping imgs for the circle buttons above it. The circle buttons have two over states. One for when you hover them individually, and one for hovering over the buttons in the nav bar. Please correct me if I'm wrong. I'm trying to learn Jquery and I admit that I'm a newbie on this. I'm a designer learning code, that side of my brain has a few cobwebs. :)

ESB 2010-06-30 18:32:44

No problem :) I see what you mean now about the rollovers. Your site looks fantastic! Great job. I'm new to jquery too, and although I know html/css pretty well and have some design experience, I never really developed the design skills I would like to have. And most of my time in web development is spent on front-end coding pages that are pre-designed for me, so I'm getting plenty of practice with scripting. BTW, you should add some snippets of your finished code onto here and mark your question as answered, either by me or by your own answer.

Josh 2010-06-30 19:03:36

PS - I'm trying some arrays and loops to tighten up your code, but I ran out of time for now and will have to come back to it.

Josh 2010-06-30 19:45:41

No problem. Thanks for the kind words. I'm going to be real happy with this eventually. :) I'm a perfectionist so it will be a while before I hit that happy place.I set your snippet as the answer to this. Thanks again.

ESB 2010-06-30 23:44:45

ansaurus

tags:

views:

answers:

Multiple or separate rollovers using Jquery. Mock up for a better explanation.

related questions