Kullakeeeks
Hallöchen
Ich habe ein kleines Problemchen.
Ich habe einen kleinen Code, der mir
dieses hier ermöglicht.
Nun habe ich das Problem, dass das ganze wie ein Menü dargestellt werden soll und somit das erste Bild mehrfach untereinander stehen soll, sich dabei aber immer in ein anderes Bild "verwandeln" soll.
Also das erste bleibt wie es ist, darunter der nächste Link, wo das erste Bild genau dasselbe ist, wie beim ersten Link, sich aber in ein anderes ändern soll, als beim ersten Link. Kann man das verstehen?
Hier jedenfalls mein Code: (auszugsweise)
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
|
<style>
a { display:block;
background-image:url(02.jpg);
width:86px; height:74px }
a:hover { background-image:url(01.jpg);}
</style>
<body>
<a href="#"></a>
</body>
|
|
Ich habe mal gegoogelt und dort stand etwas vonwegen id-Attributen, aber irgendwie weiß ich nicht, wie ich diese darauf anwenden soll...
Wöre super, wenn jemand eine Lösung wüsste
LG
Hannah
P.S.: Copyright der Bilder liegt bei kosmos
kext
Gib deinen Links Klassen, dann kannst du sie einzeln stylen.
| code: |
1:
2:
|
<a class="link1" href="">Hallo</a>
<a class="link2" href="">Welt</a> |
|
Der Style sieht dann so aus:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
|
.link1
{
display: block;
...
}
.link1:hover
{
...
}
.link2
{
display: block;
...
}
.link2:hover
{
...
} |
|
Cleverer ist es übrigens, wenn du nicht das Hintergrundbild änderst, sondern nur dessen Position. Dafür brauchst du ein bild, auf dem beide Zustände übereinander sind, das also doppelt so hoch ist, wie der Link.
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
|
.link1
{
display: block;
background-image: url('bild.png');
background-position: 0px 0px;
width: 86px;
height: 74px;
}
.link1:hover
{
background-position: 0px -74px;
} |
|
Dann wird das Bild nicht erst geladen, wenn du mit der Maus drüberfährst.
Kullakeeeks
Erstmal danke für den Tipp!
Also ich hab beides probiert, aber irgendwie funktionierts nicht...
kext
Zeig mal deinen Code und deine Bilder. Vielleicht kann dir dann geholfen werden.
Kullakeeeks
Okay, also Bilder sind im Anhang, hier der Code:
CSS:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
|
body {
font-size:11px;
font-family:Verdana;
color:#49541e;
scrollbar-face-color:d9cbbe;
scrollbar-highlight-color:d9cbbe;
scrollbar-3dlight-color:d9cbbe;
scrollbar-darkshadow-color:c7b29e;
scrollbar-shadow-color:d9cbbe;
scrollbar-arrow-color:c7b29e;
scrollbar-track-color:d9cbbe;
}
table {
border-collapse: separate;
font-family: verdana;
font-size: 11px;
}
th {
background-color:#49541e;
color:#c8d385;
}
tr {
background-color:#c8d385;
color:#49541e;
}
td {
background-color:#c8d385;
color:#49541e;
}
.link1
{
display: block;
background-image: url('01b.jpg');
background-position: 0px 0px;
width: 86px;
height: 74px;
}
.link1:hover
{
background-position: 0px -74px;
background-image: url('01b.jpg');
}
usw.
|
|
Und hier die HTML-Seite:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
|
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style01.css">
</head>
<body>
<a class="link1" href="http://necado.bplaced.net"><img src="01b.jpg"></a>
<a class="link2" href="http://necado.bplaced.net"><img src="02b.jpg"></a>
</body>
</html>
|
|
Oder kann man das garnicht so kombinieren?
kext
Wenn du in deinen Link ein Bild reintust, sieht man den Hintergrund natürlich nicht mehr. Durch folgenden CSS-Code kannst du den Inhalt verstecken:
| code: |
1:
2:
3:
4:
5:
|
{
height: 0px;
padding: 74px 0 0 0;
overflow: hidden;
} |
|
Jetzt schreibst du in deine Links einfach irgendetwas rein, z.B. »Link 1« oder besser das, was auf der Grafik draufsteht. Du kannst sie natürlich auch einfach leer lassen. Aber Suchmaschinen können natürlich keinen Text lesen, der auf Bildern steht.
Kullakeeeks
Sieht schon besser aus, aber immernoch nicht gut
*klick*
kext
Du hast die Höhe nicht auf null gesetzt.
Außerdem scheint mir, dass du das noch nicht ganz mit den Grafiken verstanden hast. Deine Grafiken sollten so aussehen:
Also ungefähr so, je nachdem was du wann wie wo haben willst:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
|
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style01.css">
</head>
<body>
<a class="link1" href="http://necado.bplaced.net">Das hier ist unsichtbar</a>
<a class="link2" href="http://necado.bplaced.net">Das hier auch</a>
</body>
</html>
|
|
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
|
body {
font-size:11px;
font-family:Verdana;
color:#49541e;
scrollbar-face-color:d9cbbe;
scrollbar-highlight-color:d9cbbe;
scrollbar-3dlight-color:d9cbbe;
scrollbar-darkshadow-color:c7b29e;
scrollbar-shadow-color:d9cbbe;
scrollbar-arrow-color:c7b29e;
scrollbar-track-color:d9cbbe;
}
table {
border-collapse: separate;
font-family: verdana;
font-size: 11px;
}
th {
background-color:#49541e;
color:#c8d385;
}
tr {
background-color:#c8d385;
color:#49541e;
}
td {
background-color:#c8d385;
color:#49541e;
}
.link1
{
display: block;
background: url('01.jpg') 0px 0px no-repeat;
width: 86px;
height: 0px;
padding: 74px 0 0 0;
overflow: hidden;
}
.link1:hover
{
background-position: 0px -74px;
}
.link2
{
display: block;
background: url('02.jpg') 0px 0px no-repeat;
width: 86px;
height: 0px;
padding: 74px 0 0 0;
overflow: hidden;
}
.link2:hover
{
background-position: 0px -74px;
} |
|
Kullakeeeks
Oh man, hätte ich auch selbst hinbekommen können...
Vielen Dank, jetzt funktionierts
/edit: Kriegt man das jetzt eventuell noch als Imagemap hin oder wird das dann zu kompliziert?
kext
Imagemap = Böse! (und haben auch mit Divs herzlich wenig zu tun.)
Der Sinn an Divs mit Hintergrundbildern ist ja gerade, die Seite barriereärmer, benutzer- und suchmaschinenfreundlicher zu gestalten.
Erzähl einfach mal, wie du dir das vorstellst, von dem du glaubst, dass man es mit Imagemaps realisiern könnte, und wir schaun mal, ob man dafür auch eine gute Lösung findet (und die gibt es garantiert). <:
Kullakeeeks
Naja, ich hab ne Stallgrafik gepixelt und da möchte ich einfach, dass man, wenn man mit der Maus drüberfährt, das jeweilige Pferd sehen kann, dass in der Box steht...