Avatar billede malte Nybegynder
28. april 2012 - 10:36 Der er 3 kommentarer og
1 løsning

CSS Sprites

Hvordan kan jeg skrive denne kode om så mine flag i toppen af denne side bliver "Combined images into CSS sprites"

Jeg vil også gerne have at det kun er disse billeder der bliver gennemsigtige ved hoover og ikke som ALLE billeder på websitet.

<div style="position: absolute;
z-index:999;
              left: 45%;
              top: 10px;
              width: 350px;
              height: 30px;
              border-top: 0px solid;
              border-left: 0px solid ">
<a href="http://www.cenaps.eu/en/"><img src="http://www.cenaps.eu/wp-content/uploads/2012/04/engelsk.png" alt="en"  /></a>
                        <a href="http://www.cenaps.eu/es/"><img src="http://www.cenaps.eu/wp-content/uploads/2012/04/spansk.png" alt="es"  /></a></li>
                        <a href="http://www.cenaps.eu/de/"><img src="http://www.cenaps.eu/wp-content/uploads/2012/04/tysk.png" alt="de"  /></a>
                        <a href="http://www.cenaps.eu/" class="lang_sel_sel"><img src="http://www.cenaps.eu/wp-content/uploads/2012/04/dansk.png" alt="da"  /></a>
                        <a href="http://www.cenaps.eu/nl/"><img src="http://www.cenaps.eu/wp-content/uploads/2012/04/holland.png" alt="nl"  /></a>
                        <a href="http://www.cenaps.eu/sv/"><img src="http://www.cenaps.eu/wp-content/uploads/2012/04/svensk.png" alt="sv"  /></a>
</div>
</div>
<style type="text/css">
img
{
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
Avatar billede lilleweb Nybegynder
28. april 2012 - 12:15 #1
Nu ved jeg ikke lige hvilken side du mener ..... mangler et link
Men jeg kan varmt anbefale SpriteRight - http://spriterightapp.com - hvis du programmere på en Mac

Her får du al css foræret når du laver dit sprite
Avatar billede rolchau Nybegynder
30. april 2012 - 14:12 #2
Først gemmer du alle dine flag png'er i en samlet png fil, gerne med 10px mellemrum imellem hvert billede, placer dem horizontalt (For mit eksempels skyld). Gem den nye png som f.eks. sprites.png.

Smid en passende class på hvert af dine <a>'er, f.eks. eng for engelsk flag, ger for tysk:

<a href="" class="eng"></a>
<a href="" class="ger"></a>
... osv.

Herefter skal du have positionerne for de forskellige flag ud af sprites.png - hertil kan du bruge spritecow.com - eller også må du manuelt sidde med dit billedebehandlingsprogram og få noteret pixels ned. Det er ikke så voldsomt her, da alle flag er 50px bredde og med 10px mellemrum i mellem hver er det jo bare: 0, 60px, 120px, 180px osv at X positionen er. Y er altid 32px (Flagenes højde).

Og nu kan du plotte positionerne til CSS'en, start med en generel regel for alle flag, der sætter størrelse mm.:

.eng, .spa, .ger (osv) {
  width: 50px;
  height: 32px;
  float: left; /* Får at få dem til linje - eller display: inline-block, smag og behag */
  margin-right: 10px; /* Lidt luft imellem flagene */
  background: transparent url(sprites.png) 0 0 no-repeat;
}

Bagefter skal positionerne for de enkelte flag sættes op:

.ger {
  background-position: -60px 0;
}
.spa {
  background-position: -120px 0;
}

und so weiter.

Dit spørgsmål til hover forstår jeg simpelthen ikke noget af.
Avatar billede malte Nybegynder
18. maj 2012 - 22:24 #3
Tak for svar ;-) vil du have point?
Avatar billede rolchau Nybegynder
19. maj 2012 - 22:59 #4
Np ;)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester