 Mouseover Effekt |
Kullakeeeks
Mitglied
Dabei seit: 06.03.2007
Beiträge: 1.591
Herkunft: NRW
 |
|
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 
|
|
03.10.2010 18:07 |
|
|
kext 
»Ich bin ein HAL 9000 Supercomputer.«
Dabei seit: 28.11.2008
Beiträge: 119
Herkunft: Planet Erde
|
|
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.
__________________
|
|
|
03.10.2010 21:28 |
|
|
Kullakeeeks
Mitglied
Dabei seit: 06.03.2007
Beiträge: 1.591
Herkunft: NRW
Themenstarter 
|
|
Erstmal danke für den Tipp!
Also ich hab beides probiert, aber irgendwie funktionierts nicht...
|
|
|
04.10.2010 12:27 |
|
|
kext
»Ich bin ein HAL 9000 Supercomputer.«
Dabei seit: 28.11.2008
Beiträge: 119
Herkunft: Planet Erde
|
|
Zeig mal deinen Code und deine Bilder. Vielleicht kann dir dann geholfen werden.
__________________
|
|
|
04.10.2010 16:22 |
|
|
Kullakeeeks
Mitglied
Dabei seit: 06.03.2007
Beiträge: 1.591
Herkunft: NRW
Themenstarter
|
|
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?
|
|
|
04.10.2010 17:22 |
|
|
kext
»Ich bin ein HAL 9000 Supercomputer.«
Dabei seit: 28.11.2008
Beiträge: 119
Herkunft: Planet Erde
|
|
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.
__________________
|
|
|
04.10.2010 19:45 |
|
|
Kullakeeeks
Mitglied
Dabei seit: 06.03.2007
Beiträge: 1.591
Herkunft: NRW
Themenstarter
|
|
Sieht schon besser aus, aber immernoch nicht gut
*klick*
|
|
|
04.10.2010 20:36 |
|
|
kext
»Ich bin ein HAL 9000 Supercomputer.«
Dabei seit: 28.11.2008
Beiträge: 119
Herkunft: Planet Erde
|
|
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;
} |
|
__________________
|
|
|
04.10.2010 20:59 |
|
|
kext
»Ich bin ein HAL 9000 Supercomputer.«
Dabei seit: 28.11.2008
Beiträge: 119
Herkunft: Planet Erde
|
|
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). <:
__________________
|
|
|
05.10.2010 21:16 |
|
|
Kullakeeeks
Mitglied
Dabei seit: 06.03.2007
Beiträge: 1.591
Herkunft: NRW
Themenstarter
|
|
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...
|
|
|
07.10.2010 13:01 |
|
|
|
Impressum
|
