Rollover auf Image

kirchel · 8. April 2006

Hallo Zusammen!

Ich habe mit Hilfe von JS ein Menu gebaut, wenn man über ein Button (Bild) mit der maus fährt werden darunter verschiedene links eingeblendet.

Bei dem Menu hat mir ein Freund geholfen, was auch der Grund dafür ist weshalb ich da nicht so richtig duchsteige. Hab so gesehn von JS keine Ahnung.

Das ganze ist für mich als Einsteiger recht verwirrend aufgebaut, aber ich versuch trotzdem mal euch mein Problem etwas nächer zu bringen.

Folgender Queltext ist für das Bild bzw die Schaltfläche auf die ich einen Over Effekt erstellen möchte:

HTML:

<img src="Bilder/Web-Layout-Navi_01.gif" onmouseup="MM_showHideLayers('m1','','hide')" onmouseover="MM_showHideLayers('m1','','show') ;" onmouseout="MM_showHideLayers('m1','','hide');">

Ich arbeite mit Dreamveaver, wenn ich nun Versuche auf das Bild einen Effekt einzubinden passiert irgend wie nichts, oder aber er fügt nur das Bild ein und die Funktion zum einblenden der Links nicht mehr.

Bin mir nicht sicher ob ich noch mehr Queltext oder so benötigt um mir zu sagen wie ich da nen Over effekt drauf bekomme.

Wäre für eure hilfe sehr dankbar!

Kirchel

Biergamasda · 8. April 2006

Es währe hilfreich, wenn du mal den Quelltext der Funktion MM_showHideLayers() zeigen würdest, oder gar zusätzlich noch einen Link zu deiner Page hast, um sich das Problem mal genau anzusehen

Also, erstmal Quelltext und dann sehen wir weiter

lg Masda

kirchel · 8. April 2006

Das Hätte ich auch gleich machen könne!

Queltext der JS Datei:

HTML:

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function fixNetscape4(){
  NS4 = document.layers
  NSVer = parseFloat(navigator.appVersion)
  if (NSVer >= 5.0 || NSVer < 4.1) NS4 = false
  function forceReload() {
     location.reload()
  }
  if (NS4) onresize = forceReload();
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
function chkFormular()
{

if(document.Formular.userusername.value == "")
  {
   alert("Bitte einen Benutzername angeben!");
   document.Formular.userusername.focus();
   return false;
  }

if(document.Formular.userpasswort.value == "")
  {
   alert("Bitte ein Passwort angeben!");
   document.Formular.userpasswort.focus();
   return false;
  }


if(document.Formular.useremail.value == "")
  {
   alert("Bitte die E-Mail angeben!");
   document.Formular.useremail.focus();
   return false;
  }
 if(document.Formular.useremail.value.indexOf('@'&&'.') == -1)
  {
   alert("E-Mail Adresse ungültig!");
   document.Formular.useremail.focus();
   return false;
 
  }

   }

Queltext der CSS Datei:

HTML:

/* CSS Document */

			   a:link {
					color: #1C5BA2;
			}
			   a:visited {
					color: 1C5BA2;
			}
			   a:hover {
					color: #5C88BA;
			}
			   body,td,th {
					font-family: Arial, Helvetica, sans-serif;
					color: #1C5BA2;
			}  

          body {
              ...
              overflow: hidden;
			  backr
			  background-color:#CCCCCC;
          }
          #layout {
		  	  position: relative;
			  top: 40px;
              text-align: center; 
			  margin-left: auto;
			  margin-right: auto;
			  width: 723px;	
			  height: 402px;
			  border: 1px;	
			  boarder-color: #000000;	           
             
          }         
		  #head {
		  		position: absolute;
				top: 0px;        
              	left: 0px;        
				width: 723px;	
				height: 46px;
			 	background-image: url(Bilder/aspekte_01.gif);
				
			}
			#content {
				position: absolute;
				top: 46px;
				left: 0px;
				width: 723px;
				height: 224px;
				background-image: url(Bilder/Layoutcss_02.gif);
			}
				
			#footer {
				position: absolute;
				top: 300px;
				left: 0px;
				width: 723px;
				background-image: url(Bilder/aspekte_12.gif);
				height: 102px;			
			}
			
			
			  
			#navi1 {
				position: absolute;
				top: 270px;
				left: 0px;
				width: 52px;
				background-image:url(Bilder/Navi-CSS_01.gif); 	
				height:31px;
			}
			 
			 #navi {
				position: absolute;
				top: 270px;       
              	left: 52px;        
				width: 672px;	
				height: 31px;
				float: left;
				display: inline;
				
			}
						

			   #droptypo {
					display: block; 
					height: 1px;			
					
					width: 120px;
					line-height: 10px;
					font-size: 10px;
					font-color: #1C5BA2;
					background-color: transparent;
					border: 0px;
			}
								  
			
			   #m1 {

					position: absolute;
					left:72px;
					top: 300px;
						z-index:5;	
					visibility: hidden;  	
			}

			   #m2 {

					position: absolute;
					left:193px;
					top: 300px;
					z-index:5;	   
					visibility: hidden;

			}

			   #m3 {

					position:absolute;
					left:312px;
					top: 300px;
					z-index:5;	
					visibility: hidden;	
	
}

