Question

184

How to use jQuery UI icons without buttons?

rated 0 times [ 186] [ 2] / answers: 1 / hits: 37626 / 13 Years ago, sun, november 6, 2011, 12:00:00

jQuery UI comes with some good icons.
How can I use them without buttons? Let's say how to create link with plus sign and to react on hover and click by changing icons?
Here is the demo just with icon added.

Upd 1:
On hover icon should change the color from grey to black (please see it here). In my demo it is black from the beginning.

Upd 2:
Here is almost what I need - http://jsfiddle.net/and7ey/gZQzt/6/ - but without that background rectangle, I need just plus sign.

Upd 3:
Looks like it would be better not to use standard jQuery UI styles, but to refer directly to the images, but I don't know how use it.

Seems I need to define CSS like:

width: 16px; 

height: 16px; 

background-image: url(images/ui-icons_222222_256x240.png);

background-position: -32px -128px;

Positions can be easily found at jquery.ui.theme.css file.
But how should I:

define correct background-image url?

modify CSS to react on click, hover?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaileya

Add To Favorites

Follow

Total Points: 168

Total Questions: 95

Total Answers: 72

Location: Antigua and Barbuda

Member since Sat, Apr 24, 2021

3 Years ago

kaileya questions

1 unable to scroll in scrollView

Sun, Aug 16, 20, 00:00, 4 Years ago

1 React | JavaScript : Need to compare two objects

Thu, Jun 25, 20, 00:00, 4 Years ago

1 Override Vue's mixin method

Wed, Jul 3, 19, 00:00, 5 Years ago

1 how to set and get environment variable in node js?

Tue, Apr 23, 19, 00:00, 5 Years ago

1 Create a rounded bar graph with Angular and chartJS

Wed, Feb 20, 19, 00:00, 5 Years ago

View All

answered 13 Years ago tierra · Accepted Answer

Finally, I've decided just to use jQuery UI's image files - How to use one icon from different image files?:

a:link,a:visited { /* for regular non-hovered, non-active link styles */

    width: 16px;  

    height: 16px;

    background-image:

    url(images/defaultStateImage.png); 

    background-position: -32px -128px;

}



a:hover { /* for hover/mouse-over styles */

    url(images/hoverStateImage.png); 

    background-position: -32px -128px;

}



a:active { /* for click/mouse-down state styles */

    url(images/clickStateImage.png); 

    background-position: -32px -128px;

}