✔ Bild mit Mousover in <div>-Tag

J

Jana64

Grünschnabel
Hallo,
ich habe meine Menübuttons mittels div und z-index über das Hintergrundbild gelegt. Bei Mouseover soll nun ein anderer, insgesamt größerer Button angezeigt werden, doch ich weiß nicht wie ich das in den div-Tag einbinden soll und dabei auch die Größenveränderung berücksichtigen kann.

Mit dem üblichen Mouseover
HTML: 
<html>
<head>
<script
language="JavaScript">
button1= new Image();
button1.src = "knopf.jpg"
button2= new Image();
button2.src = "email.jpg"
</script>
</head>
<body>
<a href="mailto:deine.mail@gmx.de"
onmouseover="austausch1.src='email.jpg';"
onmouseout="austausch1.src='knopf.jpg';">
<img src="knopf.jpg"
border="0" width="71"height="60"
name="austausch1">
</a>
</body>
</html>

konnte ich es nicht lösen.

Das hier ist mein Quelltext - bis jetzt

HTML: 
<html>
<head>
<style type="text/css">
#bg
{
   z-index:2;
   background:url(layout.png);
   position:fixed;
   top
   left
   border: 0;
}

#home
{
   z-index:1;
   position:fixed;
   top: 239px;
   left: 188px;
   border: 0;
}
 
#grafiken
{
   z-index:1;
   position:fixed;
   top: 239px; 
   left: 315px; 
   border: 0;
}
 
#malen
{
   z-index:1;
   position:fixed;
   top: 239px; 
   left: 442px; 
   border: 0;
}
#fotos
{
   z-index:1;
   position:fixed;
   top: 239px; 
   left: 569px; 
   border: 0;
}
#imp
{
   z-index:1;
   position:fixed;
   top: 239px; 
   left: 696px; 
   border: 0;
}
#main
{
   z-index:1;
   position:fixed;
   left: 197px; 
   top: 299px;
 
}
#frame
{
   z-index:1;
   position:inherit;
   width:801;
   height:600;
   frameborder: 0;
   border:0;
   scrolling:no;
   noresize
   FILTER:chroma (color=#FFFFFF);
}
</style>

</head>

<body id="bg" style="no-repeat">

<div id="home"><img src="home1.png"></div>
<div id="grafiken"> <img src="grafiken1.png"></div>
<div id="malen"> <img src="malen1.png"></div>
<div id="fotos"> <img src="fotos1.png"></div>
<div id="imp"> <img src="imp1.png"></div>

<div id="main">
  <iframe id="frame" src="main.html" name="main";>
  </iframe>
</div>

</body>
</html>

der Button home1.png (125x52px) soll nun bei Mouseover durch den Button home2.png (162x187px) ersetzt werden und einen Link zu home.html darstellen.

Kann mir jemand helfen...? Ich hoffe man versteht mein Anliegen überhaupt ^.^
Es soll später so aussehen wie im Anhang - also das ist natürlich nur eine Skizze :-P !

lg,
Jana64
 

Anhänge

  • vorschau.jpg
    vorschau.jpg
    34 KB · Aufrufe: 17
Jana64 hat gesagt.:
der Button home1.png (125x52px) soll nun bei Mouseover durch den Button home2.png (162x187px) ersetzt werden und einen Link zu home.html darstellen.
Zum Vergrößern anklicken....
Da dies einen grafischen Verweis ergeben soll, verwendest du anstelle der <div>-Elemente das dafür vorgesehene <a>-Element, und gibst diesen Elementen den eindeutigen ID-Bezeichner, also #home, #grafiken, #malen, usw.

Die Grafiken werden den Elementen nun als Hintergrundbild zugeordnet und per :hover-Pseudoklasse getauscht, wenn der Mauszeiger sie überfährt. Das erspart somit das Javascript zum Bildertausch.

Ich gehe davon aus, dass die Linkbeschreibung in den Grafiken enthalten ist, also schieben wir den Linktext in ein <span>-Element ein, das per CSS versteckt wird, und zum vorschein käme, wenn der Seitenbesucher in seinem Browser die Anzeige von Bilder sowie CSS-Interpretation deaktiviert haben sollte.

Hier folgt nun ein Beispiel für den ersten Menüpunkt "Home":

HTML: 
<a id="home" href=""><span>Home</span></a>
CSS: 
a { /* dieser Regelblock gilt für alle Verweise */
display:block;
text-decoration:none;
} 
a span {
display:none;
}
a#home {
width:125px;
height:52px;
background:url(home1.png) no-repeat;
}
a#home:hover {
width:162px;
height:187px;
background:url(home2.png) no-repeat;
}
 
Wow danke, das ja denkbar einfach zu lösen. Vielen herzlichen dank!
Zwei kleine Probleme bleiben mir...
1. Wenn die anders aussehende mouseover-grafik erscheint, sieht man die andere grafik noch immer im hintergrund. Gibt es eine Möglichkeit diese für den Moment auszublenden? z-index=3 geht nicht, da die mouseover-Grafik teilweise transparent ist.
Wenn nicht werde ich die Grafiken etwas anpassen, so dass sie sich decken.
2.Habe gerade gemerkt, dass mein Hintergrundbild im Firefox nicht angezeigt wird. Das Problem kenne ich, aber die Lösung habe ich vergessen. Wie konnte man das beheben?

Danke schonmal!
Jana64
 
Bei transparenten Bildern nützt die Schichtpositionierung nichts ;)

Wenn du meinen gezeigten CSS-Code vollständig übernommen hast, der darin angegebene Pfad zu den Bilddateien stimmt, sollte FF das Hintergrundbild auch anzeigen.

Eventuell mal seinen Browsercache leeren, und anschliessend die Seite neu aufrufen, denn möglicherweise nutzt er noch die vorherige Fassung des Stylesheets.
 
Huch - was ist denn jetzt passiert ?
Mir fiel auf das nach dem </head> ein <body> fehlte. Doch wenn ich das einfüge, werden alle CSS Styleangaben ignoriert o.0 Kann ich es einfach weglassen?

Den Hintergrund habe ich nicht durch <body style="background-image:url(background.jpg)"> definiert (das funktionierte auch nicht in FF) sondern als normales Bild, dass fixiert in der hintersten Ebene liegt.
HTML: 
<style type="text/css">
#bg
{
   z-index:1;
   position:fixed;
   top:0px;
   left:0px;
   border: 0;
}
</style>
</head>

<div id="bg"><img src="layout.png"></div>
</body>

Cache leeren brachte nichts, der Pfad stimmt auf jeden Fall.
Gibt es noch eine andere Möglichkeit, die vielleicht in FF funktionieren könnte?
 
In deinem eingangs gezeigten HTML-Code besaß noch das <body>-Element die ID #bg.

Und nein, dieses Element kannst du nicht einfach weglassen.

Warum bei dir im FF die Hintergrundbilder der Links nicht erscheinen, kann ich im Blindflug nicht nachvollziehen, denn mein gezeigter HTML- u. CSS-Code funktioniert hier im FF tadellos.
 
Zuletzt bearbeitet:
Oh stimmt. Ich hatte etwas geändert, habe es jetzt wieder zum eingangs gezeigten Code geändert.
Ich merke gerade, dass FF, wenn ich den Pfad der Bilddatei aufrufe sagt, sie wäre fehlerhaft. Was ich zwar nicht verstehe, aber dann liegt das Problem in jedem Falle nicht bei der Codierung.

Vielen Dank für Ihre schnelle Hilfe!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück