mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Di 23.04.2024 15:51 Benutzername: Passwort: Auto-Login

Thema: Mouseover-Effekt über einen Abschnitt des Headers vom 25.06.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Tipps & Tricks für Nonprint -> Mouseover-Effekt über einen Abschnitt des Headers
Autor Nachricht
Saliver
Threadersteller

Dabei seit: 14.03.2006
Ort: Hamburg
Alter: 36
Geschlecht: Männlich
Verfasst Fr 25.06.2010 13:06
Titel

Mouseover-Effekt über einen Abschnitt des Headers

 Antworten mit Zitat Zum Seitenanfang
Hallo liebe Community,

ich bin beim Erarbeiten meines neuen Portfolios auf ein problem gestoßen.
Mir ist nicht klar, wie ich einen Mouseover-Effekt bei einem kleinen Ausschnitt des Header-Bildes erreiche.
Meine Vermutung wäre ein Div-Layer mit dem Hover-Bild darüber zu legen, aber ist es vielleicht auch anders lösbar?

Hier ein Bild zur Vorstellung:



Vielen Dank für jede Hilfe.


Gruß,
Saliver

Zuletzt bearbeitet von Saliver am Fr 25.06.2010 13:06, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
nel

Dabei seit: 18.09.2004
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Fr 25.06.2010 14:25
Titel

Re: Mouseover-Effekt über einen Abschnitt des Headers

 Antworten mit Zitat Zum Seitenanfang
Saliver hat geschrieben:
Hallo liebe Community,

ich bin beim Erarbeiten meines neuen Portfolios auf ein problem gestoßen.
Mir ist nicht klar, wie ich einen Mouseover-Effekt bei einem kleinen Ausschnitt des Header-Bildes erreiche.
Meine Vermutung wäre ein Div-Layer mit dem Hover-Bild darüber zu legen, aber ist es vielleicht auch anders lösbar?

Hier ein Bild zur Vorstellung:



Vielen Dank für jede Hilfe.


Gruß,
Saliver


div layer mit hover ist doch ne super lösung, warum suchst du da was anderes?
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Saliver
Threadersteller

Dabei seit: 14.03.2006
Ort: Hamburg
Alter: 36
Geschlecht: Männlich
Verfasst Fr 25.06.2010 18:04
Titel

Antworten mit Zitat Zum Seitenanfang
Weil ich nicht weiß, wie ich das bewerkstelligen sollte ,-/
  View user's profile Private Nachricht senden
fxh

Dabei seit: 25.06.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 25.06.2010 20:17
Titel

Antworten mit Zitat Zum Seitenanfang
Ich befürchte ich weiß nciht genau was du meinst, also interpretieren ich einfach mal ein bisschen.
Du hast in deinem Header einen Bereich, der bei hover (mouseover) eine andere bis dahin unsichtbare Grafik erscheinen lassen soll.
Dazu gibt es wohl auch schon zahlreiche poststs hier im Forum - was aber kein grund ist das ganze einfach nochmal zu erklären.

Cascading Style Sheets
Code:

div#overlay {
    position:absolute;
    display:none;
}
div#header:hover div#overlay {
    display:block;
}


Hypertext Markup Language
Code:

<div id="header">
    <div id="overlay"></div>
</div>



Das dürfte es - im Kern - dann eigentlich shcon gewesen sein. Der Code ist eigentlich selbsterklärend will ich meinen - Das position:absolute; ist nötig, weil sich das untergeordnete div andernfalls auf die größe des übergeordneten auswirken würde und das wollen wir ja nicht. Selbst verständlich fehlen hier dann noch die Größe (width und height) und die Ausrichtung (margin) aber das wirst du wohl selber auf die Reihe bekommen.

P.S. Die Grafik kannst du im div einfach als background-image definieren - Alternativ tuts wohl auch nen <img /> Tag.

Code:

div#overlay {
    background-image:url(images/example.jpg);
}
  View user's profile Private Nachricht senden
 
Ähnliche Themen Mouseover-Effekt im PDF?
CSS Mouseover-Effekt
mouseover-effekt auf textlink?
Mouseover Effekt im Acrobat
Hilfe bei Mouseover-Effekt
Mouseover-Effekt mit Flash möglich?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Tipps & Tricks für Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB