html - 6 billeder med hover - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #16295 @ 30.11.10 22:24

Indlæg senest redigeret d. 09.12.2010 23:07 af Bruger #16295

9 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 4 karma

Sorter efter stemmer Sorter efter dato

Bruger #13559 @ 01.12.10 01:25

198

Ifølge http://www.w3schools.com/tags/att_standard_class.asp er det kun Internet Explorer der understøtter classes der starter med et tal. Så du skal nok finde på et andet navn til dine bokse. Og så skal du huske at slutte dine deklarationer med et semikolon. Der ud over kan du spare lidt plads i dit css ved at samle nogle af de regler du gentager i én regel. Noget i stil med:

Kode

#boxContainer {
    width: 520px;
}

#boxContainer > div {
    width: 260px;
    height: 142px;
    background: transparent url(/images/1-hvid.jpg) top left no-repeat;
}

.one { 
    background-image: url(/images/1-hvid.jpg); 
}
.two { 
    background-image: url(/images/2-hvid.jpg); 
}
.three { 
    background-image: url(/images/3-hvid.jpg); 
}
.four { 
    background-image: url(/images/4-hvid.jpg); 
}
.five { 
    background-image: url(/images/5-hvid.jpg); 
}
.six { 
    background-image: url(/images/6-hvid.jpg); 
}

.one:hover { 
    background-image: url(/images/1-orange.jpg); 
}
.two:hover { 
    background-image: url(/images/2-orange.jpg); 
}
.three:hover { 
    background-image: url(/images/3-orange.jpg); 
}
.four:hover { 
    background-image: url(/images/4-orange.jpg); 
}
.five:hover { 
    background-image: url(/images/5-orange.jpg); 
}
.six:hover { 
    background-image: url(/images/6-orange.jpg); 
}

hvis du har lidt erfaring med billedbehandling i photoshop/gimp kan du evt. samle det normale billede og dets hoverbillede i et billede, så du kun får seks billeder "1.jpg", "2.jpg"... Så slipper du for en del af css-koden og der er halvt så mange billeder som brugeren skal downloade:

Kode

#boxContainer {
    width: 520px;
}

#boxContainer > div {
    width: 260px;
    height: 142px;
    background: transparent url(/images/1.jpg) top left no-repeat;
}

#boxContainer > div:hover {
    background-position: 0 -142px;
}

.one { 
    background-image: url(/images/1.jpg); 
}
.two { 
    background-image: url(/images/2.jpg); 
}
.three { 
    background-image: url(/images/3.jpg); 
}
.four { 
    background-image: url(/images/4.jpg); 
}
.five { 
    background-image: url(/images/5.jpg); 
}
.six { 
    background-image: url(/images/6.jpg); 
}

Indlæg senest redigeret d. 01.12.2010 01:28 af Bruger #13559

Bruger #8773 @ 30.11.10 22:53

658

Et bud ville være at den ikke linker til din CSS fil?

Der er en 404 error hvis du smider CSS url'en i din browser

Bruger #16295 @ 30.11.10 23:04

Et bud ville være at den ikke linker til din CSS fil?

Der er en 404 error hvis du smider CSS url'en i din browser

Pinligt

- Det fixede dog ikke problemet.

Bruger #16295 @ 01.12.10 07:48

Indlæg senest redigeret d. 09.12.2010 23:07 af Bruger #16295

Bruger #13559 @ 01.12.10 09:22

198

Tror det er stien til billederne i css'en der er forkerte. Hvor ligger billederne på serveren?

Bruger #16295 @ 01.12.10 20:44

Indlæg senest redigeret d. 09.12.2010 23:08 af Bruger #16295

Bruger #13559 @ 01.12.10 21:57

198

Det er stien til billederne der er forkert. Istedet for /images/1-hvid.jpg skal det være images/1-hvid.jpg, så den samlede css-fil bliver

Kode

#boxContainer {
    width: 520px;
}

#boxContainer > div {
    width: 260px;
    height: 142px;
    background: transparent url(images/1-hvid.jpg) top left no-repeat;
}

.one { 
    background-image: url(images/1-hvid.jpg); 
}
.two { 
    background-image: url(images/2-hvid.jpg); 
}
.three { 
    background-image: url(images/3-hvid.jpg); 
}
.four { 
    background-image: url(images/4-hvid.jpg); 
}
.five { 
    background-image: url(images/5-hvid.jpg); 
}
.six { 
    background-image: url(images/6-hvid.jpg); 
}

.one:hover { 
    background-image: url(images/1-orange.jpg); 
}
.two:hover { 
    background-image: url(images/2-orange.jpg); 
}
.three:hover { 
    background-image: url(images/3-orange.jpg); 
}
.four:hover { 
    background-image: url(images/4-orange.jpg); 
}
.five:hover { 
    background-image: url(images/5-orange.jpg); 
}
.six:hover { 
    background-image: url(images/6-orange.jpg); 
}

Bruger #16295 @ 05.12.10 00:37

Indlæg senest redigeret d. 09.12.2010 23:08 af Bruger #16295

Bruger #13559 @ 05.12.10 23:17

198

Du er kommet til at rode rundt i id og class i din html-kode. Lige nu er din html:

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://www.klausfejer.com/bis/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="boxContainer">
    <div id="one">
    </div>
    <div id="two">
    </div>
    <div id="three">
    </div>
    <div id="four">
    </div>
    <div id="five">
    </div>
    <div id="six">
    </div>
</div>
</body>
</html>

men hvis css'en skal virke skal den yderste div have id="boxContainer" og div'erne inde i boxContainer skal have class="one", class="two" osv. Html'en bliver så

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://www.klausfejer.com/bis/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="boxContainer">
    <div class="one">
    </div>
    <div class="two">
    </div>
    <div class="three">
    </div>
    <div class="four">
    </div>
    <div class="five">
    </div>
    <div class="six">
    </div>
</div>
</body>
</html>

Indlæg senest redigeret d. 05.12.2010 23:17 af Bruger #13559

6 billeder med hover

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler