Fri, 2005-06-10 19:03
Hey,
I'd like to make an image change from a purple arrow to a green arrow when focused on. I was following an example where you play with the bg image position but this only works if you have text (I could probably use a transparent img but I don't like that idea).
I would also like to avoid javascript to keep it accessible. Is this possible?
Fri, 2005-06-10 20:00
#1
"back-to-top" button with a roll over affect
What do you mean, avoid text?
You could give the anchor a class, display: block, width of half the image, height equal to the image, and it shoudl work.
Fri, 2005-06-10 21:02
#2
"back-to-top" button with a roll over affect
why not use text (for unstyled views) with a negative text-indent to move it off the screen?
Sat, 2005-06-11 14:36
#3
"back-to-top" button with a roll over affect
Sanch, thank you for the inspiration to play with this puzzle. I learned alot in the process.
By "accessible", I'm assuming you mean to those who can't see the image(
. Is that correct?
Does this come close?
http//beta-154104.server1.dotnetsandbox.net/ArrowRollover.aspx
OahuPineapple, please take a moment and show the code you have in mind? I'd like to try your idea, but it's kinda opaque to me ) "You could give the anchor a class, display block, width of half the image, height equal to the image, and it shoudl work. "
Sat, 2005-06-11 14:54
#4
"back-to-top" button with a roll over affect
a.linktotop {
display: block;
height: 23px; /* equal to image height */
width: 22px; /* Half image width */
background: url(arrow.gif) no-repeat 0 0;
}
a.linktotop:hover {
background-position: 100% 0; /* This moves the image over, eg a hover effect */
}
HTML:
<a class="linktotop" href="blah.html#top"></a>
Thu, 2005-06-16 18:20
#5
"back-to-top" button with a roll over affect
Five days later, I returned to Mr. Pineapplehead's suggestion about defining things as half of what they really are. His suggestion does work very well. I don't understand why the FireFox didn't obey these commands, though.
In Explorer and in Firefox, using the arrow( image as Sanch provided, together with tph's recommendation worked well, and rotating the arrow 180 degrees worked too (with the colors going opposite) but it didn't work very well when the arrow image was rotated 90 degrees.
I expect there are 1000+ css creator posts having to do with Firefox's failure in this regard, but my search-skills must be off - because I haven't yet selected the right search words to find a definitive answer.
Fri, 2005-06-17 08:30
#6
"back-to-top" button with a roll over affect
Firefox doesn't fail with something as simple as this - perhaps you could explain what you meant by fail?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
a.linktotop {
display: block;
height: 23px; /* equal to image height */
width: 22px; /* Half image width */
background: url(arrow.gif) no-repeat 0 0;
}
a.linktotop:hover {
background-position: 100% 0; /* This moves the image over, eg a hover effect */
}
-->
</style>
</head>
<body>
<a class="linktotop" href="blah.html#top"></a>
</body>
</html>
works perfectly for me.
Fri, 2005-06-17 15:37
#7
"back-to-top" button with a roll over affect
Thanks TPH, the Fox displays your arrow over there<===to the left. How come? :?:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
text-align: center;
}
<!--
a.linktotop {
display: block;
height: 23px; /* equal to image height */
width: 22px; /* Half image width */
background: url(arrowup.gif) no-repeat 0 0;
}
a.linktotop:hover {
background-position: 100% 0; /* This moves the image over, eg a hover effect */
}
-->
</style></head><body>
<a class="linktotop" href="blah.html#top"></a>
A Centered Arrow That Changes Colors
</body></html>
Picture of the Fox's display attached
Fri, 2005-06-17 16:30
#8
"back-to-top" button with a roll over affect
Erm, that's not it 
Mine displays it there because there is no divs, no centering applied, or no margins/padding zeroed. It should display there, that's the default 
Fri, 2005-06-17 17:01
#9
"back-to-top" button with a roll over affect
Oops, wrong Fox! Dang this mouse anyways!
How's this Fox instead?
Fri, 2005-06-17 18:17
#10
"back-to-top" button with a roll over affect
Well, nowhere in my code did I specify that it would be in the center. Why should it?
All it is is a styled anchor.
And by the way, who is that foxy lady?
Fri, 2005-06-17 18:24
#11
"back-to-top" button with a roll over affect
Nuh-uh! You tell me how to make the firefox put its arrow in the middle! Then, we Might talk about the other 
Fri, 2005-06-17 18:29
#12
"back-to-top" button with a roll over affect
You know it was a week ago sanchex posted the original question, and he hasn't replied.
Anyways, surely putting text-align: center; in the body tag should fix it right up.
Fri, 2005-06-17 18:40
#13
"back-to-top" button with a roll over affect
Thanks - this is the exact code. Something's goofy. What gives with the Fox?
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
text-align: center;
}
<!--
a.linktotop {
display: block;
height: 23px; /* equal to image height */
width: 22px; /* Half image width */
background: url(arrowup.gif) no-repeat 0 0;
}
a.linktotop:hover {
background-position: 100% 0; /* This moves the image over, eg a hover effect */
}
-->
</style>
</head>
<body>
<a class="linktotop" href="blah.html#top"></a>
A Centered Arrow That Changes Colors
</body>
</html>
Fri, 2005-06-17 19:29
#14
"back-to-top" button with a roll over affect
The text-align: center; is a hack to center layouts in IE5, which doesn't support margin: auto; (can you see where this is going?)
adding:
a.linktotop {
display: block;
margin: auto;
height: 23px; /* equal to image height */
width: 22px; /* Half image width */
background: url(arrow.gif) no-repeat 0 0;
}
fixes it right up.
Now, who's that fox?
Sat, 2005-06-18 21:03
#15
"back-to-top" button with a roll over affect
TPH's style solution to mousing-over an image works. In this case, an arrow that changes from purple to green when hovered-over.
And on mouseout, the arrow changes back to purple.
How would you make it so that user sees the same purple arrow change to yellow, instead of green, the next time he mouses over it?
Sat, 2005-06-18 21:26
#16
"back-to-top" button with a roll over affect
make the image even wider again with the yellow colored arrow on the right. Then add this to the CSS. IE, of course, will probably botch it.
a.linktop:visited:hover {
background-position: 100% 0;}
and change a.linktop:hover to
a.linktop:hover {
background-position: 23px 0;}
Wed, 2005-06-22 20:29
#17
"back-to-top" button with a roll over affect
I tried this by tripling the image with the yellow arrow on the right; but was unsuccessful in getting it to work.
I also experimented with a text arrow character instead of a two-arrow image. And this was simple to make work with two colors. It's probably faster too.
a:link { color: purple; font-weight: 900;font-size: 80px;text-decoration: none }
a:visited { color: purple; font-weight: 900;font-size: 80px;text-decoration: none }
a:hover { color: green; font-weight: 900;font-size: 80px;background: purple; text-decoration: underline }
<body>
<a href="#nogo">↑</a>
</body>
Thu, 2005-06-23 13:43
#18
"back-to-top" button with a roll over affect
Wow guys I totally forgot about this topic >_<
I had just finished converting the site to CSS and only had the arrow left so when I told my boss, he gave me other stuff to do which included reprogramming the site's dynamic loading scripts (which took me roughly a week + the weekend since I think I posted on a friday).
I'm totally psyched that this is being looked into and I'm going to keep track
Thu, 2005-06-23 15:19
#19
"back-to-top" button with a roll over affect
And so, the circle of life is complete
Thu, 2005-06-23 16:11
#20
"back-to-top" button with a roll over affect
Sanch, welcome back!
There are still a great many opportunities with this arrow.
We still have Wolf's suggestion to work on.
According to this fellow, we can modify the DOM when your end-user hovers the text purple arrow so you can style it any way you want.
http://www.sitepoint.com/article/dhtml-utopia-modern-web-design
Are you certain you want it to be green?
We could randomize it through hundreds of colors using rand().
And since we can invoke server code from the client with a hover event
http://kb.mozillazine.org/XMLHttpRequest
we could conceivably fetch and replace at that specific spot on the page any one of thousands of arrow images with different characteristics.
Thu, 2005-06-23 16:39
#21
"back-to-top" button with a roll over affect
what did you try it in? IE won't accept double psuedo classes, so it won't work for IE - but it should in standards compliant browsers.
Thu, 2005-06-23 17:03
#22
"back-to-top" button with a roll over affect
The colours have yet to be decided, but those I had provided were the ones from the previous site. So I won't be using the rand() function but I will be look at that link you gave me.
Should the hover effect work in IE? I'm not sure if that's the pseudo class wolfcry was talking about.
Thu, 2005-06-23 18:33
#23
"back-to-top" button with a roll over affect
Wolf, I tried in Mozilla Firefox.
Thu, 2005-06-30 21:09
#24
"back-to-top" button with a roll over affect
I have a question about hover hotspots. Please see the example below. Thanks in advance.
http://beta-154104.server1.dotnetsandbox.net/IntraPageNavigationBarPrototype.aspx
Fri, 2005-07-01 08:01
#25
"back-to-top" button with a roll over affect
Unfortunately, you'd need a large image map to achieve that Tisnew.
As it is, the way to give an anchor width and height is to display it as block. THerefore, it's going to be a square, whether you want it to or not.
Fri, 2005-07-01 18:30
#26
"back-to-top" button with a roll over affect
Thanks, TPH. So far, so good. I'd like to polish it off with only css. Maybe I can position non-hover css-generated blocks over each triangle using z-index? That approach would gobble more real-estate on the screen, but if I need the space back maybe I can z-index something else over the dead space. What do you think?
Fri, 2005-07-01 19:48
#27
"back-to-top" button with a roll over affect
I really don't think it's worth it, to be honest. Just leave the whole area as hover.
Mon, 2005-07-11 18:19
#28
"back-to-top" button with a roll over affect
I tried using "AND" and "OR" text symbols. They work in the Mosaic Firefox browser; apparently because this browser includes the mathematics font-set by default. But the Internet Explorer 6.0 did not render the AND and OR symbols; apparently it doesn't include this font set by default. So, I used bullets instead. as Mr. Stu Nicholls uses extensively. Both browsers "understand" bullets.
By using styled bullets, we can overlay any hover area with a relatively inexpensive non-hoverable text character, without using z-index, and with pretty close precision.
http://beta-154104.server1.dotnetsandbox.net/IntraPageNavigationBarPrototype.aspx