| Autor |
Nachricht |
Errox
Threadersteller
Dabei seit: 04.08.2008
Ort: Braunschweig
Alter: -
Geschlecht: 
|
Verfasst Do 16.07.2009 13:20
Titel Übergeordneten Divcontainer ändern durch "mouseover&quo |
  |
|
Hallo.
Ich habe mir eine Menüleiste gebaut, auf der sich 3 Divcontainer befinden mit Links. Ich möchte nun, dass sich das Hintergrundbild der Menüleiste verändern, je nach dem, über welchen Link ich mit der Maus fahre.
Um das mal zu verdeutlichen:
[Menüleiste_____[Button1][Button2][Button3]__]
Wenn ich jetzt über [Button1] fahre, dann soll sich das Hintergrundbild0 der Menüleiste zu Hintergrundbild1 ändern.
Fahre ich mit der Maus über [Button2], soll sich das Hintergrundbild zu Hintergrundbild2 ändern. Usw.
Kann ich das mit CSS bewerkstelligen? Bekomme es einfach nicht gewuppt. 
Hatte natürlich ein wenig gegoogelt, aber nur Beschreibungen gefunden, wo es genau andersherum ist.
Meine Sheets sehen in etwa so aus:
| Code: |
#menüleiste {width:960px;padding-right:80px;background-image:url(hintergrundbild0.jpg)}
#button1 a {width:128px;height:32px;display:block}
#button1 a:hover#menüleiste {background-image:url(hintergrundbild1.jpg)}
(...)
|
Mein HTML-Code so:
| Code: |
(...)
<td id="menüleiste">
<div id="button1"><a href=""></a></div>
<div id="button2"><a href=""></a></div>
<div id="button3"><a href=""></a></div>
</td>
(...)
|
Hülfe. 
MfG
|
|
| |
  |
 |
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Do 16.07.2009 13:42
Titel Re: Übergeordneten Divcontainer ändern durch "mouseover |
|
|
| Errox hat geschrieben: |
Kann ich das mit CSS bewerkstelligen? |
nein. du kannst durch hover kein fremdes element (in dem falle dein übergeordnetes) ansprechen.
heißt: javascript.
|
|
| |
 |
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 16.07.2009 13:59
Titel Re: Übergeordneten Divcontainer ändern durch "mouseover |
|
|
| pixelpapst303 hat geschrieben: | | nein. du kannst durch hover kein fremdes element (in dem falle dein übergeordnetes) ansprechen. |
Naja, auf untergeordnete oder folgende schon 
| pixelpapst303 hat geschrieben: | | heißt: javascript. |
… oder etwas tricksen. Ich bin mir nicht sicher ob ich dich ganz richtig verstanden habe,
könntest du das vllt nochmal deutlicher grafisch darstellen?
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Do 16.07.2009 14:26
Titel
|
|
|
tricksen sicher... am einfachsten, wenn die buttons eh eine feste breite haben
edit: hier die unausgerfeifte 30grad-billig-lösung für umsonst 
| Code: |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#trickybangbang {
position: relative;
width: 700px;
}
#bang_1, #bang_2, #bang_3 {
position: absolute;
top:0px;
left: 0px;
width: 700px;
border: 1px solid #cccccc;
z-index: 2;
}
#bang_1 {
}
#bang_2 {
padding-left: 150px;
}
#bang_3 {
padding-left: 300px;
}
#bang_1:hover {
background-color: #cc0000;
z-index: 1;
}
#bang_2:hover {
background-color: #AAFF8F;
z-index: 1;
}
#bang_3:hover {
background-color: #FEFF8F;
z-index: 1;
}
</style>
<!-- ENDE inline-styles fuer die platzierung des contents (seitenabhaengig) -->
<body>
<div id="trickybangbang">
<a href="#" id="bang_1">[button 1]</a>
<a href="#" id="bang_2">[button 2]</a>
<a href="#" id="bang_3">[button 3]</a>
</div>
</body>
</html>
|
Zuletzt bearbeitet von pixelpapst303 am Do 16.07.2009 14:44, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Errox
Threadersteller
Dabei seit: 04.08.2008
Ort: Braunschweig
Alter: -
Geschlecht:
|
Verfasst Do 16.07.2009 20:59
Titel
|
|
|
Vielen Danke, pixelpapst303! Ist allerdings wirklich eine unausgereifte Lösung - bei mir flimmert es grün/gelb. 
Habe es dann nochmal auf Wunsch grafisch dargestellt:
Da aber die Buttons als <div> in der Menüleiste als <td> sind, habe ich das Problem, dass die Menüleiste übergeordnet ist. Ich hatte naturloch schon im Internet recherchiert, allerdings auch nur Anleitungen gefunden, wie man untergordnete Container per CSS mit diesem Effekt ausstatten kann.
Dass ich jetzt auf Javascript zurückgreifen muss, hatte ich mir auch gedacht und deshalb ebenfalls schon recherchiert, aber nichts in der Art gefunden - aber vielleicht bin ich zu doof. 
Wie löse ich das Problem mit Javascript? Sollte doch recht einfach sein, oder? 
|
|
| |
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 17.07.2009 08:58
Titel
|
|
|
Moin,
so schräge Geschichten könnte man auch mit background-images
lösen. Beispiel: http://zweitaccount.zw.ohost.de/schraegmenu/
Pixelpopes' css umgebaut sähe dann so aus:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Schräge Geschichte</title>
<style type="text/css">
#trickybangbang
{
position:relative;
top:5px;
left:5px;
}
#trickybangbang a
{
position: absolute;
background:url(btn_bg.gif) no-repeat top center;
display:block;
text-align:center;
top:0;
width: 190px;
height:38px;
line-height:34px;
z-index: 1;
}
#bang_1
{
left:0;
}
#bang_2
{
left: 165px;
}
#bang_3
{
left: 330px;
}
#trickybangbang a:hover
{
background-position:bottom center;
z-index: 2;
}
</style>
</head>
<body>
<div id="trickybangbang">
<a href="#" id="bang_1">[button 1]</a>
<a href="#" id="bang_2">[button 2]</a>
<a href="#" id="bang_3">[button 3]</a>
</div>
</body>
</html> |
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Fr 17.07.2009 13:54
Titel
|
|
|
ändert jedoch nichts "übergeordnetes"...
ich würde schlicht weg js nehmen und gut
|
|
| |
|
|
Errox
Threadersteller
Dabei seit: 04.08.2008
Ort: Braunschweig
Alter: -
Geschlecht:
|
Verfasst Fr 17.07.2009 14:09
Titel
|
|
|
Danke zweitaccount, das hilft mir aber nu bedingt.
Ich muss wirklich die übergeordnet Menüleiste verändern, wenn ich über die Buttons fahre.
Leider bin ich in Javascript praktisch garnicht bewandert - wird es kompliziert, oder kann man das recht flott auf zb selfhtml lernen?
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Hauptbild mit mouseover von Farbbildern ändern
Bildergalerie Mouseover andere Position & Mouseover Scroll
Flash8: Übergeordneten Film ansteuern
Videobox aus iFrame im übergeordneten Frame ausgeben
[HTML] Seite in Frame des übergeordneten Framesets Laden
Grafik soll sich der Größe eines übergeordneten Feldes autom
|
|
Willkommen auf dem Portal für Mediengestalter
