img erscheinen lassen bei a:hover von Detlef G., 25.08.2009 17:07

img erscheinen lassen bei a:hover

psy 21.08.2009 18:05

Moin,

so vorweg ich habe gesucht und nichts zu meiner frage gefunden, sollte ich irgendetwas übersehen haben tut es mir Leid.

Stimmt auch nicht so ganz ich habe ähnliche Sachen gefunden nur damit bin ich nicht auf die Lösung gekommen.

Also ich möchte eine 3 Ebenennavigation erstellen, in dieser soll wenn man über einen Link geht der ein Untermenü hat ein Bild an einer bestimmten Position erscheinen und auch da bleiben bis man das Menü komplett verlässt.

Das Menü selber steht und Funktioniert ( unter anderem dank der Hilfe von selfhtml).

Wie man mittels div´s oder links das macht das irgendwo ein Bild erscheint bekomme ich auch hin.

Mein Problem ist das das Bild bei mehreren links an der gleichen stelle stehen soll und wenn ich die Möglichkeit hier aus dem Forum nehme ist das Problem das sich die Höhe das erscheinenden Bildes immer an dem Grade ausgewähltem Link orientiert.

Code poste ich noch nach habe ich Grad nicht dabei, aber vielleicht könnt Ihr mir ja schon mal Tipps geben wonach ich suchen muss.

Am liebsten kein JS, PHP und sonstiges, wenns geht in CSS.

mit freundlichen Grüßen

Psy

Beitrag melden

– Informationen zu den Bewertungsregeln

img erscheinen lassen bei a:hover

ChrisB 21.08.2009 21:20

– Informationen zu den Bewertungsregeln

Hi,

Mein Problem ist das das Bild bei mehreren links an der gleichen stelle stehen soll

Dann bietet sich absolute Positionierung vielleicht an.

MfG ChrisB

--
Light travels faster than sound - that's why most people appear bright until you hear them speak.

Beitrag melden

– Informationen zu den Bewertungsregeln

img erscheinen lassen bei a:hover

psy 25.08.2009 15:15

– Informationen zu den Bewertungsregeln

Hi,

danke für die schnelle Antwort.

Dann bietet sich absolute Positionierung vielleicht an.

Ja dachte ich auch, das Problem damit ist nur das sich die Position aber immer an dem Grade ausgewähltem Link orientiert.

Dadurch rutscht mir das Bild auch immer eine Reihe tiefer wenn ich auf den nächsten tieferen Link gehe.

Ich weiß auch nicht irgendwie stehe ich mit der Sache auf dem Schlau.

Es soll bei jedem Link das gleiche Bild an der gleichen stelle erscheinen.
Wenn ich das mit absolute Positionierung mache muss ich für jeden Link ein Bild mit neuen Positionen nehmen. Aber das ist in diesem Fall übertrieben da ich nur ein Bild habe.

Das soll der Navigationshintergrund für das ausklapp Menü werden.

Mein CSS für das Menü:

#out {float:left; padding:0; margin:3px 0 0 75px; list-style:none; position:relative; width:120px;}  
#out ul {padding:0; margin:0; list-style:none; width:120px; height:auto; background: url(file:///C|/Dokumente%20und%20Einstellungen/Hachem/Desktop/1/trans.gif); position:absolute; left:-9999px; top:0;}  
  
#out li {float:left; margin-bottom:1px;}  
#out li a {display:block; float:left; width:120px; height:24px; color:#000; line-height:24px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; text-decoration:none; }  
  
  
#out li:hover {position:relative;}  
#out li a:hover {position:relative;  color:#fff;}  
#out li:hover > a { color:#fff;}  
  
#out :hover ul, #out :hover ul :hover ul {left:120px;}  
  
#out :hover ul ul {left:-9999px;}  
  
body {  
	background-color: #999999;  
}

Das HTML dazu:

