menüpunkte bei aktiv-mouseover-aktiv

jeffmaster · 17.06.2009

ich habe mir eine seite erstellt. ich habe eine index.php die jedoch auch die ganze tabellenstruktur beinhaltet.
http://www.abload.de/img/rohschnitt2qgb.gif
die inkludiert die .php dateien zu sehen in der grafik. jetzt habe ich das problem, dass die linken menüpunkte bei mouseover einen grafikchange haben (nur ein balken daneben wird färbig bei mouseover)

in der menü-php datei sind meine menüpunkte wie folgt verlinken:
z.b.:
index.php?section=kontakt

gibt es jetzt eine if-abfrage, die dekliniert ala -->

"if section=kontakt then kontakt-image-farbe = true else kontakt-image-farblos = true"

verständlich?

solidFlex · 17.06.2009

Jep, alles klar. Zum Glück hast Du keine Frage dazu.

Dennoch am Rande:

...tabellenstruktur...grafikchange...

Du solltest Dir mal aktuelle Techniken anschauen.

MacLoud · 17.06.2009

jeffmaster schrieb:
ich habe mir eine seite erstellt. ich habe eine index.php die jedoch auch die ganze tabellenstruktur beinhaltet.
http://www.abload.de/img/rohschnitt2qgb.gif
die inkludiert die .php dateien zu sehen in der grafik. jetzt habe ich das problem, dass die linken menüpunkte bei mouseover einen grafikchange haben (nur ein balken daneben wird färbig bei mouseover)

in der menü-php datei sind meine menüpunkte wie folgt verlinken:
z.b.:
index.php?section=kontakt

gibt es jetzt eine if-abfrage, die dekliniert ala -->

"if section=kontakt then kontakt-image-farbe = true else kontakt-image-farblos = true"

verständlich?

Warum nicht mit Slices aus Fireworks oder Image Ready arbeiten, 2 Ebenen und dann der Mouseover effekt?

MacLoud

wegus · 17.06.2009

