When would you like the glow to be applied to the image – on hover?
On hover and simultaneously underline some text in a ordered list.
I think that an image-replacement technique would be the best solution, perhaps by using CSS sprites.
I don’t think that you’ll find any web-based solution that can automatically apply a stroke to the transparent edging of an image.
I’ll have to use CSS sprites. How can I have a glow on one image and at the same time underline some text, in a ordered list? Regardless if either is selected ?
Here’s an example of CSS sprites: http://css-tricks.com/examples/CSS-Sprites/Example1After/
Here is detailed information on CSS sprites and how to achieve them for yourself.
Now that we’ve confirmed that JavaScript won’t be useful for you to achieve this, I’m moving this thread over to the CSS forum.
I suppose I’ll need two css sprites one for the glow the other for the underline below text ?
you can put the glow and underline images all on the one sprite if you want - it’s up to you.
The glow and underline will be in different locations on the page.
what difference does that make to anything that’s already been posted?
The glow will be on one part of the page and the underline on another. That means I’d have to have a HUGE image sprite, correct ?
==============={GLOW HERE}
======================
S P A C E
===========================
=========================================================== {UNDERLINE HERE}
Incorrect. The underline is just a normal part of a link hover, which requires no graphic effect at all.
I don’t want the text to be an anchor. Just underlined at the same time the image has a sprite on it.
If you can do that with CSS, I sure would like to know.
that’s not a problem. You can do it with or without an anchor, and the anchor doesn’t have to actually link to anywhere either if you don’t want it to.
I create my sprite, then make my text underlined. What would the rule look like ?
it depends on what your html actually is and whether you are using js to change any styles.
Post the code you have so far.
Not using JS to change any styles. It’s just a <ol> linked with a class div, pretty simple. Can you show an example, hopefully I can break it down ? I get how sprites work but I want to know how the rule would work !
Knowing how you plan to implement the effect is likely to be an important part of deciding how to construct it. That is why you are being asked to provide HTML markup. What works in one situation may not work for all.
Is the effect a one-off or do you plan to have multiple images that will cause underlining on multiple list items?
Okay, I’ll suggest this as a starting point.
On hover of the link the nested text changes color.
If the cat was a transparent png, and cat-glow.png had the glow this would work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hovercat</title>
<style>
a:hover {
color: red;
background: url('cat-glow.png');
}
</style>
</head>
<body>
<p id="cat">
<a href="#">
<img src="http://i233.photobucket.com/albums/ee234/TranscendentOne/My%20Pictures/HoverCat.jpg">
<br>
Link
</a>
</p>
</body>
</html>
If the link is in a completely separate part of the page to the image then you will need to use javascript to add a class to the link when the image is hovered.
Hope it helps 
There are also CSS solutions where CSS positioning is used to move the image to where it’s supposed to be, which allows the image and the link to be in completely different parts of the page.