Forenindex » Web allgemein » HTML und CSS / Stylesheets » Mouseover mit Bildern

Mouseover mit Bildern

Sero
Beiträge gesamt: 143
30. Jun 2007, 15:58
Bewertung:

gelesen: 2397

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

Mouseover mit Bildern

loethelm
Beiträge gesamt: 6029
30. Jun 2007, 16:05
Bewertung:

gelesen: 2395

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/
------------------

Mouseover mit Bildern

Sero
Beiträge gesamt: 143
30. Jun 2007, 16:18
Bewertung:

gelesen: 2392

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.

Mouseover mit Bildern

loethelm
Beiträge gesamt: 6029
30. Jun 2007, 16:30
Bewertung:

gelesen: 2387

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/
------------------

Mouseover mit Bildern

Sero
Beiträge gesamt: 143
30. Jun 2007, 16:34
Bewertung:

gelesen: 2385

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>

Mouseover mit Bildern

loethelm
Beiträge gesamt: 6029
30. Jun 2007, 16:38
Bewertung:

gelesen: 2381

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/
------------------

Mouseover mit Bildern

SabineP
Beiträge gesamt: 7586
30. Jun 2007, 16:43
Bewertung:

gelesen: 2373

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

(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
Bewertung:

gelesen: 2360

Beitrag als Lesezeichen
Sabine, super - es funktioniert. es liegt ebendoch an den kleinigkeiten.

deine ratschläge sind die besten! danke
sero