[QUOTE="jeffmaster]gibt es jetzt eine if-abfrage, die deklinier[/QUOTE]

Ist Dir Javascript ein Begriff? Das ist genau für solche Dinge da. Da gibt es Ereignisse wie onMouseover die genau das tun was Du möchtest.

jeffmaster · 17.06.2009

solidFlex schrieb:
Jep, alles klar. Zum Glück hast Du keine Frage dazu.

Dennoch am Randeu solltest Dir mal aktuelle Techniken anschauen.

nun ich gebe zu, ich bin sicher nicht der super fachmann, ich habe mir mit photoshop ein design gemacht und mit imageready zerschnipseln lassen und dann mit den kenntnissen die ich habe und dem internet weitergemacht. aber dann schiess mal los

wegus · 17.06.2009

was Du suchst ist onmouseover:

http://de.selfhtml.org/javascript/sprache/eventhandler.htm

Czerny · 17.06.2009

Ach die Antworten sind doch alles Quatsch hier.

Schau mal, ich habe das bei mir auf den Sites immer wie folgt geregelt:

HTML:

<div id="navigation">
	<ul>
		<li>
			<a<?php if($_SERVER["PHP_SELF"] == "/index.php") { echo " class=\"selected\""; } ?> href="index.php">
				Index
			</a>
		</li>
		<li>
			<a<?php if($_SERVER["PHP_SELF"] == "/index.php?section=kontakt") { echo " class=\"selected\""; } ?> href="index.php?section=kontakt">
				Kontakt
			</a>
		</li>
		<li>
			<a<?php if($_SERVER["PHP_SELF"] == "/unterverzeichnis/index.php") { echo " class=\"selected\""; } ?> href="unterverzeichnis/">
				Unterverzeichnis
			</a>
		</li>
	</ul>
</div>

Du brauchst also nur in dem Link, der bei einem bestimmten Inhalt aktiv sein soll folgendes einpassen:

PHP:

<?php if($_SERVER["PHP_SELF"] == "/index.php?section=kontakt") { echo " class=\"selected\""; } ?>

Und dann eben entsprechend die Sektion reinstopfen und über .selected im CSS die neue

Hintergrundgrafik(en) zuordnen.

jeffmaster · 18.06.2009

Czerny schrieb:
Ach die Antworten sind doch alles Quatsch hier.

Schau mal, ich habe das bei mir auf den Sites immer wie folgt geregelt:

HTML:

<div id="navigation"> <ul> <li> <a<?php if($_SERVER["PHP_SELF"] == "/index.php") { echo " class=\"selected\""; } ?> href="index.php"> Index </a> </li> <li> <a<?php if($_SERVER["PHP_SELF"] == "/index.php?section=kontakt") { echo " class=\"selected\""; } ?> href="index.php?section=kontakt"> Kontakt </a> </li> <li> <a<?php if($_SERVER["PHP_SELF"] == "/unterverzeichnis/index.php") { echo " class=\"selected\""; } ?> href="unterverzeichnis/"> Unterverzeichnis </a> </li> </ul> </div>

Du brauchst also nur in dem Link, der bei einem bestimmten Inhalt aktiv sein soll folgendes einpassen:

PHP:

<?php if($_SERVER["PHP_SELF"] == "/index.php?section=kontakt") { echo " class=\"selected\""; } ?>

Und dann eben entsprechend die Sektion reinstopfen und über .selected im CSS die neue Hintergrundgrafik(en) zuordnen.

danke für die antwort, leider gottes kenne ich mich mit css noch nicht so gut aus und bräuchte dabei noch ein wenig hilfe :/
meine links sehen derweil z.b. so aus jetzt nach deiner hilfe, nur css hab ich noch nicht bearbeitet:

Code:

<a<?php if($_SERVER["PHP_SELF"] == "/index.php?section=kontakt") { echo " class=\"selected\""; } ?> href="index.php?section=kontakt"><img src="../images/index_18.gif" alt="kontakt" width="117" height="14" border="0"/></a>

Czerny · 19.06.2009

jeffmaster schrieb:
danke für die antwort, leider gottes kenne ich mich mit css noch nicht so gut aus und bräuchte dabei noch ein wenig hilfe :/

Das macht die Sache um einiges komplizierter.

meine links sehen derweil z.b. so aus jetzt nach deiner hilfe, nur css hab ich noch nicht bearbeitet: [...]

Ohje, was ist das denn?

Ich sehe gerade, dass das bei dir wohl doch nicht so richtig funktionieren wird, weil sich der PHP-Befehl nur auf das Dokument bezieht und selbiges immer das gleiche bleibt.

Bei mir teile ich das ganze auf in bla.de/index.php und bla.de/kontakt/index.php sodass ich die dynamische Seite nicht nur auf ein Dokument beschränke.

Wenn du das bei dir auch so lösen willst, nimmste folgenden Code:

HTML:

<style type="text/css">
	<!--

		.menu li {
			border-bottom: 1px solid #aaa;
			list-style: none;
			font-size: 11px;
			display: block;
			padding: 0;
			width: 117px
		}

		.menu li.last { /* Letzter Menüeintrag ohne unteren Rahmen */
			border-bottom: 0 none
		}

		.menu a {
			background: #ddd;
			border-left: 1px solid #666;
			color: #000;
			display: block;
			height: 14px;
			padding-left: 8px;
			text-decoration: none;
			width: 108px
		}

		.menu a.selected {
			background: yellow;
			border-left-color: red
		}

		.menu a:hover {
			background: #eee;
			border-left-color: blue;
			color: blue
		}

	-->
</style>

<ul class="menu">
	<li>
		<a<?php if($_SERVER["PHP_SELF"] == "/test.php") { echo " class=\"selected\""; } ?> href="test.php">Home</a>
	</li>
	<li>
		<a<?php if($_SERVER["PHP_SELF"] == "/kontakt/index.php") { echo " class=\"selected\""; } ?> href="kontakt/">Kontakt</a>
	</li>
	<li class="last"> <!-- class="last" weil letzter Eintrag -->
		<a href="#">blah</a>
	</li>
</ul>

Ich habe mich außerdem nach deinen Maße und der Beschreibung gerichtet und dein Menü mal mit CSS nachgebaut, die Farben hab ich natürlich willkürlich gewählt...

Klick hier!

Wenn du auf Kontakt klickst, siehst du, dass sich die aktive Seite jeweils im Menü ändert.

jeffmaster · 20.06.2009

naja also ich hab die hilfe von einem bekannten gefunden der nur für die nächsten 2 wochen auf urlaub ist. er hat mir folgenden code gegeben:

PHP:

function menueintrag($section, $imgName){
    if ($_REQUEST['section'] == $section) {
        echo '<a href="index.php?section='.$section.'" onmouseover="'.$imgName.'.src=\'../images/'.$imgName.'_c.gif\';" onmouseout="'.$imgName.'.src=\'../images/'.$imgName.'_c.gif\';"><img
src="https://www.macuser.de/forum/f57/images/'.$imgName.'.gif"
name="'.$imgName.'" alt="'.$section.'" width="117" height="14" border="0"/></a>';
    }
    else {
        echo '<a href="index.php?section='.$section.'" onmouseover="'.$imgName.'.src=\'../images/'.$imgName.'.gif\';" onmouseout="'.$imgName.'.src=\'../images/'.$imgName.'.gif\';"><img
src="https://www.macuser.de/forum/f57/images/'.$imgName.'.gif"
name="'.$imgName.'" alt="'.$section.'" width="117" height="14" border="0"/></a>';
    }
}

menueintrag('news', 'index_13');
menueintrag('philosophie', 'index_14');
menueintrag('services', 'index_15');
menueintrag('referenzen', 'index_16');
menueintrag('projekte', 'index_17');
menueintrag('kontakt', 'index_18');

meine grafiken sind also index_13.gif für die news-grafik OHNE Farbe und index_13_c.gif MIT Farbe (_c für color)

der code hat aber leider noch ein paar macken..
- das menü ist in diesem code leider waagrecht und nicht senkrecht
- es gibt kein mouseover
- wenn ich in einer sektion bin, dann "bleibt/erscheint" das farbliche bild nur wenn ich einmal mit der maus darübergefahren bin

menüpunkte bei aktiv-mouseover-aktiv

jeffmaster

Aktives Mitglied

solidFlex

Aktives Mitglied

MacLoud

Aktives Mitglied

wegus

MU Team

jeffmaster

Aktives Mitglied

wegus

MU Team

Czerny

Mitglied

jeffmaster

Aktives Mitglied

Czerny

Mitglied

jeffmaster

Aktives Mitglied