<body>  
<ul id="out">  
	<li><a href="#url">eins</a>  
	  <ul>  
			<li><a href="#url">1,1</a></li>  
			<li><a class="fly" href="#url">1,2</a>  
			  <ul>  
					<li><a href="#url">1,1,1</a></li>  
					<li><a href="#url">1,1,2</a></li>  
			  </ul>  
			</li>  
			<li><a href="#url">1,2</a>  
			  <ul>  
					<li><a href="#url">1,2,1</a></li>  
					<li><a href="#url">1,2,2</a></li>  
                                        <li><a href="#url">1,2,3</a></li>  
			  </ul>  
			</li><li><a href="#url">1,3</a>  
			  <ul>  
					<li><a href="#url">1,3,1</a></li>  
					<li><a href="#url">1,3,2</a></li>  
                                     <li><a href="#url">1,3,4</a></li>  
			  </ul>  
			</li><li><a href="#url">1,4</a>  
			  <ul>  
					<li><a href="#url">1,4,1</a></li>  
					<li><a href="#url">1,4,2</a></li>  
			  </ul>  
			</li>  
	  </ul>  
	</li>  
	<li><a href="#url">zwei</a>  
	  <ul>  
			<li><a href="#url">2,1</a>  
			  <ul>  
					<li><a href="#url">2,1,1</a></li>  
					<li ><a href="#url">2,1,2</a></li>  
			  </ul>  
			</li>  
			<li><a href="#url">2,2</a>  
			  <ul>  
					<li><a href="#url">2,2,1</a></li>  
					<li><a href="#url">2,2,2</a></li>  
			  </ul>  
			</li><li><a href="#url">2,3</a>  
			  <ul>  
					<li><a href="#url">2,3,1</a></li>  
					<li><a href="#url">2,3,1</a></li>  
			  </ul>  
			</li><li><a href="#url">2,4</a>  
			  <ul>  
					<li><a href="#url">2,4,1</a></li>  
					<li><a href="#url">2,4,2</a></li>  
                    <li><a href="#url">2,4,3</a></li>  
			  </ul>  
			</li>  
	  </ul>  
	</li>  
	<li><a href="#url">drei</a></li>  
</ul>  
</body>

Das ganze kommt dann über ein Bild, aber nur die erste Menüebene, daneben ist dann ein anderes größeres Bild über den Rest der Seite.
Wenn ich jetzt über einen Link gehe und die zweite Menüebene ausklappt soll darunter in gleicher höhe und breite ein Bild als Hintergrund für das Untermenü erscheinen und das Bild was sonst dort ist überdecken oder austauschen.

Mit freundlichen Grüßen

Psy

Beitrag melden

– Informationen zu den Bewertungsregeln

img erscheinen lassen bei a:hover

Detlef G. 25.08.2009 17:07

– Informationen zu den Bewertungsregeln

Hallo psy

Ja dachte ich auch, das Problem damit ist nur das sich die Position aber immer an dem Grade ausgewähltem Link orientiert.

Weil dieser bzw. die <ul> position:relative hat.

Es soll bei jedem Link das gleiche Bild an der gleichen stelle erscheinen.

Egal, wo der Mauszeiger über das Menü kommt, immer das gleiche, oder verschiedene, in Abhängigkeit vom Link der ersten Ebene?

Wenn ich das mit absolute Positionierung mache muss ich für jeden Link ein Bild mit neuen Positionen nehmen. Aber das ist in diesem Fall übertrieben da ich nur ein Bild habe.

OK, also wirklich nur ein Bild.

Das soll der Navigationshintergrund für das ausklapp Menü werden.

Also kein Bild, sondern ein Hintergrundbild für die gesamte Navigation, welches nur beim Überfahren angezeigt wird?

Das ganze kommt dann über ein Bild, aber nur die erste Menüebene, daneben ist dann ein anderes größeres Bild über den Rest der Seite.

Aha, also nur als Hintergrund der ersten Menüebene, dann weise es doch einfach #out oder #out:hover zu.

Wenn ich jetzt über einen Link gehe und die zweite Menüebene ausklappt soll darunter in gleicher höhe und breite ein Bild als Hintergrund für das Untermenü erscheinen und das Bild was sonst dort ist überdecken oder austauschen.

Also doch nicht für die erste, sondern für die zweite Menüebene beginnend mit der Oberkannte der ersten Ebene.

Sorry, ich bin etwas verwirrt, was du genau willst.

Kannst du uns ein paar Bilder machen, wie es aussehen soll, ich habe keine Vorstellung davon.

Auf Wiederlesen
Detlef

--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!

Beitrag melden

– Informationen zu den Bewertungsregeln

img erscheinen lassen bei a:hover

psy 25.08.2009 18:10

– Informationen zu den Bewertungsregeln

Hi Detlef,

danke für die schnelle Antwort.

Sorry, ich bin etwas verwirrt, was du genau willst.

Kannst du uns ein paar Bilder machen, wie es aussehen soll, ich habe keine
Vorstellung davon.

Ja meine Lehrer meinten auch schon immer das die nicht verstehen was ich Eigentlich schreibe oder damit meine.

Ich versuche mal was Fertig zumachen, zum besseren Verständnis.

Aber das kann wohl noch bis zum WE dauern.

aber Vielleicht hilft das erstmal

Webseite:

festes Hintergrundbild in 4 ungleich große teile geslice
2 im Headbereich
1 als Navigationshintergrung
1 als eigentlicher Seitenhintergrund

Also die zusammengeklappte Navigation hat kein eigenes Hintergrundbild sondern nutz das Seitenhintergrundbild dafür,
wenn ich jetzt die erste Ebene ausklappe sind die Menüpunkte nicht mehr auf dem dafür vorgesehenen Hintergrund ( das ist so gewohlt).
Da soll dann ein Bild einen bestimmten teil des Seitenhintergrundes ersetzten, entweder als eigenständiges Bild oder als Hintergrundbild es muss nur an die Richtige stelle mit der Richtigen große.
So und das gleiche mit der dritten Ebene meiner Navigation.

Die Bilder sollen auch solange sichtbar sein wie das jeweilige Untermenü.

Mit freundlichen Grüßen

Psy

P.s. wie gesagt ich versuche am besten mal das Menü online zu stellen und ein paar bilder zum verdeutlichen zu machen aber klappt warscheinlich erst zum wochenende.

Beitrag melden

– Informationen zu den Bewertungsregeln

img erscheinen lassen bei a:hover

Psy 29.08.2009 12:49

– Informationen zu den Bewertungsregeln

So,

unter dem ersten Link ist ein Bild wir ich mir die Seite im Normalzustand vorstelle wobei das Hintergrund sponsord bei Windows ist da das Bild was da mal Hin soll noch nicht Fertig ist.

bild 1

Also wenn noch über kein Link gegangen wurde.

So wie auf dem zweiten Bild soll es dann aussehen wenn man auf einen Link in der Navigation geht.

bild 2

Und auf dem dritten Bild dann wenn man auf einem Link im ersten Untermenü geht.

bild 3

Also es soll jeweils ein weiteres Bild erscheinen und solange dableiben wie man auf den Link der entsprechenden Menüebene ist.

Hier dann erstmal mein Code ohne versuche die Bilder erscheinen zulassen.
HTML:

<body>  
<div id="b-eins"><img src="bilder/erklaeungen-1_01.jpg" /><img src="bilder/erklaeungen-1_04.jpg" /></div>  
<div id="b-zwei"><img src="bilder/erklaeungen-1_02.jpg" /></div>  
<div id="b-drei"><img src="bilder/erklaeungen-1_03.jpg" /></div>  
 <div id="b-vier"><img src="bilder/erklaeungen-1_04.jpg" /></div>  