Und Das ist der Eigentlich HTML Code:

HTML:

<!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=iso-8859-1">
<title>Unbenanntes Dokument</title>
<script type="text/javascript" src="js_style.js"></script>
<link href="layout.css" rel="stylesheet" type="text/css">

</head>

<body onLoad="MM_preloadImages('Bilder/Web-Layout-Navi_01-over.gif')">
<div align="center">

<div id="layout">

<div id="head">
</div>


<div id="content">

</div> 

<div id="navi1"><img src="Bilder/Navi-CSS_01.gif"> 
</div>

<div onmouseover="MM_showHideLayers('m1','','show');" onmouseout="MM_showHideLayers('m1','','hide');" 
onmouseup="MM_showHideLayers('m1','','hide');" id="m1" >
<Div style="padding-top: 10px;" align="left" >
<a href="#" id="droptypo">Agentur</a><br>
<a href="#" id="droptypo">Team</a>

</div>
</div>
<div onmouseover="MM_showHideLayers('m2','','show');" onmouseout="MM_showHideLayers('m2','','hide');" 
onmouseup="MM_showHideLayers('m2','','hide');" id="m2">
<Div style="padding-top: 5px;" align="left" >
<a href="#" id="droptypo">Full Service</a><br>
<a href="#" id="droptypo">Corporate Design</a><br>
<a href="#" id="droptypo">Klassische Medien</a><br>
<a href="#" id="droptypo">Neue Medien</a><br>

</div>

</div>

<div onmouseover="MM_showHideLayers('m3','','show');" onmouseout="MM_showHideLayers('m3','','hide');" 
onmouseup="MM_showHideLayers('m3','','hide');" id="m3">
<Div style="padding-top: 5px;" align="left" >
<a href="#" id="droptypo">Alle Kunden</a><br>
<a href="#" id="droptypo">Air Liquide</a><br>
<a href="#" id="droptypo">BQS</a><br>
<a href="#" id="droptypo">Citel</a><br>


</div>
</div>


<div id="navi">

	<img src="Bilder/Web-Layout-Navi_01.gif" onmouseup="MM_showHideLayers('m1','','hide')" onmouseover="MM_showHideLayers('m1','','show') ;" onmouseout="MM_showHideLayers('m1','','hide');"><img src="Bilder/Web-Layout-Navi_02.gif" onmouseover="MM_showHideLayers('m2','','show'); " onmouseout="MM_showHideLayers('m2','','hide'); " onmouseup="MM_showHideLayers('m2','','hide')"><img src="Bilder/Web-Layout-Navi_03.gif"onmouseover="MM_showHideLayers('m3','','show'); " onmouseout="MM_showHideLayers('m3','','hide'); " onmouseup="MM_showHideLayers('m3','','hide')"><img src="Bilder/Web-Layout-Navi_04.gif"><img src="Bilder/Web-Layout-Navi_05.gif"><img src="Bilder/Web-Layout-Navi_06.gif">
	</div>




<div id="footer"></div>
</div>
</body>
</html>

Leider Kann ich die Seite nicht Onlinestellen, ich hoffe ihr habt nun alles was ihr braucht.

Danke das Ihr euch die zeit nehmt meinen wußt zu durchblicken!

kirchel · 10. April 2006

Keiner hier der einen kleinen denkanstoß parat hat?

Rollover auf Image

kirchel

Erfahrenes Mitglied

Biergamasda

Erfahrenes Mitglied

kirchel

Erfahrenes Mitglied

kirchel

Erfahrenes Mitglied

Neue Beiträge