good case of trying to add a bunch of script when simple css works.
Spriting the menu images into one (with or without the text included on
each part of image), adding a :hover in css avoids an unnecessary
server request for another image and works if scripting disabled
junk.mail...@gmail.com wrote:
Hi Chris
My suggestion to your problem will involve a few changes to your
structure, but I don't think they should be too bad for you to pull
off.
Since the texts in your nav don't change on rollover, I would make
them a separate image all together. Then you could make just 2
different background images of the light bulb. One for the on state
and one for the off state. This way you can set up 2 classes in your
css, something like:
.navBulb{background-image: url(/images/bulb_off.gif);}
.navBulbOn{background-image: url(/images/bulb_on.gif);}
That way you can assign the .navBulb class to all 4 of them to start
with, and then just addClass('navBulbOn') and removeClass('navBulb')
as needed on hover and click events.
The other thing I've done that might work even easier for you would be
oonce again to separate out the text into a different image, and then
make one background image that includes both states (bulb on and bulb
off) and then on hover or click events you would just need to change
the position of the background to show/hide the right portion of the
background image.
I hope this helps.
Marty
On Mar 7, 11:27 pm, zeckdude <zeckd...@gmail.com> wrote:
Hi,
I am having some issues with my site. I have a main Nav with four links that
load in 4 different sections.
You can see the page I am working on here:http://idea-palette.com/official/newofficialsite4.htmlhttp://idea-palette.com/official/newofficialsite4.html
What I am trying to do is, when a user clicks on another Main Nav button,
such as 'Web Projects', the background-image changes to another image that
shows the lightbulb being on. I also want it to change back the
background-image for any link that currently has the light on, so that it
seems the light is on for whatever page the user visits.
Here is my basic html layout that pertains:
<body>
<div id="container">
<div id="header">
<div id="nav">
<li>
anchor tag
span tag
Each of the links are called 'printsectbtn', 'websectbtn', and so on. Each
of the default background-images is called 'print_off.png', 'web_off.png',
and so on. Each of the background images that show up when a user clicks
that link are called 'print_on.png', 'web_on.png', and so on.
I have started all their names with either 'print', 'web', 'mot', or 'int'
so that I could make it dynamic and simply erase some letters from the
clicked div's name and then add some others at the end.
Here is my jquery that pertains to this issue:
$(function(){
$('#nav li a').click(function(){
var clickedLinkId = $(this).attr('id'); //This is the ID of the
Main Nav Link that was clicked
var picOnLocation = 'images/' + clickedLinkId - 'sectbtn' + '_on' +
'.png'; //This is the location of the new background image once the user
clicks a button
var picOnUrl = 'url(' + picOnLocation + ')'; //This combines the
background image location and URL Line
$('#' + clickedLinkId + '
span').css({"background-image":picOnUrl}); //This changes the background
image of the span of the currently clicked link.
return false;
});
});
Basically, what I am trying to do above is to:
1) Get the ID of the clicked link. I called this var ClickedLinkId.
2) Erase the word 'sectbtn' from the end of the ID, so that it just reads as
'print' or 'web' for example
3) Add 'images/' before the word and '_on.png' after the word, so that it is
the location of the new background Image that shows up after the user clicks
on a link. I called this var picOnLocation.
4) Combine the new background Image location(picOnLocation) and URL line. I
called this var picOnUrl.
5) Change the css of the clicked Link's span to show up as the new
background image as specified by picOnUrl.
What I am using does work as I can see the current background disappear, but
no new background loads in. Also, when I try this: var picOnUrl =
"url('images/web_on.png')"; ,it works fine, so I think I may have an issue
with it not being able to find the background image file or perhaps my
concatenation is incorrect.
Here's my folder structure if it helps:
newofficialdesign4.html
IMAGES
- print_on.png
- web_on.png
- mot_on.png
- int_on.png
I know this is a really long post, but I am really hoping someone can help
me, so I included all the specifics. Please let me know if there are any
other questions that I can answer to help you help me.
Thanks in advance!
-Chris
--
View this message in context:http://www.nabble.com/Need-Help-with-changing-css-on-an-object-tp2239...
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
|