<ul id="out">  
	<li><a   href="#url">1<!--[if gte IE 7]><!--></a><!--<![endif]-->  
	<!--[if lte IE 6]><table><tr><td><![endif]-->  
	  <ul>  
			<li><a href="#url">11</a></li>  
			<li><a href="#url">22<!--[if gte IE 7]><!--></a><!--<![endif]-->  
			<!--[if lte IE 6]><table><tr><td><![endif]-->  
			  <ul>  
					<li><a href="#url">221</a></li>  
					<li><a href="#url">222</a></li>  
			  </ul>  
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->  
			</li>  
			<li><a href="#url">23<!--[if gte IE 7]><!--></a><!--<![endif]-->  
			<!--[if lte IE 6]><table><tr><td><![endif]-->  
			  <ul>  
					<li><a href="#url">333</a></li>  
					<li><a href="#url">33334</a></li>  
                    <li><a href="#url">442423</a></li>  
			  </ul>  
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->  
			</li><li><a href="#url">231123<!--[if gte IE 7]><!--></a><!--<![endif]-->  
			<!--[if lte IE 6]><table><tr><td><![endif]-->  
			  <ul>  
					<li><a href="#url">1231</a></li>  
					<li><a href="#url">123123</a></li>  
                    <li><a href="#url">123^123</a></li>  
			  </ul>  
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->  
			</li><li><a href="#url">1231<!--[if gte IE 7]><!--></a><!--<![endif]-->  
			<!--[if lte IE 6]><table><tr><td><![endif]-->  
			  <ul>  
					<li><a href="#url">234534</a></li>  
					<li><a href="#url">2345</a></li>  
			  </ul>  
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->  
			</li>  
	  </ul>  
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->  
  </li>  
	<li><a href="#url">54<!--[if gte IE 7]><!--></a><!--<![endif]-->  
	<!--[if lte IE 6]><table><tr><td><![endif]-->  
	  <ul>  
			<li><a href="#url">N45<!--[if gte IE 7]><!--></a><!--<![endif]-->  
			<!--[if lte IE 6]><table><tr><td><![endif]-->  
			  <ul>  
					<li><a href="#url">4545</a></li>  
					<li ><a href="#url">454</a></li>  
			  </ul>  
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->  
			</li>  
		<li ><a href="#url">45454<!--[if gte IE 7]><!--></a><!--<![endif]-->  
			<!--[if lte IE 6]><table><tr><td><![endif]-->  
			  <ul>  
					<li><a href="#url">4545</a></li>  
					<li><a href="#url">4545</a></li>  
			  </ul>  
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->  
		</li><li  ><a href="#url">454545<!--[if gte IE 7]><!--></a><!--<![endif]-->  
			<!--[if lte IE 6]><table><tr><td><![endif]-->  
			  <ul>  
					<li><a href="#url">45454</a></li>  
					<li><a href="#url">454545</a></li>  
			  </ul>  
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->  
			</li><li ><a   href="#url">38<!--[if gte IE 7]><!--></a><!--<![endif]-->  
			<!--[if lte IE 6]><table><tr><td><![endif]-->  
			  <ul>  
					<li><a href="#url">4534534</a></li>  
					<li><a href="#url">3834534</a></li>  
                    <li><a href="#url">33455</a></li>  
			  </ul>  
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->  
			</li>  
	  </ul>  
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->  
  </li>  
	<li><a href="#url">34555555555<!--[if gte IE 7]><!--></a><!--<![endif]-->  
	<!--[if lte IE 6]><table><tr><td><![endif]-->  
	  <ul>  
			<li><a href="#url">3345345</a></li>  
			<li><a href="#url">3453453345</a></li>  
	  </ul>  
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->  
  </li>  
	<li><a href="l">Impressum</a></li>  
</ul>  
</body>

Dann das CSS:

<style type="text/css">  
#b-eins{position:absolute; top:30px; left:50px; z-index:-1;}  
#b-zwei{position:absolute; top:30px; left:187px; z-index:-1;}  
#b-drei{position:absolute; top:87px; left:50px; z-index:-1;}  
#b-vier{position:absolute; top:87px; left:187px; z-index:-1;}  
  
  
#out {float:left; padding:0; margin:87px 0 0 50px; list-style:none; width:120px;}  
#out ul {padding:0; margin:0; list-style:none; width:120px;  background: url(file:///C|/Dokumente%20und%20Einstellungen/Hachem/Desktop/1/trans.gif); position:absolute; left:-9999px; top:0; }  
#out table {border-collapse:collapse; width:0; height:0; margin:-1px -10px;}  
  
