mouse popup menü
Marcus M.
- html
Na ihr lieben leutz,
mache seit zwei jahren eine ausbildung zum webdesigner, aber trotz allem bin ich noch nie hinter dieses problem gekommen. also ich will ein einfaches rollover menü machen. auf gut deutsch: soll sobald ich mit dem mauszeiger über dieses button gehe, ein rollover erscheinen, das mehrere schaltflächen enthält. aber sobald das rollover größer ist als die normale schaltfläche zerlegt html logischer weiße mir die ganze tabelle in einzelne stücke, weil das rollover zu groß ist und nicht in die <td> reinpaßt. also wie ich hier so gelesen habe habt ihr (die meißten) SEHR viel ahnung, hoffe das mir jemand helfen kann.....hier ist mal mein quelltext
<html>
<head>
<title>MEBUS online</title>
<csscriptdict>
<script><!--
CSInit = new Array;
function CSScriptInit() {
if(typeof(skipPage) != "undefined") { if(skipPage) return; }
idxArray = new Array;
for(var i=0;i<CSInit.length;i++)
idxArray[i] = i;
CSAction2(CSInit, idxArray);}
CSAg = window.navigator.userAgent; CSBVers = parseInt(CSAg.charAt(CSAg.indexOf("/")+1),10);
function IsIE() { return CSAg.indexOf("MSIE") > 0;}
function CSIEStyl(s) { return document.all.tags("div")[s].style; }
function CSNSStyl(s) { return CSFindElement(s,0); }
function CSFindElement(n,ly) { if (CSBVers < 4) return document[n];
var curDoc = ly ? ly.document : document; var elem = curDoc[n];
if (!elem) { for (var i=0;i<curDoc.layers.length;i++) {
elem = CSFindElement(n,curDoc.layers[i]); if (elem) return elem; }}
return elem;
}
function CSClickReturn () {
var bAgent = window.navigator.userAgent;
var bAppName = window.navigator.appName;
if ((bAppName.indexOf("Explorer") >= 0) && (bAgent.indexOf("Mozilla/3") >= 0) && (bAgent.indexOf("Mac") >= 0))
return true; // dont follow link
else return false; // dont follow link
}
function CSButtonReturn () {
var bAgent = window.navigator.userAgent;
var bAppName = window.navigator.appName;
if ((bAppName.indexOf("Explorer") >= 0) && (bAgent.indexOf("Mozilla/3") >= 0) && (bAgent.indexOf("Mac") >= 0))
return false; // follow link
else return true; // follow link
}
CSIm = new Object();
function CSIShow(n,i) {
if (document.images) {
if (CSIm[n]) {
var img = (!IsIE()) ? CSFindElement(n,0) : document[n];
if (img && typeof(CSIm[n][i].src) != "undefined") {img.src = CSIm[n][i].src;}
if(i != 0)
self.status = CSIm[n][3];
else
self.status = " ";
return true;
}
}
return false;
}
function CSILoad(action) {
im = action[1];
if (document.images) {
CSIm[im] = new Object();
for (var i=2;i<5;i++) {
if (action[i] != '') { CSIm[im][i-2] = new Image(); CSIm[im][i-2].src = action[i]; }
else CSIm[im][i-2] = 0;
}
CSIm[im][3] = action[5];
}
}
CSStopExecution = false;
function CSAction(array) {
return CSAction2(CSAct, array);
}
function CSAction2(fct, array) {
var result;
for (var i=0;i<array.length;i++) {
if(CSStopExecution) return false;
var actArray = fct[array[i]];
if(actArray == null) return false;
var tempArray = new Array;
for(var j=1;j<actArray.length;j++) {
if((actArray[j] != null) && (typeof(actArray[j]) == "object") && (actArray[j].length == 2)) {
if(actArray[j][0] == "VAR") {
tempArray[j] = CSStateArray[actArray[j][1]];
}
else {
if(actArray[j][0] == "ACT") {
tempArray[j] = CSAction(new Array(new String(actArray[j][1])));
}
else
tempArray[j] = actArray[j];
}
}
else
tempArray[j] = actArray[j];
}
result = actArray0;
}
return result;
}
CSAct = new Object;
// --></script>
</csscriptdict>
<csactiondict>
<script><!--
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button',/*URL*/'../images/index_05.jpg',/*URL*/'../buttons/balken_oben.jpg',/*URL*/'','');
// --></script>
</csactiondict>
</head>
<body bgcolor="#ffffff" onload="CSScriptInit();">
<table border="0" cellpadding="0" cellspacing="0" width="220">
<tr>
<td rowspan="3"><img src="file:///Z:/homepage/hp/index/index/Abstandhalter.gif" width="1" height="1" border="0"><img src="file:///Z:/homepage/hp/index/images/index_01.jpg" width="110" height="133" border="0"></td>
<td width="63"><img src="file:///Z:/homepage/hp/index/images/index_02.jpg" width="63" height="92" border="0"></td>
<td colspan="6"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="601" height="92">
<param name="movie" value="../animation/animation2.swf">
<param name="quality" value="best">
<param name="play" value="true">
<embed src="../animation/animation2.swf" type="application/x-shockwave-flash" width="601" height="92" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" quality="best" play="true">
</object></td>
</tr>
<tr>
<td colspan="7"><img src="file:///Z:/homepage/hp/index/images/index_04.jpg" width="690" height="21" border="0"></td>
</tr>
<tr>
<td width="63" bgcolor="white" background="(Empty Reference!)"><csobj w="63" h="20" t="Button" ht="../buttons/balken_oben.jpg"><a href="#" onmouseover="return CSIShow(/*CMP*/'button',1)" onmouseout="return CSIShow(/*CMP*/'button',0)" onclick="return CSButtonReturn()"><img src="../images/index_05.jpg" width="63" height="20" name="button" border="0"></a></csobj></td>
<td><img src="file:///Z:/homepage/hp/index/images/index_06.jpg" width="117" height="20" border="0"></td>
<td><a href="../../3neuheiten/nueheiten.html" target="frame_ziel"><img src="file:///Z:/homepage/hp/index/images/index_07.jpg" width="97" height="20" border="0"></a></td>
<td><a href="../../4kontakt/anfahrtsplan/herschbach/herschbach.html" target="frame_ziel"><img src="file:///Z:/homepage/hp/index/images/index_08.jpg" width="85" height="20" border="0"></a></td>
<td><img src="file:///Z:/homepage/hp/index/images/index_09.jpg" width="117" height="20" border="0"></td>
<td><img src="file:///Z:/homepage/hp/index/images/index_10.jpg" width="185" height="20" border="0"></td>
<td><img src="file:///Z:/homepage/hp/index/images/index_11.jpg" width="26" height="20" border="0"></td>
</tr>
</table>
<p></p>
</body>
</html>
Hi,
also um Solch nette Menüeffekte zu realisieren würde ich mit div's arbeiten. Pack eine Tabelle wo deine Untermenüpunkte drin sind in ein div und lass diesen bei onMouseover bzw. out ein/und ausblenden.
Gruß
ueps
p.s.: auf meiner HP ist das Menü genauso gemacht.
hey das geht ja richtig schnell hier, thx schonmal für die antwort.
sorry aber ich weiß net was du meinst mit "div", bin nur so ein dummer webdesigner und hab ne soviel ahnung in sachen programmierung. habe es aber auch schon mit flashMX probiert. habe auf deiner page mal nach geguckt. und so sollte es ungefähr auch aussehen.
Hi,
hey das geht ja richtig schnell hier, thx schonmal für die antwort.
Bitte.
sorry aber ich weiß net was du meinst mit "div", bin nur so ein dummer webdesigner und hab ne soviel ahnung in sachen programmierung. habe es aber auch schon mit flashMX probiert. habe auf deiner page mal nach geguckt. und so sollte es ungefähr auch aussehen.
Was habt ihr denn in den 2 Jahren gemacht wo du nun schon lernst?
JavaScript und HTML sollten glaube ich schon Inhalt einer Webdesign ausbildung sein. Naja ist ja auch egal.
<div> sind Tags für Bereiche in HTML die formatiert werden können.
Bsp.:
<div class="menu" id="menu1">
...Meine Tabelle...
</div>
Mit CSS wird die Menüposition festgelegt:
CSS Definiton:
div.menu {position:abolute; left:100px; height;50px....; visibility:hidden}
Mit JS kannst du nun den div anzeigen oder verstecken
document.getElemetNyId("menu1").style.visibility='visible';
document.getElemetNyId("menu1").style.visibility='hidden';
Das mal so als Grundlage.
Das Ganze lässt sich natürlich noch optimieren.
Das Menü auf meiner Seite ist recht einfach gehalten, du kannst dir die Datei menu.js ja mal runterladen und das Prinzip anschauen.
Gruß
ueps
thx nochmal
Hallo Marcus,
hier ist mal mein quelltext
bitte reduziere den Quelltext auf die wirklich relevanten Teile und
poste die dann hier. Ferner sollte es sich dabei nicht um Quelltext
handeln, der von einem WYSIWYG-Editor erzeugt wurde, so etwas ist
in den meisten Fällen extrem unleserlich und da wird Dir dann kaum
jemand helfen können.
Also schau mal, welche Teile wirklich wichtig sind, um Dein Problem
zu verdeutlichen, schreibe Deine bisherigen Bemühungen zur Lösung
dazu und dann bekommst Du sicher hier einen brauchbaren Tipp.
Viele Grüße,
Stefan
PS: Du sprichst selbst von einer zweijährigen "Webdesign-Ausbildung"
und trotzdem postest Du diese Sache im Themenbereich HTML. Da
bin ich dann schon etwas ... sagen wir mal "erstaunt" ;-)
sorry, aber ich bin das erste mal hier. normal hat immer mein selfhtml7.0.zip daheim gereicht. aber darüber ich habe ich nicht gefunden. mit dem quelltext geht klar....lag aber wahrscheinlich daran, das ich schon seit 5 stunden im büro sitze und versuche eine lösung zu finden, dann hat man irgendwann keine lust mehr für nichts. aber das nächste mal werde ich meine angaben reduzieren....bis denne
hi
mache seit zwei jahren eine ausbildung zum webdesigner, [...]
wo und wie kann man sich denn zu webdesigner ausbilden lassen? ich habe noch nie von einer solchen ausbildung gehört, gelesen oder ähnliches.
oder ist das wieder so ein pseudo-lehrgang von irgendeinem maßnahmenträger der das anbietet und mit dem man nachher genauso dasteht wie vorher weils keiner anerkennt?
würd mich ja mal interessieren.
so long
ole
(8-)>
ich mache ein schulische ausbildung zum mediengestalter im schwerpunkt medienkommunikation für digitale medien oder so ähnlich...
hi
ich mache ein schulische ausbildung zum mediengestalter im schwerpunkt medienkommunikation für digitale medien oder so ähnlich...
hmm....du solltest schon wissen was du machst, ist ab und zu wirklich von vorteil ;)
ferner solltest du dir vieleicht mal den unterschied zwischen javascript und html aneignen und dir anlesen was ein <div> ist :)
...nur mal so als kurzes fazit aus den bisher geschriebenen postings :)
so long
ole
(8-)>
klar weiß ich wie mein beruf heißt, aber wer bitte schön sagt heut zutage denn schon mediengestalter im schwerpunkt mediekommunikation für digitale medien zu einem webdesigner???
Na ihr lieben leutz,
hallo.
mache seit zwei jahren eine ausbildung zum webdesigner, aber trotz allem bin ich noch nie hinter dieses problem gekommen. also ich will ein einfaches rollover menü machen. auf gut deutsch: soll sobald ich mit dem mauszeiger über dieses button gehe, ein rollover erscheinen, das mehrere schaltflächen enthält. aber sobald das rollover größer ist als die normale schaltfläche zerlegt html logischer weiße mir die ganze tabelle in einzelne stücke, weil das rollover zu groß ist und nicht in die <td> reinpaßt. also wie ich hier so gelesen habe habt ihr (die meißten) SEHR viel ahnung, hoffe das mir jemand helfen kann.....hier ist mal mein quelltext
<html>
<head>
<title>MEBUS online</title>
<csscriptdict>
<script><!--
CSInit = new Array;
function CSScriptInit() {
if(typeof(skipPage) != "undefined") { if(skipPage) return; }
idxArray = new Array;
for(var i=0;i<CSInit.length;i++)
idxArray[i] = i;
CSAction2(CSInit, idxArray);}
CSAg = window.navigator.userAgent; CSBVers = parseInt(CSAg.charAt(CSAg.indexOf("/")+1),10);
function IsIE() { return CSAg.indexOf("MSIE") > 0;}
function CSIEStyl(s) { return document.all.tags("div")[s].style; }
function CSNSStyl(s) { return CSFindElement(s,0); }
function CSFindElement(n,ly) { if (CSBVers < 4) return document[n];
var curDoc = ly ? ly.document : document; var elem = curDoc[n];
if (!elem) { for (var i=0;i<curDoc.layers.length;i++) {
elem = CSFindElement(n,curDoc.layers[i]); if (elem) return elem; }}
return elem;
}
function CSClickReturn () {
var bAgent = window.navigator.userAgent;
var bAppName = window.navigator.appName;
if ((bAppName.indexOf("Explorer") >= 0) && (bAgent.indexOf("Mozilla/3") >= 0) && (bAgent.indexOf("Mac") >= 0))
return true; // dont follow link
else return false; // dont follow link
}
function CSButtonReturn () {
var bAgent = window.navigator.userAgent;
var bAppName = window.navigator.appName;
if ((bAppName.indexOf("Explorer") >= 0) && (bAgent.indexOf("Mozilla/3") >= 0) && (bAgent.indexOf("Mac") >= 0))
return false; // follow link
else return true; // follow link
}
CSIm = new Object();
function CSIShow(n,i) {
if (document.images) {
if (CSIm[n]) {
var img = (!IsIE()) ? CSFindElement(n,0) : document[n];
if (img && typeof(CSIm[n][i].src) != "undefined") {img.src = CSIm[n][i].src;}
if(i != 0)
self.status = CSIm[n][3];
else
self.status = " ";
return true;
}
}
return false;
}
function CSILoad(action) {
im = action[1];
if (document.images) {
CSIm[im] = new Object();
for (var i=2;i<5;i++) {
if (action[i] != '') { CSIm[im][i-2] = new Image(); CSIm[im][i-2].src = action[i]; }
else CSIm[im][i-2] = 0;
}
CSIm[im][3] = action[5];
}
}
CSStopExecution = false;
function CSAction(array) {
return CSAction2(CSAct, array);
}
function CSAction2(fct, array) {
var result;
for (var i=0;i<array.length;i++) {
if(CSStopExecution) return false;
var actArray = fct[array[i]];
if(actArray == null) return false;
var tempArray = new Array;
for(var j=1;j<actArray.length;j++) {
if((actArray[j] != null) && (typeof(actArray[j]) == "object") && (actArray[j].length == 2)) {
if(actArray[j][0] == "VAR") {
tempArray[j] = CSStateArray[actArray[j][1]];
}
else {
if(actArray[j][0] == "ACT") {
tempArray[j] = CSAction(new Array(new String(actArray[j][1])));
}
else
tempArray[j] = actArray[j];
}
}
else
tempArray[j] = actArray[j];
}
result = actArray0;
}
return result;
}
CSAct = new Object;
// --></script>
</csscriptdict>
<csactiondict>
<script><!--
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button',/*URL*/'../images/index_05.jpg',/*URL*/'../buttons/balken_oben.jpg',/*URL*/'','');
// --></script>
</csactiondict>
</head>
<body bgcolor="#ffffff" onload="CSScriptInit();">
<table border="0" cellpadding="0" cellspacing="0" width="220">
<tr>
<td rowspan="3"><img src="file:///Z:/homepage/hp/index/index/Abstandhalter.gif" width="1" height="1" border="0"><img src="file:///Z:/homepage/hp/index/images/index_01.jpg" width="110" height="133" border="0"></td>
<td width="63"><img src="file:///Z:/homepage/hp/index/images/index_02.jpg" width="63" height="92" border="0"></td>
<td colspan="6"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="601" height="92">
<param name="movie" value="../animation/animation2.swf">
<param name="quality" value="best">
<param name="play" value="true">
<embed src="../animation/animation2.swf" type="application/x-shockwave-flash" width="601" height="92" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" quality="best" play="true">
</object></td>
</tr>
<tr>
<td colspan="7"><img src="file:///Z:/homepage/hp/index/images/index_04.jpg" width="690" height="21" border="0"></td>
</tr>
<tr>
<td width="63" bgcolor="white" background="(Empty Reference!)"><csobj w="63" h="20" t="Button" ht="../buttons/balken_oben.jpg"><a href="#" onmouseover="return CSIShow(/*CMP*/'button',1)" onmouseout="return CSIShow(/*CMP*/'button',0)" onclick="return CSButtonReturn()"><img src="../images/index_05.jpg" width="63" height="20" name="button" border="0"></a></csobj></td>
<td><img src="file:///Z:/homepage/hp/index/images/index_06.jpg" width="117" height="20" border="0"></td>
<td><a href="../../3neuheiten/nueheiten.html" target="frame_ziel"><img src="file:///Z:/homepage/hp/index/images/index_07.jpg" width="97" height="20" border="0"></a></td>
<td><a href="../../4kontakt/anfahrtsplan/herschbach/herschbach.html" target="frame_ziel"><img src="file:///Z:/homepage/hp/index/images/index_08.jpg" width="85" height="20" border="0"></a></td>
<td><img src="file:///Z:/homepage/hp/index/images/index_09.jpg" width="117" height="20" border="0"></td>
<td><img src="file:///Z:/homepage/hp/index/images/index_10.jpg" width="185" height="20" border="0"></td>
<td><img src="file:///Z:/homepage/hp/index/images/index_11.jpg" width="26" height="20" border="0"></td>
</tr>
</table>
<p></p>
</body>
</html>
ist das alles an quelltext?
lg /.\^/