11 replies to this topic

[omg_stfu]

Aside from the CSS rollovers, the site works perfectly fine. I did a different version of the site using CSS rollovers (JavaScript rollovers was too slow) and in Firefox there are no rollover images, no image under the rollover, and no link. In IE7 it actually doesn't work either if I use a doctype.

Any help would be greatly appreciated. Here is the code:

[B]stylesheet:[/B]
 * {margin:0; padding:0;}

#button_chalk,
#button_chalk a
{
  position: relative;
  width: 40px;
  height: 40px;
  background: url("http://forum.codecall.net/images/button1.gif");

}

#button_chalk:hover
{
  position: relative;
  background: url("http://forum.codecall.net/images/button1.gif");
}

#button_chalk span
{
  position: relative;

}

[B]HTML[/B]

<a id="button_chalk" href="2.php?a=2">
             <span onclick="clickednext()"></span>
            <span></span>
        </a>


and right before the </body> tag I have:

<script type="text/javascript">button1 = new Image(40,40)
button1.src="http://forum.codecall.net/images/button1.gif"
button2= new Image(40,40)
button2.src="http://forum.codecall.net/images/button2.gif"
</script>

Don't worry about the clickednext() thing, it doesn't really do much. It's there to load a function when the user clicks the button. It still doesn't work when I remove that line, so it isn't that. :/

Edited by WingedPanther, 07 February 2009 - 10:31 AM.
add c

[WingedPanther]

Is there a reason you aren't using the onhover property anywhere?

[Xav]

Because he is using the pseudo-class "hover" in CSS:

#button_chalk a
{
  position: relative;
  width: 40px;
  height: 40px;
  background: url("http://forum.codecall.net/images/button1.gif");

}

#button_chalk:hover
{
  position: relative;
  background: url("http://forum.codecall.net/images/button1.gif");
}

Look at the code. Both times you are telling the browser to load button1, not button2. Change the second one to button2.

[omg_stfu]

That must've been when I was trying to make it work. Well I checked and my stylesheet isn't like that anymore. It still does the same thing as before..

[omg_stfu]

nevermind, i rewrote my css. it was a combination of not using
display:block
and because it was being displayed in a table I think.

[Xav]

Um, OK, if it worked then fine. :)

[MrGamma]

Make your image background twice as large... double the image up so the top half the image also exists in the bottom half in it's rollover state...


Example:


Image was: width:50px height:50px

Image becomes: width:50px height:100px



By doing this you can then skip all javascript and resort to the background-position:

a{background:url(../Image/background.gif);}

a:hover{background-position:-50px 0px;}

or

a{background:url(../Image/background.gif) 0px 0px no-repeat;}

a:hover{background:url(../Image/background.gif) -50px 0px no-repeat;}

When you only use one image... it will prevent many browsers from flickering inbetwen states... some browsers will not cache both images up front. So make it one image only...

[Xav]

This method also comes with the speed benefits associated with using less image files.

In case you are wondering, that type of image is called a "CSS Sprite".

[MrGamma]

That's interesting... I have come to know sprites as video game objects on screen.

While I have never programmed any Nintendo Games, it was always said that Mario was a sprite and when reading video game books reviewing the latest specs on the next best video game console they would always put an upper limit on how many sprites a computer could process at once.

I wonder if it was a limitation on the raw processing power or instead a memory restriction as this "sprite" term seems to be related to a pre-loaded, encapsulated object of sorts.

Is there any connection? Or is this rant entirely way off base?

[Orjan]

Yes. A Sprite is usually an preloaded image that you move around for the purpose of "real-time animation" like in a video game or at this, on the roll over...

EDIT: it is/was a very famous feature on the commodore amiga home computer in the 80's and 90's by the way, as they had hardware support for sprites.

[Xav]

Orjan is correct. An image sprite and a CSS sprite work in the same principle of animation.

A possible downside of the CSS sprite is that if the margins are not exactly correct, or it has not been designed as cross-browser, you may end up seeing two or half an image instead of one whole image.

[panatta]

I use this simple CSS method for rollovers:

In CSS:

img.hover {display:none;border:0;}

A:hover img.hover {display:inline;}

A:hover img.nohover {display:none;}

In HTML:

<A HREF="#">

<img src="button1.gif" class="nohover" border=0>

<img src="button2.gif" class="hover" border=0>

</A>

:thumbup: