Mouseovereffekt bei einem Bild erstellen

Packy

Hi,

ich habe mit wordpress installiert.... nice :)
Nun möchte ich gern eine Seite erstellen, auf der ein Bild zu sehen ist.
Dieses Bild soll bei Mouse-Over durch ein anderes ersetzt werden.
Also ein ganz normaler Mouse-Over Effekt.
Doch anscheinend wird das von Worppress nicht unterstützt??
Ich dachte mir da folgendes:

PHP

<a href="http://packyman.uttx.net/pics/kranke_mietz.jpg" onmouseout="turnOff('');" onmouseover="turnOn('');"><img src="http://packyman.uttx.net/pics/normale_mietz.jpg"></a>

Doch da passiert eben nichts, es wird nicht auf das nächste Bild gesprungen.
Ich muss auf das Bild klicken, damit er weiterspringt. Zudem öffnet er es nicht im selben Frame sondern stellt das Bild als Einzelnes dar. (zu sehen, wenn man auf meiner Homepage auf den Link 'Mietz vs. Mietz' klickt.
Dann wollte ich das in einem eigenen Frame machen.
Wie macht man das denn??
Wär schön, wenn mir da jemand helfen könnte :)

welcome 2 P-Jays BloGG <- Das ist meine neue Homepage.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Javascript benötgt man dafür schon seit Ewigkeiten nicht mehr. CSS und die Pseudoklasse :hover existiert! Eventuell solltest du dem Bild eine ID/Class geben.

Code

a#mouseover {
background:url('bild-normal.png');
}
a#mouseover:hover {
background:url('bild-effekt.png');
}

Mehr: CSS 4 You - The Finest in Stylesheets

Was für Frames? WP verwendet keine Frames.

Packy

hi,
danke schinmal für deine Antwort.
Jedoch verstehe ich noch nicht so viel davon, weshaklb ich dich bitte,
den Code vollständig zu schreiben bzw mir zu sagen, wo ich das reinkopieren muss.
Ist der von dir gepostete Code für den Head bereich oder den Body bereich?
Da muss doch noch was zugeschrieben werden oder??

Packy

marX

Der Code ist für die style.css gedacht. Dazu benötigst du in HTML einen Link mit der ID "mouseover". Willst du mehr? Dann sag mal, was du bereits gemacht hast, und wir sehen weiter.

Packy

Nun bisher habe ich nur folgendes:

PHP

<html>
  <head>
    <title>Mietz vs. Mietz</title>
  </head>
  </body>
</html>

und eben das was du gepostet hast.
Ist das mit der weiterern Datei 'Style.css' die Einzige Lösung?
Gibt es keine Lösung, bei der man alles in eine Datei schreibt? denn ich wüsste gar nicht, wo ich die style.css dann speichern muss, wenn ich später eine weitere style.css erstellen möchte, würden die sich ja in die quere kommen.

:?

marX

Kennst du dich mit den Grundregeln von HTML, CSS und PHP ein wenig aus?

Du kannst sämtliche CSS-Regeln, die du benötigst, in eine einzige CSS-Datei (bei WP heißt die Standard-CSS-Datei eines Themes immer style.css) schreiben, oder auch mehrere CSS-Dateien (z.B. Plugins, CSS für Drucklayouts etc.) einsetzen. Wie das geht erfährst du in den einschlägigen CSS-Tutorials und -Referenzen, z.B. SELFHTML: Stylesheets (CSS) oder CSS 4 You - The Finest in Stylesheets

Ein minimalstes Beispiel wäre so:

HTML

<html>
  <head>
    <title>Test</title>
    <style type="text/css">
      a#mo {
        background:#ff0;
      }
      a#mo:hover {
        background:#0f0;
      }
    </style>
  </head>
  <body>
    <a id="mo" href="#">X</a>
</body>
</html>

Alles anzeigen

Hierbei wechselt die Hintergrundfarbe des Links beim Überfahren mit der Mouse von gelb nach grün.

Den Inhalt des Style-Elements könntest du nun in eine eigene CSS-Datei auslagern, die du mit <link rel="stylesheet" href="..."> in die HTML-Datei einbindest.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Mouseovereffekt bei einem Bild erstellen

Jetzt mitmachen!