#out li {float:left; }  
#out li a {float:left; width:120px;  padding:0 0 50px 0;color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; text-decoration:none; }  
  
#out li:hover {position:relative;}  
#out li a:hover {color:#fff; }  
#out li:hover > a {color:#FF6600;}  
  
#out :hover ul, #out :hover ul :hover ul {left:120px;}  
  
#out :hover ul ul {left:-9999px;}  
  
body {  
	background-color: #999999;  
}  
</style>

Ich hoffe Ihr könnt mir weiterhelfen ich komme da nicht weiter Wahrscheinlich nur nen Denkfehler oder so aber ich stehe voll auf dem Schlauch.

Mit freundlichen Grüßen

Psy

Beitrag melden

– Informationen zu den Bewertungsregeln

img erscheinen lassen bei a:hover

Detlef G. 30.08.2009 18:44

– Informationen zu den Bewertungsregeln

Hallo Psy,

Verlinken wäre besser gewesen:
bild 1
bild 2
bild 3

Hier dann erstmal mein Code ohne versuche die Bilder erscheinen zulassen.
HTML:

Besser wäre gewesen, dies irgendwo hochzuladen und hier zu verlinken.
Mit dem Code wirst du vermutlich nicht viel Freude haben, besonders wenn die Bilder nicht der einzige Inhalt bleiben sollen.
Hast du dir überhaupt vorgestellt, wie es aussehen soll, wenn dein Seitenbesucher nicht genau die von dir erwartete Fenstergröße hat?

<li><a href="#url">1</a>

»»

  
Diese ganzen IE-Krücken funktionieren bei mir nicht. Lasse sie besser weg und schreibe das CSS so, dass alte IEs eine einfache Linkliste bekommen. Wenn du unbedingt willst, kannst du ja für den Fall, dass Javascript aktiviert ist, damit die Liste zu und bei onmouseover wieder einblenden.  
  

> Ich hoffe Ihr könnt mir weiterhelfen ich komme da nicht weiter Wahrscheinlich nur nen Denkfehler oder so aber ich stehe voll auf dem Schlauch.  
  
Ich denke, dein ganzer Seitenaufbau ist ein Denkfehler.  
Schau dir mal den Artikel an: [Teiltransparente Bereiche](http://aktuell.de.selfhtml.org/artikel/design/teiltransparenz/)  
  
Du könntest also für aktuelle Browser einfach eine teiltransparente Grafik drüberlegen, wobei dann keine pixelgenaue Justierung erforderlich wäre.  
Wenn du allerdings eine undurchsichtige Grafik verwenden willst, dann erstelle dir eine Grafik, die den gesamten dunklen Bereich enthält.  
Dann setzte vor jedes öffnende <ul> ein <span></span> ein.  
~~~html
  <span></span>  
   <ul>

Und das folgende CSS als Beispiel für ein mögliches Prinzip:

html, body {  
  background-color: #999999;  
  margin:0;  
  padding:0;  
  height:100%;  
  overflow:hidden;  
}  
#out li span, #out li:hover li span  
 {  
  position:absolute;  
  top:-1000px;  
  left:-9999px;  
  background: url(dunkel.png) fixed 50px 87px;  
  display:block;  
  width:120px;  
  height:2000px;  
}  
#out li:hover span, #out li li:hover span {  
  left:120px;  
}

Auf Wiederlesen
Detlef

--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

psy: img erscheinen lassen bei a:hover

img erscheinen lassen bei a:hover

img erscheinen lassen bei a:hover

img erscheinen lassen bei a:hover

img erscheinen lassen bei a:hover

img erscheinen lassen bei a:hover

img erscheinen lassen bei a:hover

img erscheinen lassen bei a:hover

img erscheinen lassen bei a:hover