• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

background-image onMouseOver ändern

T

thegonz

New member
Hallo zusammen,

ich will das Hintergrundbild eines DIV bei onmouseover ändern. Irgendwie funzt das nur beim Firefox aber leider beim IE nicht. Hat vielleicht jemand eine Lösung? Wäre super ... danke schon mal!

html-code
HTML: 
<div id="MainMenu_1"><a href="#" class="mainMenu">Home</a></div>

css
HTML: 
a.mainMenu {	
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
	font-style: normal;
}
a.mainMenu:hover {	
	font-size: 12px;
	color: #4B3F2F;
	text-decoration: none;
	font-style: normal;
}
#MainMenu_1{
	background-image: url(img/mainmenu_n.gif);
}
#MainMenu_1:hover {
	background-image: url(img/mainmenu_o.gif);
}
 
Moin!

IE beherrscht die Pseudoklasse :hover nur bei anchor-Tags.

Ahoi - Pit

Edit - @dkdenz: Wer kommt durch den Kamin?
 
Hi!

@dkdenz: Jo - war mal so ein Wortspiel bei Stan und Olli, wenn 2 das Gleiche sagten. Dann fragte einer von denen "Wer kommt durch den Kamin?" und beide antworteten "Der Weihnachtsmann."

@thegonz: es ist möglich, einen Div auch in IE per :hover in seinem CSS zu beeinfliussen. Das gibt aber ein Problem, wenn ein Link im Div ist. Mit JS ist das, was Du willst kein Problem.

Greetz - Pit
 
Code: 
<html>
<head>
</head>
<body>

<div style="background-color:blue;" onMouseOver="this.style.backgroundColor='red';" onMouseOut="this.style.backgroundColor='green';">
<a href="#">Pseudo-Text</a>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br>
</div>

</body>
</html>
 
thegonz schrieb:
gibt es einen anderen lösungsansatz? per js den style wechseln oder ähnliches?
Zum Vergrößern anklicken....

Du kannst den Links ein display:block mit width und height geben.
Bsp:
Code: 
a.menu:link, a.menu:visited,  a.menu:hover, a.menu:active  {
  display:block;
  width:150px;
  height:30px;
  background-image: url(img/mainmenu_n.gif);
}
a.menu:hover {
  background-image: url(img/mainmenu_o.gif);
}
 
ich verstehe nicht ganz, wieso wenn ich nach einem bildaustausch frage mir die farbänderung erklärt wird ... hmmm ... egal

hab ich aber auch schon ausprobiert und zwar so:
HTML: 
<div id="MainMenu_1" onMouseOver="this.style.background-image='url(img/mainmenu_o.gif)';" onMouseOut="this.style.background-image='url(img/mainmenu_n.gif)';"><a href="#" class="mainMenu">Home</a></div>

funzt aber nicht ... hmmm

oder hab ich was falsch gemacht?
 
Moin!
thegonz schrieb:
oder hab ich was falsch gemacht?
Zum Vergrößern anklicken....
Eine Kleinigkeit: Eigenschaften, deren Bezeichnung in CSS einen Bindestrich enthält wie auch background-image müssen in Javascript des Bindestrichs beraubt und der folgende Buchstabe groß geschrieben werden => backgroundImage...

Ahoi - Pit
 
thegonz schrieb:
ich verstehe nicht ganz, wieso wenn ich nach einem bildaustausch frage mir die farbänderung erklärt wird ...
Zum Vergrößern anklicken....
Ähm - sehe nichts von wegen Erklärung der Farbänderung...

Nun zum eigentlichen Problem:
Warum solltest du JS verwenden, wenn es mit CSS einfacher und kompatibler funktioniert?
Außerdem verwundert mich, warum du für ein Menu <div>-Tages verwendest...
HTML: 
<style>
ul
{
  width: 150px;
  height: 20px;

  list-style-type: none;
}
ul li a
{
  width: 150px;
  height: 20px;

  display: block;

  background-image: url(background.png);
}
ul li a:hover
{
  background-image: url(background_hover.png);
}
</style>

<ul>
  <li><a href="#">Home</a></li>
</ul>
Wie immer ungetestet und die einfachste Version, d.h. es bedarf durchaus weiteren Anpassungen/Verbesserungen.
 
pit-r schrieb:
Moin!Eine Kleinigkeit: Eigenschaften, deren Bezeichnung in CSS einen Bindestrich enthält wie auch background-image müssen in Javascript des Bindestrichs beraubt und der folgende Buchstabe groß geschrieben werden => backgroundImage...

Ahoi - Pit
Zum Vergrößern anklicken....

Wunderbar ... das war es ... dankeschön :grin:

@RoyalKnight: denke dass der css-ansatz auf jedenfall der komfortablere wäre, aber das problem bei meinem menü ist, dass die 5 horizontalen menüpunkte verschiedene breiten haben. und dann funzt das mit den <li> nicht mehr oder?
 
thegonz schrieb:
@RoyalKnight: denke dass der css-ansatz auf jedenfall der komfortablere wäre, aber das problem bei meinem menü ist, dass die 5 horizontalen menüpunkte verschiedene breiten haben. und dann funzt das mit den <li> nicht mehr oder?
Zum Vergrößern anklicken....
Warum nicht?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben