28 replies [Last post]
sanch3x
Offline
Enthusiast
Last seen: 10 years 3 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

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?

Seb

"Don't worry about Blank let me worry about Blank"

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

"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.

Verschwindende wrote:
  • CSS doesn't make pies

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

"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?

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 20 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

"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(Drunk. 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. "

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

"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>

Verschwindende wrote:
  • CSS doesn't make pies

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 20 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

&quot;back-to-top&quot; 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(Drunk 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.

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

&quot;back-to-top&quot; 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.

Verschwindende wrote:
  • CSS doesn't make pies

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 20 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

&quot;back-to-top&quot; 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

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

&quot;back-to-top&quot; button with a roll over affect

Erm, that's not it Tongue

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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 20 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

&quot;back-to-top&quot; button with a roll over affect

Oops, wrong Fox! Dang this mouse anyways!

How's this Fox instead?

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

&quot;back-to-top&quot; 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?

Verschwindende wrote:
  • CSS doesn't make pies

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 20 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

&quot;back-to-top&quot; 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 Cool

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

&quot;back-to-top&quot; 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.

Verschwindende wrote:
  • CSS doesn't make pies

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 20 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

&quot;back-to-top&quot; 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>

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

&quot;back-to-top&quot; 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? Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 20 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

&quot;back-to-top&quot; 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?

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

&quot;back-to-top&quot; 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;}

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 20 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

&quot;back-to-top&quot; 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>

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

sanch3x
Offline
Enthusiast
Last seen: 10 years 3 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

&quot;back-to-top&quot; 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 Tongue

Seb

"Don't worry about Blank let me worry about Blank"

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

&quot;back-to-top&quot; button with a roll over affect

And so, the circle of life is complete Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 20 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

&quot;back-to-top&quot; 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.

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

&quot;back-to-top&quot; 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.

sanch3x
Offline
Enthusiast
Last seen: 10 years 3 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

&quot;back-to-top&quot; 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.

Seb

"Don't worry about Blank let me worry about Blank"

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 20 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

&quot;back-to-top&quot; button with a roll over affect

Wolf, I tried in Mozilla Firefox.

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 20 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

&quot;back-to-top&quot; 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

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

&quot;back-to-top&quot; 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.

Verschwindende wrote:
  • CSS doesn't make pies

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 20 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

&quot;back-to-top&quot; 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?

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 9 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

&quot;back-to-top&quot; 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.

Verschwindende wrote:
  • CSS doesn't make pies

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 20 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

&quot;back-to-top&quot; 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

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop