[jQuery] Re: Rollover Effects instead of alternate images
it recognizes an a:hover though, so display:block and use that as the
trigger.
it's more semantically meaningful than making a div a link anyway.
On May 23, 7:04 pm, waseem sabjee waseemsab...@gmail.com wrote:
yes.
however sometimes the jquery method is needed for IE6 as IE6 won't recognize
a div:hover or li:hover
but in this situation css only works best.
On Sat, May 23, 2009 at 6:42 PM, Karl Swedberg k...@englishrules.comwrote:
The OP is asking about a very simple link rollover. Since it appears people
aren't taking RobG's advice and looking up CSS rollovers on Google, here
is a quick demonstration:
http://test.learningjquery.com/css-background-image.html
On May 22, 2009, at 2:41 PM, Andy Matthews wrote:
I believe your CSS is invalid. I don't think you can apply both a class AND
an ID in the same selector which is what #base-state.active does.
The CSS is perfectly valid, as you can see if you copy and paste it in
here:http://jigsaw.w3.org/css-validator/#validate_by_input
Now
#base-state:active might work as that's a pseudo class.
The :hover pseudo-class will work just fine. If you want the state to
change when the user tabs onto the link, then use :focus as well.
As others have already noted, this requires absolutely no jQuery/JavaScript
whatsoever.
For IE6, however, if you're getting a flash in between states, you'll want
to add the following somewhere in the head (or reference a script file
that does the same):
!--[if lte IE 6]
script type=text/javascript
try {
document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
/script
![endif]--
-Original Message-
Behalf Of ButtersRugby
Then in your css,
#base-state {background-position: 0px 0px;} // The first 0 is the X
axis position, the second is the Y
#base-state.active {background-position: 0px 30px;} // This is our second
class that we will switch to with our jquery
You probably meant to use a negative number for the y axis
on #base-state.active
#base-state.active {background-position: 0px -30px;}
$(document).ready(function() {
$(#base-state).click(function() {
$(this).toggleClass(active);
}
)
});
The OP wanted the state to change on hover, not click. Anyway, jQuery is
not necessary.
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Re: Rollover Effects instead of alternate images
Everybody, Thanks a lot for your all your replies. I appreciate it. I'll proceed with poor CSS and no JS. Cheers, Dmitriy.
[jQuery] Re: Rollover Effects instead of alternate images
The OP is asking about a very simple link rollover. Since it appears
people aren't taking RobG's advice and looking up CSS rollovers on
Google, here is a quick demonstration:
http://test.learningjquery.com/css-background-image.html
On May 22, 2009, at 2:41 PM, Andy Matthews wrote:
I believe your CSS is invalid. I don't think you can apply both a
class AND
an ID in the same selector which is what #base-state.active does.
The CSS is perfectly valid, as you can see if you copy and paste it in
here: http://jigsaw.w3.org/css-validator/#validate_by_input
Now
#base-state:active might work as that's a pseudo class.
The :hover pseudo-class will work just fine. If you want the state to
change when the user tabs onto the link, then use :focus as well.
As others have already noted, this requires absolutely no jQuery/
JavaScript whatsoever.
For IE6, however, if you're getting a flash in between states, you'll
want to add the following somewhere in the head (or reference a
script file that does the same):
!--[if lte IE 6]
script type=text/javascript
try {
document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
/script
![endif]--
-Original Message-
Behalf Of ButtersRugby
Then in your css,
#base-state {background-position: 0px 0px;} // The first 0 is the X
axis position, the second is the Y
#base-state.active {background-position: 0px 30px;} // This is our
second
class that we will switch to with our jquery
You probably meant to use a negative number for the y axis on #base-
state.active
#base-state.active {background-position: 0px -30px;}
$(document).ready(function() {
$(#base-state).click(function() {
$(this).toggleClass(active);
}
)
});
The OP wanted the state to change on hover, not click. Anyway, jQuery
is not necessary.
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Re: Rollover Effects instead of alternate images
yes.
however sometimes the jquery method is needed for IE6 as IE6 won't recognize
a div:hover or li:hover
but in this situation css only works best.
On Sat, May 23, 2009 at 6:42 PM, Karl Swedberg k...@englishrules.comwrote:
The OP is asking about a very simple link rollover. Since it appears people
aren't taking RobG's advice and looking up CSS rollovers on Google, here
is a quick demonstration:
http://test.learningjquery.com/css-background-image.html
On May 22, 2009, at 2:41 PM, Andy Matthews wrote:
I believe your CSS is invalid. I don't think you can apply both a class AND
an ID in the same selector which is what #base-state.active does.
The CSS is perfectly valid, as you can see if you copy and paste it in
here: http://jigsaw.w3.org/css-validator/#validate_by_input
Now
#base-state:active might work as that's a pseudo class.
The :hover pseudo-class will work just fine. If you want the state to
change when the user tabs onto the link, then use :focus as well.
As others have already noted, this requires absolutely no jQuery/JavaScript
whatsoever.
For IE6, however, if you're getting a flash in between states, you'll want
to add the following somewhere in the head (or reference a script file
that does the same):
!--[if lte IE 6]
script type=text/javascript
try {
document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
/script
![endif]--
-Original Message-
Behalf Of ButtersRugby
Then in your css,
#base-state {background-position: 0px 0px;} // The first 0 is the X
axis position, the second is the Y
#base-state.active {background-position: 0px 30px;} // This is our second
class that we will switch to with our jquery
You probably meant to use a negative number for the y axis
on #base-state.active
#base-state.active {background-position: 0px -30px;}
$(document).ready(function() {
$(#base-state).click(function() {
$(this).toggleClass(active);
}
)
});
The OP wanted the state to change on hover, not click. Anyway, jQuery is
not necessary.
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Re: Rollover Effects instead of alternate images
On May 22, 2:43 pm, dnagir dna...@gmail.com wrote: Hi, Just wondering if there's some effect in JQ that we can use to simulate rollover. It doesn't require any javascript at all. Usually when user hovers a mouse over a link/image it changes its src/ background to another one (for example arrow.png - arrow_o.png). Modern rollovers use a single image, not multiple images (you can use a single image for all rollovers if you want). So users feels like it is highlighted or similar. But we always must have 2 images (similar ones). No, you don't. Maybe there's some effect that can simulate this highligting/hover for user so we don't need to have 2 images. Google CSS rollovers - no script required. I understand it will never be as good as alternative image, but still. Good is subjective, but most believe that CSS rollovers are significantly better than script-driven rollovers. -- Rob
[jQuery] Re: Rollover Effects instead of alternate images
Modern rollovers use a single image, not multiple images (you can use a single image for all rollovers if you want). But we always must have 2 images (similar ones). No, you don't. Thanks a lot. I must have think about it. I understand it will never be as good as alternative image, but still. Good is subjective, but most believe that CSS rollovers are significantly better than script-driven rollovers. Yes, saying good I just ment that 2 custom buttons can be more visually better customised than automatic switching (CSS or JS - no matter how). Having 2 images we can make very custom design. Anyway, let me tell my story. I've got custom design (couple of html pages, assets) to integrate it with CMS (DNN - WTF is it doing with tables...). And it uses jQuery *JUST* to apply rollover images. Yeah, seems to be funny to use it for that matter only... I will try to change the design but not sure how I'll go with it. Cheers, Dmitriy.
[jQuery] Re: Rollover Effects instead of alternate images
you can customise a button as much as you like using a single image setup. join the two buttons together (like below) with the element they're displayed in sized to only show a single button, and modify the background position on :hover with css. ||| -- image ^ ^ show alternatively use an alpha transparent image, and modify the background-color of the element on hover if you just want a colour change. there are loads of different ways of doing it without requiring you to modify the src attrib of an image onmouseover. ;) On 22 May, 11:54, dnagir dna...@gmail.com wrote: Modern rollovers use a single image, not multiple images (you can use a single image for all rollovers if you want). But we always must have 2 images (similar ones). No, you don't. Thanks a lot. I must have think about it. I understand it will never be as good as alternative image, but still. Good is subjective, but most believe that CSS rollovers are significantly better than script-driven rollovers. Yes, saying good I just ment that 2 custom buttons can be more visually better customised than automatic switching (CSS or JS - no matter how). Having 2 images we can make very custom design. Anyway, let me tell my story. I've got custom design (couple of html pages, assets) to integrate it with CMS (DNN - WTF is it doing with tables...). And it uses jQuery *JUST* to apply rollover images. Yeah, seems to be funny to use it for that matter only... I will try to change the design but not sure how I'll go with it. Cheers, Dmitriy.
[jQuery] Re: Rollover Effects instead of alternate images
if you definitely want to do it with jquery, i reckon you'd be better
off adding a class to the button with { background-image:xyz.png !
important; } than playing with .toggle() or attr('src, 'xyz.png') or
anything like that.
[jQuery] Re: Rollover Effects instead of alternate images
Maybe you could run an effect on all images at load time to have a transparency value say 99%, then use the transparency 100% on hover? On Fri, May 22, 2009 at 2:43 PM, dnagir dna...@gmail.com wrote: Hi, Just wondering if there's some effect in JQ that we can use to simulate rollover. Usually when user hovers a mouse over a link/image it changes its src/ background to another one (for example arrow.png - arrow_o.png). So users feels like it is highlighted or similar. But we always must have 2 images (similar ones). Maybe there's some effect that can simulate this highligting/hover for user so we don't need to have 2 images. I understand it will never be as good as alternative image, but still. Thanks, Dmitriy.
[jQuery] Re: Rollover Effects instead of alternate images
I just did this the other day on a web page.
You need to make an image that has both the active, and regular state
images in it.
Then in your css,
#base-state {background-position: 0px 0px;} // The first 0 is the X
axis position, the second is the Y
#base-state.active {background-position: 0px 30px;} // This is our
second class that we will switch to with our jquery
Javascript --
$(document).ready(function() {
$(#base-state).click(function() {
$(this).toggleClass(active);
}
)
});
Just a basic run through of how it works.
I don't know how much help that is..
I probably goofed something up there, but it's the gist..
[jQuery] Re: Rollover Effects instead of alternate images
I believe your CSS is invalid. I don't think you can apply both a class AND
an ID in the same selector which is what #base-state.active does. Now
#base-state:active might work as that's a pseudo class.
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of ButtersRugby
Sent: Friday, May 22, 2009 1:25 PM
To: jQuery (English)
Subject: [jQuery] Re: Rollover Effects instead of alternate images
I just did this the other day on a web page.
You need to make an image that has both the active, and regular state images
in it.
Then in your css,
#base-state {background-position: 0px 0px;} // The first 0 is the X
axis position, the second is the Y
#base-state.active {background-position: 0px 30px;} // This is our second
class that we will switch to with our jquery
Javascript --
$(document).ready(function() {
$(#base-state).click(function() {
$(this).toggleClass(active);
}
)
});
Just a basic run through of how it works.
I don't know how much help that is..
I probably goofed something up there, but it's the gist..
[jQuery] Re: Rollover Effects instead of alternate images
SYNTAX ERROR
this is your code :
$(document).ready(function() {
$(#base-state).click(
function() {
$(this).toggleClass(active);
}
)
});
this is how it should be
$(document).ready(function() {
$(#base-state).click(
function() {
$(this).toggleClass(active);
}
);
});
you missed one ;
On Fri, May 22, 2009 at 8:41 PM, Andy Matthews li...@commadelimited.comwrote:
I believe your CSS is invalid. I don't think you can apply both a class AND
an ID in the same selector which is what #base-state.active does. Now
#base-state:active might work as that's a pseudo class.
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of ButtersRugby
Sent: Friday, May 22, 2009 1:25 PM
To: jQuery (English)
Subject: [jQuery] Re: Rollover Effects instead of alternate images
I just did this the other day on a web page.
You need to make an image that has both the active, and regular state
images
in it.
Then in your css,
#base-state {background-position: 0px 0px;} // The first 0 is the X
axis position, the second is the Y
#base-state.active {background-position: 0px 30px;} // This is our second
class that we will switch to with our jquery
Javascript --
$(document).ready(function() {
$(#base-state).click(function() {
$(this).toggleClass(active);
}
)
});
Just a basic run through of how it works.
I don't know how much help that is..
I probably goofed something up there, but it's the gist..
