Java Script, Navigation, dynamische Änderung der Schriftfarbe

6. Februar 200224 j

Teil 1

Hallo Leute,

ich bin in der Ausbildung zum Elektrotechniker im Datenbereich,

im Rahmen dieser Ausbildung darf ich eine Projektarbeit durchführen.

Ich hab mich für einen Internet auftritt, einer kleinen Firma entschieden (ich arbeite natürlich unentgeltlich).

In diese Firma soll unter anderem einen Shop integrieren für diesen such ich eine Navigation

wie im unten stehendem Code.

Nun endlich zur frage.

hat jemand von Euch eine Idee wie ich folgendes Java Script abändere,

so das sich nicht die Hintergrundfarbe ändert sondern die Schriftfarbe ? :confused:

ich finde den Quellcode toll gemacht und er läst sich gut anpassen .

Bis halt auf das mit der Schriftfarbe n die bleibt immer konstant

Mir persönlich wer das egal, aber ich arbeite mit einem Grafiker zusammen

Der darauf besteht.

Vielleicht auch einen anderen Quellcode!!!!!

Für alle Anregungen und Ideen bin ich dankbar

Euer Joachim

***************************

Quelcode!!!!!!!

<html>

<head>

<!-- // Hide

// *** CROSS-BROWSER COMPATIBILITY ***

var isDOM = false, isNS4 = false;

if (document.all) var isDOM = true, docObj = 'document.all.', styObj = '.style';

else if (document.layers) var isNS4 = true, docObj = 'document.', styObj = '';

// *** MOUSEOVER/OUT CONTROL FUNCTIONS ***

// verstecke timeout.

var popTimer = 0;

// Array zum anzeigen der 'highlighted menu items'.

var litNow = new Array();

function popOver(menuNum, itemNum)

{

clearTimeout(popTimer);

// verstecke alle anderen Menus.

hideAllBut(menuNum);

// ermittle Baum der Eltern- Menuelemente und beleuchte sie- globale Variable für 'hideAllBut'

litNow = getTree(menuNum, itemNum);

changeCol(litNow, true);

// ermittle Zielmenu zum anzeigen, wenn nicht null, dann positionieren und anzeigen.

targetNum = menu[menuNum][itemNum].target;

if (targetNum > 0)

{

targetName = menu[targetNum][0].id;

menuName = menu[menuNum][0].id;

// ermittle momentane Menuposition.

menuRef = eval(docObj + menuName + styObj);

thisX = parseInt(menuRef.left);

thisY = parseInt(menuRef.top);

// Addiere hier die Position des Triggerselements im Menu.

itemPath = docObj;

if (isNS4) itemPath += menuName + '.document.';

itemRef = eval(itemPath + menuName + itemNum.toString() + styObj);

thisX += parseInt(itemRef.left);

thisY += parseInt(itemRef.top);

// Addiere dies zum Offset des Ziels, um die Zielposition zu setzen und zeige es an.

with (eval(docObj + targetName + styObj))

{

left = parseInt(thisX + menu[targetNum][0].x);

top = parseInt(thisY + menu[targetNum][0].y);

visibility = 'visible';

}

function popOut(menuNum, itemNum)

{

// versteckt das Menu X mili.sec, bis ein Mouseover das Timeout löscht

popTimer = setTimeout('hideAllBut(0)', 1500);

}

function getTree(menuNum, itemNum)

{

// Array index ist die Menunummer. Die Inhalte sind null (sofern dies kein Elternmenu ist)

// oder die Nummer eines übergeordneten MenuElements zum beleuchten.

itemArray = new Array(menu.length);

while(1)

{

itemArray[menuNum] = itemNum;

// Return, wenn Anfang der Hierachie erreicht ist

if (menuNum == 0) return itemArray;

itemNum = menu[menuNum][0].parentItem;

menuNum = menu[menuNum][0].parentMenu;

}

// array übergehen und ein boolean Wert um Farbwechesl zu bestimmen, true = over colour.

function changeCol(changeArray, isOver)

{

// array durchlaufen, suchen nach Elementwechseln.

for (menuCount = 0; menuCount < changeArray.length; menuCount++)

{

// wenn Elementnummer vorhanden ist, wechsle seine Farbe.

if (changeArray[menuCount])

{

// ermittle ID's des gewählten Menus im Array.

thisMenu = menu[menuCount][0].id;

thisItem = thisMenu + changeArray[menuCount].toString();

newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;

// wechsle die Farbe des div/layer Hintergrunds und schreibe Text neu.

if (isDOM) document.all[thisItem].style.backgroundColor = newCol;

if (isNS4) document[thisMenu].document[thisItem].bgColor = newCol;

}

function hideAllBut(menuNum)

{

// ermittle Array des Elternmenu

var keepMenus = getTree(menuNum, 1);

// ...und bearbeite es, verstecke Menus, die nicht übergeordnet sind.

for (count = 0; count < menu.length; count++)

if (!keepMenus[count])

eval(docObj + menu[count][0].id + styObj + '.visibility = "hidden"');

// Dimme alle Elemente im 'litNow array'

changeCol(litNow, false);

}

// *** MENU Konstruktion ***

// Variable um div or layer zu beenden.

var endDL = isDOM ? '</div>' : '</layer>';

function Menu(id, x, y, width, overCol, backCol, borderCol, itemClass)

{

this.id = id;

this.x = x;

this.y = y;

this.width = width;

// Farben der Menues und Menuelemente.

this.overCol = overCol;

this.backCol = backCol;

this.borderCol = borderCol;

// Stylesheet Klassen für die Elementtexte.

this.itemClass = itemClass;

// Nummern der Menues und Elemente, werden später indexiert.

this.parentMenu = null;

this.parentItem = null;

}

function Item(text, href, height, spacing, target)

{

this.text = text;

this.href = href;

this.height = height;

this.spacing = spacing;

this.target = target;

}

// erzeugt einen String, der den öffnenden div- oder layer- Tag mit einschliesst.

function startDL(id, x, y, width, height, vis, back, border, zIndex, extraProps)

{

// Schreibt einen div in IE oder einen layer in NS.

if (isDOM)

{

str = '<div id="' + id + '" style="position: absolute; left: ' + x + '; top: ' + y +

'; width: ' + width + '; height: ' + height + '; visibility: ' + vis + '; ';

if (back) str += 'background: ' + back + '; ';

if (border) str += 'padding: 3px; border: 1px solid ' + border + '; ';

if (zIndex) str += 'z-index: ' + zIndex + '; ';

// End style declaration.

str += '" ';

}

if (isNS4)

{

str = '<layer id="' + id + '" left="' + x + '" top="' + y + '" width="' + width +

'" height="' + height + '" visibility="' + vis + '" ';

if (back) str += 'bgcolor="' + back + '" ';

if (border) str += 'style="border: 1px solid ' + border + '" ';

if (zIndex) str += 'z-index="' + zIndex + '" ';

}

ENDE TEIL 1

6. Februar 200224 j

TEIL 2 Quellcode

//******************************

return str + extraProps + '>';

}

// ermittlet die onMouseOver und onMouseOut attribute

function mouseProps(currMenu, currItem)

{

return 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' +

currMenu + ',' + currItem + ')"';

}

function writeMenus(customRoot, popInd)

{

for (currMenu = 0; currMenu < menu.length; currMenu++)

{

// schreibe nicht rootmenu 0, wenn ein erstes Menu spezifiziert wurde.

showMenu = true;

if ((currMenu == 0) && customRoot)

{

document.write(customRoot);

showMenu = false;

}

// arbeitet mit den Eigenschaften der Beschreibung des Hauptmenuobjekts, z.B. id, x, y.

with (menu[currMenu][0])

{

// Start div Generierung mit Position Offset - keine Dimensionierung, Farben, mouseovers.

// Die Position ist nur für das Rootmenu relevant, da alle anderen später geändert werden.

menuHTML = startDL(id, x, y, 0, 0, 'hidden', null, null, 100, '');

// Eigenschaften der Objekte in lokale Variablen bringen.

// Width ist abzüglich padding (3 links & rechts) und Rahmen (1 links & rechts).

var back = backCol, bord = borderCol, currWidth = width - 8, itemSty = itemClass;

}

// Y-position des nächsten Elements.

itemPos = 0;

// Elemente starten von Arrayposition 1 (0 ist das Menuobject selbst).

for (currItem = 1; currItem < menu[currMenu].length; currItem++)

{

// Auto-generate ID's in numerischer Reihenfolge.

trigID = menu[currMenu][0].id + currItem.toString();

// arbeite mit Eigenschaften der individuellen Menueigenschaften.

with (menu[currMenu][currItem])

{

// Startet ein Menueintrag, vertikal positioniert, mit mouse Event und Farben.

menuHTML += startDL(trigID, 0, itemPos, 3, 0, 'inherit', back, bord, 100,

mouseProps(currMenu, currItem)) +

// Addiere Elementinhalte (default: Tabelle mit Link innen).

'<table width="' + currWidth + '" border="0" cellspacing="0" cellpadding="0">' +

'<tr><td align="left" height="' + (height - 7) + '"><a class="' + itemSty + '" href="' +

href + '">' + text + '</a></td>';

if (target > 0)

{

// Addiere popout indicator.

menuHTML += '<td class="' + itemSty + '" align="right">' + popInd + '</td>';

// Setze Ziel des Elternmenu parents für dieses Menuelement

menu[target][0].parentMenu = currMenu;

menu[target][0].parentItem = currItem;

}

// Schliesse Tabelle und Menuelement ab.

menuHTML += '</tr></table>' + endDL;

// Bewege Position des nächste Elements nach unten, um den betrag Höhe & spacing.

itemPos += height + spacing;

}

// Schreibe Menu ins Dokument.

if (showMenu) document.write(menuHTML + endDL);

litNow[currMenu] = null;

}

// End Hide -->

</script>

<style>

<!--

.item { text-decoration: none; color: #FFFFFF; font: 12px Arial, Helvetica }

.crazy { text-decoration: none; color: #CC9966; font: Bold 12px Arial, Helvetica }

-->

</style>

<title>zwischen</title>

</head>

<!-- // Hide

// Syntaxes: *** Bitte genau durchlesen! ***

//

// Hier beginnt die Definition der Menueinträge nach folgendem Schema:

//

// menu[menuNumber][0] = new Menu('menu ID', left, top, width, 'mouseover colour',

// 'background colour', 'border colour', 'stylesheet class');

// Linke und Topposition werden on-the-fly bemessen, relativ zur oberen linken Position ihres Triggers, oder

// für das Rootmenu, die linke, obere Ecke der Seite.

//

// menu[menuNumber][itemNumber] = new Item('Text', 'URL', höhe des elements, zwischenraum zum

// nächsten element, nummer des zielmenues);

//

// Wenn kein Zielmenu (popout) gewünscht ist, setze es auf 0. Alle Menus müssen zum Rootmenu zurückführen,

// anders gesagt, jeder Menueintrag muss als Ziel irgendeinen Eintrag haben.

// Auch wenn Sie Ihr eigenes Rootmenu machen, müssen die Settings hier spezifiziert werden.

var menu = new Array();

// Standarfarben für die meisten menu constructors. defOver=Hintergrundfarbe was selektiert im offenen Rollover

// defBack=Hintergrundfarbe im offenen Rollover

// defBorder=Rahmenfarbe im offenen Rollover

var defOver = '#2233ee', defBack = '#006666', defBorder = '#5533ff';

// Defaulthöhe der Menuelemente.

var defHeight = 22;

// Menu 0 ist das 'root' menu, von dem alles ausgeht.

// Farbe mit Maus||Farbenach Aktion

menu[0] = new Array();

menu[0][0] = new Menu('rootMenu', 0, 0, 80, '#123456', '#006666', defBorder, 'item');

// Beachte, dass alle Ziele keine Nullwerte bekommen...

menu[0][1] = new Item('1', '#', defHeight, 0, 1);

menu[0][2] = new Item('2', '#', defHeight, 0, 2);

menu[0][3] = new Item('3', '#', defHeight, 0, 3);

menu[0][4] = new Item('4', 'http://www.google.com/" target="_new', defHeight, 0, 0);

menu[0][5] = new Item('5', '#', defHeight, 0, 5);

menu[0][6] = new Item('5', '#', defHeight, 0, 2);

menu[1] = new Array();

menu[1][0] = new Menu('fileMenu', 0, 22, 80, defOver, defBack, defBorder, 'item');

menu[1][1] = new Item('Open', '#', defHeight, 0, 0);

menu[1][2] = new Item('Save', '#', defHeight, 0, 0);

menu[1][3] = new Item('Reopen', '#', defHeight, 0, 4);

menu[1][4] = new Item('Exit', '#', defHeight, 0, 0);

menu[2] = new Array();

menu[2][0] = new Menu('editMenu', 0, 22, 80, defOver, defBack, defBorder, 'item');

menu[2][1] = new Item('Cutaaa', '#', defHeight, 0, 0);

menu[2][2] = new Item('Copy', '#', defHeight, 0, 0);

menu[2][3] = new Item('Paste', '#', defHeight, 0, 0);

menu[3] = new Array();

menu[3][0] = new Menu('helpMenu', 0, 22, 80, defOver, defBack, defBorder, 'item');

menu[3][1] = new Item('Contents', '#', defHeight, 0, 0);

menu[3][2] = new Item('Index', '#', defHeight, 0, 0);

menu[3][3] = new Item('About', '#', defHeight, 0, 0);

menu[4] = new Array();

menu[4][0] = new Menu('reopenMenu', 85, 0, 120, '#333366', '#666699', '#663399', 'crazy');

menu[4][1] = new Item('Recent Doc 1:<br>Schedule', '#', 36, 0, 0);

menu[4][2] = new Item('Recent Doc 2:<br>Plan', '#', 36, 5, 0);

menu[4][3] = new Item('Etc. etc...', '#', defHeight, 0, 0);

//menu[5] = new Array();

//menu[5][0] = new Menu('reopenMenu', 44, 0, 120, '#333366', '#666699', '#663399', 'crazy');

//menu[5][1] = new Item('Recent 11:<br>Schedule', '#', 36, 0, 0);

//menu[5][2] = new Item('Recent 12:<br>Plan', '#', 36, 5, 0);

//menu[5][3] = new Item('Etc. etc...1', '#', defHeight, 0, 0);

menu[5] = new Array();

menu[5][0] = new Menu('aboutMenu', 0, 22, 80, defOver, defBack, defBorder, 'item');

menu[5][1] = new Item('Recent 11:<br>Schedule', '#', 36, 0, 0);

menu[5][2] = new Item('Recent 12:<br>Plan', '#', 36, 5, 0);

menu[5][3] = new Item('Etc. etc...1', '#', defHeight, 0, 0);

menu[6] = new Array();

menu[6][0] = new Menu('eee', 85, 0, 120, '#333366', '#666699', '#663399', 'crazy');

menu[6][1] = new Item('Recent Doc 1:<br>Schedule', '#', 36, 0, 0);

menu[6][2] = new Item('Recent Doc 2:<br>Plan', '#', 36, 5, 0);

menu[6][3] = new Item('Etc. etc...', '#', defHeight, 0, 0);

//************************

// ändere dies, um die Mnubar umzuplazieren.

// v Links || v oben || breite || höhe

newRoot = startDL('rootMenu', 0, 0, '100%', 17, 'hidden', '#006666', null, 100, '');

// Addiere opening tag des ersten Menuelement- Div mit Mauseigenschaften

newRoot += startDL('rootMenu1', 5, 0, 80, 17, 'inherit', '#006666', null, 100,

mouseProps(0, 1));

// Inhalt und Ende des Tags. (ggf mit Grafiken, etc. ersetzen)...?

newRoot += '<span class="item" style="cursor: default"> Über uns</span>' + endDL;

newRoot += startDL('rootMenu2', 75, 0, 80, 17, 'inherit', '#006666', null, 100,

mouseProps(0, 2));

newRoot += '<span class="item" style="cursor: default"> Beschriftung</span>' + endDL;

newRoot += startDL('rootMenu3', 165, 0, 80, 17, 'inherit', '#006666', null, 100,

mouseProps(0, 3));

newRoot += '<span class="item" style="cursor: default"> FUN SHOP</span>' + endDL;

// Nun, hier ein einzelner Eintrag ohne Popout- Elemente.

// mouseProps werden noch benötigt, da sie Highlighten, etc steuern.

newRoot += startDL('rootMenu4', 255, 0, 150, 17, 'inherit', '#006666', null, 100,

mouseProps(0, 4));

newRoot += '<a class="item" href="http://www.google.com/" target="_new"> Grossformat-Digitaldruck</a>' +

endDL;

newRoot += startDL('rootMenu5', 450, 0, 80, 17, 'inherit', '#006666', null, 100,

mouseProps(0, 5));

newRoot += '<span class="item" style="cursor: default"> aaaaa</span>' + endDL;

newRoot += startDL('rootMenu6', 550, 0, 80, 17, 'inherit', '#006666', null, 100,

mouseProps(0, 6));

newRoot += '<span class="item" style="cursor: default"> aaaaa</span>' + endDL;

//*****************************************************************************

newRoot += endDL;

writeMenus(newRoot, '>');

if (isNS4) document.captureEvents(Event.CLICK);

document.onclick = clickHandle;

function clickHandle(evt)

{

if (isNS4) document.routeEvent(evt);

hideAllBut(0);

}

eval(docObj + menu[0][0].id + styObj + '.visibility = "visible"');

function moveRoot()

{

rM = eval(docObj + menu[0][0].id + styObj);

if (parseInt(rM.top) < 40) rM.top = 40;

else rM.top = 0;

}

// End Hide -->

</script>

</html>

ENDE TEIL 2

7. Februar 200224 j

öhm könntest nicht einfach die stelle angeben wo der Hintergrund die farbe ändert?, wäre vielleicht einfacher das dann zu finden =)

7. Februar 200224 j

Sorry der Code ist natürlich viel zu lang.

Habe mir halt gedacht wenn ihn ausprobieren will,

Brauch er ihn nur zu kopieren.

Was Java Script angeht bin ich noch Anfänger.

So wie ich den Code ansehe ist es nicht allein in einem Teil, die stelle des Farbenwechsel.

Ich hoffe das ist ein hier richtig.

Euer Joachim

// array durchlaufen, suchen nach Elementwechseln.

for (menuCount = 0; menuCount < changeArray.length; menuCount++)

{

// wenn Elementnummer vorhanden ist, wechsle seine Farbe.

if (changeArray[menuCount])

{

// ermittle ID's des gewählten Menus im Array.

thisMenu = menu[menuCount][0].id;

thisItem = thisMenu + changeArray[menuCount].toString();

newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;

*********************************************

// wechsle die Farbe des div/layer Hintergrunds und schreibe Text neu.

if (isDOM) document.all[thisItem].style.backgroundColor = newCol;

if (isNS4) document[thisMenu].document[thisItem].bgColor = newCol;

} *******************************************

}

Java Script, Navigation, dynamische Änderung der Schriftfarbe

Empfohlene Antworten

Archiv

Konto

Navigation

Suchen

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)