✔ Problem mit mouseover

Status
Nicht offen für weitere Antworten.
MaexxDesign

MaexxDesign

Mitglied
Ich habe mit javascript eine Fotogallerie erstellt.
Und zwar hier:
http://www.maexxdesign.de/
Dort auf "actors", "Anna Paquin" und "Fotogallerie".
Wenn man mit der Maus über ein Bild drüber fährt, ändert es sich.
Jedoch dauert das sehr lange.
Nun habe ich erfahren, dass man sowas auch nicht mit javascript, sondern mit css macht.

Wie sieht denn der Quellcode dafür aus ?

Ich habe schon dutzende Tutorials gelesen; habe es aber nie geschafft.
 
Hi MaexxDesign,

also ich würde Dir folgende Lösung vorschlagen:

Normalerweise benötigt man für ein Mouseover zwei Bilder.
Bei der hier beschriebenen Methode braucht man nur eines.
Nehmen wir an Dein Thumbnail soll 50px hoch und 50px breit sein.
Jetzt erstellst Du mit Deinem Bildbearbeitungsprogramm eine Datei, die 50px hoch und 100px breit ist.
Nun legst Du zunächst das Bild an, welches ganz normal angezeigt werden soll.
Es darf nur 50px breit sein und sollte die linke Hälfte Deiner Datei füllen.
Dann legst Du das Bild an, welches angezeigt werden soll, wenn die Mouse über dem Thumbnail ist. Dieses positionierst Du ganz rechts. (siehe Bsp.)
Beispiel: http://img91.imageshack.us/my.php?image=bild15pu.png

Achte darauf, die Bilder webgerecht zu komprimieren. Die Thumbs auf Deiner Seite sind überhaupt nicht komprimiert, nicht mal verkleinert, sondern einfach nur verkleinert dargestellt! Daraus resultieren natürlich hohe Ladezeiten.

So, nun zum Code-Teil:
Für jedes Deiner Thumbs legst Du einen DIV-Container an und vergibst hier einen ID-Namen und einen Namen für die CSS-Klasse, der ID-Name ist bei allen gleich:
Code: 
<div id="thumb" class="bild_1" align="center"></div>
In die CSS-Datei trägst Du dann für jeden Container jeweils den entsprechenden Link zum Bild ein. Das #thumb enthält allgemeine Eigenschaften für Dein Thumb, also Höhe, Breite, Border etc. Da wir nur eine Breite von 50px festgelegt haben, wird nun auch nur die erste Hälfte Deines Thumbs angezeigt.
#thumb:hover sorgt nun dafür, das das angezeigte Thumb bei einem Mouseover seine Position um -50px nach links verschiebt und damit die zweite Hälfte Deines Thumbs angezeigt wird.
Code: 
#thumb {
    width: 50px;
    height: 50px;
    border: solid 1px red;
}

.bild_1 {
    background: url(images/bild1.png) 0 0 no-repeat;
}

#thumb:hover {
    background-position: -50px 0;
}
Das war`s schon. Ist zwar eine Menge Copy & Paste-Arbeit, dafür kommst Du aber komplett ohne JScript aus und Deine Thumbs werden sofort angezeigt.
Alles unklar? ;-)
 
coral hat gesagt.:
Für jedes Deiner Thumbs legst Du einen DIV-Container an und vergibst hier einen ID-Namen und einen Namen für die CSS-Klasse, der ID-Name ist bei allen gleich
Zum Vergrößern anklicken....
Ein ID-Name darf in einem Dokument nur einmal vergeben / verwendet werden.
 
Erstmal vielen Dank für den Link und die tolle Erklärung ! :)

Für mich besteht das Problem immer noch im Code.

Ich möchte erstmal testweise eine neue Seite anlegen.
Frontpage erzeugt erstmal diesen Code:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Neue Seite 1</title>
</head>

<body>

</body>

</html>
Zum Vergrößern anklicken....
Nun ist die Frage wo ich was eintragen muss. :rolleyes:

Die Testbilddatei liegt hier:
C:\Dokumente und Einstellungen\Carter\Eigene Dateien\MaexxDesign\Bilder\Actors\Paquin\test.jpg

Auf dem Webserver würde sie dann hier liegen:
\Bilder\Actors\Paquin\test.jpg

Die ist 200x80 Pixel groß, da ein Thumbnail 100x80 Pixel auf meiner Seite groß ist.
Die eine Hälfte ist schwarz, die andere weiß.

Wie muss denn nun der gesamte Code der Seite aussehen, damit es funktioniert ?
Mit css habe ich keinerlei Erfahrung; darum habe ich mich auch hier registriert. ;)
 
Mir ist gerade aufgefallen, dass ich hier ein Beispiel mit DIVS gebrauche, was Dir natürlich nicht wirklich was bringt, da Du ja eine Verlinkung brauchst. Also ersetzen wir die ganzen DIVS. ;-)

HTML:
Code: 
<a id="thumb" href="http://" class="bild1" align="center"></a>
CSS:
Code: 
a#thumb {
    display: block;
    width: 50px;
    height: 50px;
    border: solid 1px red;
}

a#thumb:hover {
    background-position: -50px 0;
}

.bild1 {
    background: url(images/bild1.png) 0 0 no-repeat;
}
So sollte es funken.
 
Also hier mal ein einfaches Komplett-Beispiel:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
a#thumb {
    display: block;
    width: 100px;
    height: 80px;
    border: solid 1px red;
}

a#thumb:hover {
    background-position: -100px 0;
}

.bild1 {
    background: url(test.jpg) 0 0 no-repeat;
}

-->
</style>
</head>
<body>
<a id="thumb" href="http://" class="bild1" align="center"></a>
<br />
<a id="thumb" href="http://" class="bild1" align="center"></a>
</body>
</html>
Den Pfad zu Deinem Bild musst Du entsprechend anpassen, kommt halt darauf an, ob Du mit absoluten oder relativen Pfaden arbeitest.
Zum Testen würde ich einfach mal das Testbild in das selbe Verzeichnis wie die HTML-Datei kopieren. Dann kannst Du den Code hier genauso übernehmen.

@michaelsinterface:
Es funkt - in allen Browsern, die ich hier zum Testen habe. Und das ist entscheidend für mich. Auch mit mehreren Thumbs. Ich vergebe die ID ja eigentlich auch nur einmal.
 
Heb doch einfach nur den Rahmen des Elements stärker hervor und lass diese JavaScript-Spielerei ganz weg.
 
@ coral: ob es funktioniert oder nicht, ist völlig irrelevant. Fakt ist, daß die ID #thumb nur einmal vergeben werden darf. Ist das so schwer zu verstehen?

Hier mal eine Lösungsvariante ohne Verwendung einer ID:

Code: 
a.menu:link, a.menu:visited {
display: block;
width: 50px;
height: 50px;
background: url(grafik.png) 0 0;
}

a.menu:hover {
background: url(grafik.png) -50px 0;
}

HTML: 
<ul>
  <li><a href="#" class="menu">Link 1</a></li>
  <li><a href="#" class="menu">Link 2</a></li>
  <li><a href="#" class="menu">Link 3</a></li>
</ul>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück