Abfrage mit HTML Text da oder nicht

E

EuropaChat

Erfahrenes Mitglied
Hallo,

habe auf meiner Webseite links ein aufklappmenü programmiert.


Aber wenn man mit der Maus auf das Menü fährt, wird es größer, wie mach ich das, das es das Markus K nicht angezeigt wird und nur noch das Impressum unten dran ist sobalt es offen ist? Und wenn es geschlossen ist sollte nur Markus K ohne Impressum sein

http://wakestars.onpw.de/

Wie kann ich das mit einer Abfrage machen?


Gruß Markus K.
 
Mit javascript müsste das eigentlich rellativ einfach funktionieren.. Allerdings weiß ich ja nicht wie du es genau gemacht hast deshalb kann ich dir kein passendes codebeispiel nennen

lG
 
So hab ich es mal gemacht aber mehr weiß ich nicht:

PHP: 
<script type="text/javascript">
    $(function() {
        $('#leiste').hover(function(){
            $(this).animate({left:'0px'},{queue:false,duration:500});
            var text = "Impressum";
            var top = "430px";
        },            
        function(){
            $(this).animate({left:'-150px'},{queue:false,duration:500});
            var text = "Markus K";
            var top = "430px";                
        });
    document.getElementById('ani_impressum').innerHTML = text;
    document.getElementById('ani_impressum').style.top = top;    
    });

</script>


So hier mal der Code:

PHP: 
body {
    background-image:url('http://1.bp.blogspot.com/-dTbFUj0CESE/TcWQLKsX36I/AAAAAAAABAI/yM9Nrig1oGc/s1600/2010-bmw-m6-interior.jpg');
    background-size:100%;
    background-attachment:fixed;
}
#leiste {
background-image:url('http://wakestars.onpw.de/images/leiste.png');
position: fixed;
height: 100%;
top: 0px;
left: -150px;
width: 200px;
}


PHP: 
<!DOCTYPE html>
<html>
	
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Markus K</title>
<link type="text/css" rel="stylesheet" href="http://wakestars.onpw.de/css/design.css">

</head>
<!-- Menü links -->	
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#leiste').hover(function(){
				$(this).animate({left:'0px'},{queue:false,duration:500});
			}, function(){
				$(this).animate({left:'-150px'},{queue:false,duration:500});
			});
		});

		</script>
</head>
<body>
<div id="leiste"></div>
<!-- Text im linken Menü -->	
<div style="position:absolute; top:30px; left:6px; width:35px; padding:10px; margin-right:left; margin-bottom:left">
<b><font size="4" color="#FFFFFF ">M<br>A<br>R<br>K<br>U<br>S<br><br><br>K<br><br><br></font></b></div>
<!-- Impressum -->
<div style="position:absolute; top:430px; left:6px; width:283px; padding:10px; margin-right:left; margin-bottom:left">
<b><font size="4" color="#FFFFFF ">      <p>Inhaber: Markus K<br>
Straße 100<br>
00000 Augsburg<br>
      <u><br>
      </u>Telefon: +49 (0) 15204166092<u><br><br>
      </u>E-Mail: Info@WakeStars.de<br>
E-Mail: Markus@WakeStars.de<span style="text-decoration: underline;"></span><br>
      </p></font></b></div>
<!-- Impressum ENDE -->
</body>
</html>
 
Zuletzt bearbeitet:
<style type="text/css">
... {

background-image: url(images/bg_allsite.jpg);
background-repeat: no-repeat;

}
</style>
und bei bedarf halt strecken(height: 200% width: 400%)
 
Zuletzt bearbeitet:
Versuchs mal mit nem anderen Bild mach sie kleiner im Browser verkleinern ist nie gut...

Außerdem solltest du dringend sauberer arbeiten..
lese dich mal in html5 ein ..
lg


css-code:

Code: 
@CHARSET "ISO-8859-1";

body 
	{
	 	background-image:url('http://wakestars.onpw.de/images/background.jpg');
	  	background-repeat: no-repeat;
		background-position:absolute;
		top:10%;
		left:10%;
 	}
 #leiste 
 	{
		 background-image:url('http://wakestars.onpw.de/images/leiste.png');
		 position:absolute;
		 height: 100%;
		 top: 0%;
		 left: 1%;
		 width: 10%;
 	}
 
 #ani_impressum
 	{
 		position:absolute;
 		top:30px; 
 		left:150px; 
 		width:50px; 
 		text-align:center;
 	}




Html:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 <title>Markus K</title>
 <link rel="stylesheet" href="css/design.css">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
 <script type="text/javascript">
 $(function() {
 $('#leiste').hover(function(){
 $(this).animate({left:'0px'},{queue:false,duration:500});
 var text = '<b><font size="4" color="#FFFFFF "><p><u>Inhaber:</u><br>Markus K<br>Straße 100<br>00000 Augsburg<br><br><u>Telefon:</u><br>+49 (0) 15204166092<br><br><u>E-Mail:</u><br>Info@WakeStars.de</p></font></b>';
 document.getElementById('ani_impressum').innerHTML = text;
 var align = 'left';
 var width = '190px';
 var left = '10px';
 var top = '430px';
 document.getElementById('ani_impressum').innerHTML = text;
 document.getElementById('ani_impressum').style.textAlign = align;
 document.getElementById('ani_impressum').style.width = width;
 document.getElementById('ani_impressum').style.left = left;
 document.getElementById('ani_impressum').style.top = top; 
 }, 
 function(){
 $(this).animate({left:'-150px'},{queue:false,duration:500});
 var text = '<b><font size="4" color="#FFFFFF ">M<br>A<br>R<br>K<br>U<br>S<br><br>K</font></b>';
 var align = 'center';
 var width = '50px';
 var left = '150px';
 var top = '30px';
 document.getElementById('ani_impressum').innerHTML = text;
 document.getElementById('ani_impressum').style.textAlign = align;
 document.getElementById('ani_impressum').style.width = width;
 document.getElementById('ani_impressum').style.left = left;
 document.getElementById('ani_impressum').style.top = top; 
 });
 });
 </script>
 </head>
 <body>
 <div id="leiste">
 <div id="ani_impressum">
 
 
 M<br>A<br>R<br>K<br>U<br>S<br><br>K
 

 
 
 </div>
 </div>
 </body>
 </html>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück