Psy: img erscheinen lassen bei a:hover

Beitrag lesen

SELF-Forum

img erscheinen lassen bei a:hover

Psy
– 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