[GastForen Web allgemein HTML und CSS / Stylesheets Mouseover mit Bildern

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Mouseover mit Bildern

Sero
Beiträge gesamt: 143

30. Jun 2007, 15:58
Beitrag # 1 von 8
Bewertung:
(2240 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo

folgendes Problem:

http://www.sebastianrost.de/...neral_projects.shtml
unter diesem Link findet ihr meinen eingebauten mousover für die 3 icons (study, work und private).
realisiert wurde der effekt über css: link mit hintergrundbild auf position 0,0 - bei mouseover wird lediglich dir bildposition geändert. es funktioniert leider nur im IE. bei FF, Opera und Netscape scheint das bild verschoben zu sein. wie kann man das problem lösen? bedingung: realisierung mittles css.

gruß sero
X

Mouseover mit Bildern

loethelm
Beiträge gesamt: 6027

30. Jun 2007, 16:05
Beitrag # 2 von 8
Beitrag ID: #300048
Bewertung:
(2238 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

das geht so:

Code
a { 
background-image:url(normal.gif);
}
a:hover
{
background-image:url(hover.gif);
}



Viele Grüße

Loethelm

------------------
Helfen Sie mit, damit HilfDirSelbst.ch weiterhin helfen kann.
http://www.hilfdirselbst.ch/info/
------------------


als Antwort auf: [#300047]

Mouseover mit Bildern

Sero
Beiträge gesamt: 143

30. Jun 2007, 16:18
Beitrag # 3 von 8
Beitrag ID: #300049
Bewertung:
(2235 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Danke für deine schelle antwort.
der mouseover funktioniert, sowohl mit deinem als auch mit meinem skript, aber mir gehts um die verschiebung des bildes. im IE ist die postion richtig aber in den anderen browsern hängt das bild am unteren rand.


als Antwort auf: [#300048]

Mouseover mit Bildern

loethelm
Beiträge gesamt: 6027

30. Jun 2007, 16:30
Beitrag # 4 von 8
Beitrag ID: #300051
Bewertung:
(2230 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

der Safari macht gar keinen mouseover. Da stimmt was nicht. Ist der Code valide?
Und wenn der IE etwas anders positioniert als alle anderen, ist es ratsam alle anderen korrekt zu machen und dann den IE per CSS-Weiche anzupassen.
Hast du mal eine Positionierung mittels "top left" o.ä. ausprobiert?


Viele Grüße

Loethelm

------------------
Helfen Sie mit, damit HilfDirSelbst.ch weiterhin helfen kann.
http://www.hilfdirselbst.ch/info/
------------------


als Antwort auf: [#300049]

Mouseover mit Bildern

Sero
Beiträge gesamt: 143

30. Jun 2007, 16:34
Beitrag # 5 von 8
Beitrag ID: #300052
Bewertung:
(2228 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
hier ist ein auszug aus meiner css:

Code
a.general_projects_img { 
height:90px;
width:150px;
padding:0px;
margin:0px;
text-decoration:none;
}

a#general_projects_img_study {
background: url(../bilder/projects_general_study_a.gif) no-repeat ;
background-position:top left;
}

a#general_projects_img_study:hover {
background-position:-155px 0px;
}


und hier das skript aus der html:

Code
<div id="general_projects"> 
<a class="general_projects_img" id="general_projects_img_study" href="general_projects_study.shtml" target="_top"><img src="../bilder/px_blank.gif" width="150" height="90" border="0" alt="Projektauswahl Studium"></a>
<p class="general1_projects_img_subtitle1">Projektauswahl <b>Studium</b></p>
<p class="general1_projects_img_subtitle2">Unter diesem Menüpunkt sind ausgewählte Projekte aus meinem Studium an der HTW Dresden und an der BoKu Wien zusammengestellt.</p>
</div>



als Antwort auf: [#300051]

Mouseover mit Bildern

loethelm
Beiträge gesamt: 6027

30. Jun 2007, 16:38
Beitrag # 6 von 8
Beitrag ID: #300053
Bewertung:
(2224 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

ich würde es mal mit einem Austausch des Bildes ausprobieren anstatt mit Positionsveränderung.


Viele Grüße

Loethelm

------------------
Helfen Sie mit, damit HilfDirSelbst.ch weiterhin helfen kann.
http://www.hilfdirselbst.ch/info/
------------------


als Antwort auf: [#300052]

Mouseover mit Bildern

SabineP
Beiträge gesamt: 7586

30. Jun 2007, 16:43
Beitrag # 7 von 8
Beitrag ID: #300054
Bewertung:
(2216 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Versuchs mal mit a{display:block} im CSS.
Im Firefox klappt das, ich weiß aber nicht wie das dann im IE aussieht.
Gruß Sabine


als Antwort auf: [#300049]
(Dieser Beitrag wurde von SabineP am 30. Jun 2007, 16:45 geändert)

Mouseover mit Bildern

Sero
Beiträge gesamt: 143

30. Jun 2007, 16:58
Beitrag # 8 von 8
Beitrag ID: #300055
Bewertung:
(2203 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Sabine, super - es funktioniert. es liegt ebendoch an den kleinigkeiten.

deine ratschläge sind die besten! danke
sero


als Antwort auf: [#300054]
X

Aktuell

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
25.01.2021 - 26.01.2021

Digicomp Academy AG, Bern oder Zürich
Montag, 25. Jan. 2021, 08.30 Uhr - Dienstag, 26. Jan. 2021, 17.00 Uhr

Kurs

In diesem Basic-Kurs lernen Sie das Wichtigste über den Aufbau und die Funktionsweise von Photoshop. Zusammen mit den notwendigen Grundlagen von Farbenlehre bis Bildauflösung lernen Sie zudem die kreativen Möglichkeiten von Photoshop kennen.

Dauer: 2 Tage
Preis: CHF 1'400.–

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/PHOTM1

Veranstaltungen
25.01.2021 - 26.01.2021

Digicomp Academy AG, Zürich oder virtuell
Montag, 25. Jan. 2021, 08.30 Uhr - Dienstag, 26. Jan. 2021, 17.00 Uhr

Kurs

Im Kurs lernen Sie die Schritte vom Import des Rohmaterials bis zum fertig exportierten Clip kennen. Dazu zählen die Materialverwaltung, das Trimmen für Roh- und Feinschnitt, Blenden, Titel und Effekte und eine Übersicht über die wichtigsten Formate.

Preis: CHF 1'700.-
Dauer: 2 Tage

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/AP6

Neuste Foreneinträge


PSD CS6 (!) Mac: Dialog "Dateiinformationen" Fenster leer und Sackgasse

Inhalt Textrahmen verbinden

iPhone Farbprofil

Exel ohne leeres Tabellenblatt starten

Text- oder Grafikrahmen nach Position und Größe suchen und ändern

Illustrator Skript Übersatztext - Hilfe benötigt

[GREP] beliebige Zeichen finden und durch selbe Anzahl an Leerzeichen oder Anzahl Zeichen "x" ersetzen

InDesign 2021 – Suchen/Ersetzen: Farbe

Langsamer MacMini

Netzwerklaufwerke verbinden -> Bei nicht verfügbar Fehlermeldung unterdrücken
medienjobs