Gegen Bilderklau - Das Original | Druckvorschau: Mouseover Effekt

Geschrieben von Kullakeeeks am 03.10.2010 um 18:07:

Mouseover Effekt

Hallöchen smile

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 smile

LG
Hannah

P.S.: Copyright der Bilder liegt bei kosmos Augenzwinkern

Geschrieben von kext am 03.10.2010 um 21:28:

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.

Geschrieben von Kullakeeeks am 04.10.2010 um 12:27:

Erstmal danke für den Tipp!

Also ich hab beides probiert, aber irgendwie funktionierts nicht...

Geschrieben von kext am 04.10.2010 um 16:22:

Zeig mal deinen Code und deine Bilder. Vielleicht kann dir dann geholfen werden.

Geschrieben von Kullakeeeks am 04.10.2010 um 17:22:

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?

Geschrieben von kext am 04.10.2010 um 19:45:

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.

Geschrieben von Kullakeeeks am 04.10.2010 um 20:36:

Sieht schon besser aus, aber immernoch nicht gut Augenzwinkern

*klick*

Geschrieben von kext am 04.10.2010 um 20:59:

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;
}

Geschrieben von Kullakeeeks am 05.10.2010 um 17:04:

Oh man, hätte ich auch selbst hinbekommen können... großes Grinsen

Vielen Dank, jetzt funktionierts smile

/edit: Kriegt man das jetzt eventuell noch als Imagemap hin oder wird das dann zu kompliziert?

Geschrieben von kext am 05.10.2010 um 21:16:

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). <: