Navigation und Frames

thesecretboy · 20. Juni 2005

Hallo zusammen,

ich habe da mal eine Frage.

Ich habe eine Seite, die waagerecht in 3 Frames eingeteilt ist.

Oben - "f_oben"

Mitte - "f_mitte"

Unten - "f_unten"

Oben ist die Navigation untergebracht. Mit ein paar Bildchen usw.

Nun möchte man aber, daß in dem Moment, wenn man oben in der

Navigation auf eines der Bildchen klickt sich dieses Farblich ändert

und auch so bleibt. Quasi als "Du bist hier"-Hinweis. Gleichzeitig muss

der gewählte Inhalt aber im Frame "f_mitte" anzeigt werden.

Ich würde daher die Navigation (ist ein Bild) je nach Anzahl der

Menüpunkte 4 mal (z.. machen und jedes mal den jeweils anderen

Menüpunkt Farbig machen.

Damit müsste dann beim klick auf den entsprechenden Menüpunkt

der obere Frame komplett gegen das entsprechende neue Bild

getauscht werden und in f_mitte der neue Frame geladen werden.

Wie ist das denn am einfachsten möglich?

Ich weiss... keine tolle Lösung. Aber ist ne bestehende Seite und

man will nur ein Redesign und keinen Neuaufbau.

Hoffe es kann mir jemandem helfen. (Laienverständlich).

Manitu71 · 20. Juni 2005

öhm wenn ich dir richtig folgen kann (und da bin ich mir ned ganz sicher bei deiner Schreibweise ) dann ist das ziemlich umständlich wie du es vorschlagst. Das ganze kannst du schön mit Javascript lösen.

Jetzt kommt der Teil wo ich bei dir ned ganz mitkomme. Erst hast du mehrere Bilder, plötzlich ist die Navi nur 1 Bild. Ja was denn nu? Hast du mal nen Link dafür?

thesecretboy · 21. Juni 2005

Hallo Manitu,

in f_oben ist eine HTML-Seite, die die Buttons enthält. Nachdem der Button der gedrückt wurde ja Farblich anders bleiben soll bis der nächste gedrückt wurde (der dann auch andersfarbig sein und bleiben soll) muss ich doch (denke ich zumindest) der Anzahl der Buttons entsprechend viele HTML's machen, die dann jeweils einen Button andersfarbig darstellen. richtig?!.

Bei 4 Buttons hätte ich dann 5 HTML-Seiten mit folgendem Navigationsinhalt.

navi.html - mit Button1, Button2, Button3, Button4

navi.html - mit Button1 (gedrückt), Button2, Button3, Button4

navi.html - mit Button1, Button2 (gedrückt), Button3, Button4

navi.html - mit Button1, Button2, Button3 (gedrückt), Button4

navi.html - mit Button1, Button2, Button3, Button4 (gedrückt).

natürlich müssen die HTM's unterschiedlich benannt sein, aber je nach

gewähltem Button muss dann die entsprechende HTM in das Frame "f_oben" geladen werden und der entsprechende Inhalt ins Frame "f_mitte" geladen werden.

Da die Seite in einem Intranet liegt, kann ich leider keinen Link zur Verfügung stellen. Sorry... aber ich hoffe man versteht mich nun besser

adragon · 21. Juni 2005

vielleicht hilft dir das weiter

link

bitteschön

thesecretboy · 21. Juni 2005

vielen Dank, adragon... ich werd's mal versuchen.

Aiun · 21. Juni 2005

anstatt 2 Frames neu zu laden, empfehle ich per javascript einfach ein Attribut des Links zu verändern

Beispiel:

buttons = Array('button1','button2','button3','button4');

function change(ButtonID, framepage)

{

parent.main.href = framepage;

for(i = 0; i < buttons.length; i++)

{

button = document.getElementById(buttons);

if(buttons == ButtonID)

button.style.color= 'orange';

else

button.style.color = 'grey';

}

<a id="button1" href="" onclick="change('button1','firstpage.html')">erste Seite</a>

nicht getestet, aber sinngemäß so in etwa.

Das Array gefüllt mit button-ID's ist nötig, damit du nicht plötzlich alle Farbig hast.

thesecretboy · 21. Juni 2005

Natürlich wäre es schöner, wenn ich nicht komplette Seiten neu in das obere Frame laden müsste.

Der Body meiner navigation sieht im Moment so aus.

<body bgcolor="#FF8F00" MARGINWIDTH="0" MARGINHEIGHT="0" LEFTMARGIN="0" RIGHTMARGIN="0" TOPMARGIN="0" 

BOTTOMMARGIN="0" link="#FFFFFF">

<div align="right">

  <table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">

    <tr>

      <td width="100%" valign="bottom" align="right"> 

        <table border="0" width="100%" cellspacing="0" cellpadding="0" height="100" align="right">

          <tr> 

            <td valign="bottom" width="595"> 

              <div align="right"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" size="2"><a href="kursprogramm/pages/main.html" target="f_mitte"><img src="images/originale/btn_navi_kurse.gif" width="61" height="11" border="0"></a><a href="inhalt/info.htm" target="f_mitte"><img src="images/originale/btn_navi_service.gif" width="72" height="11" border="0"></a><a href="inhalt/kontakt.cfm" target="f_mitte"><img src="images/originale/btn_navi_kontakt.gif" width="77" height="11" border="0"></a><a href="inhalt/start.cfm" target="f_mitte"><img src="images/originale/btn_navi_home_on.gif" width="55" height="11" border="0"></a><a href="impressum.htm"><img src="images/originale/btn_navi_impressum.gif" width="92" height="11" border="0"></a><br>

                <br>

                </font></div>

            </td>

            <td valign="bottom" width="664" align="right"> 

              <div align="right"><img src="images/logo.gif" width="350" height="85" align="right"></div>

            </td>

          </tr>

        </table>

      </td>

    </tr>

  </table>

</div>

</body>

Das ist der Inhalt des Frames f_oben. Verwendet werden die Buttons: btn_navi_home.gif btn_navi_impressum.gif btn_navi_kontakt.gif btn_navi_kurse.gif btn_navi_service.gif zu jedem Button gibt es auch einen andersfarbigen mit den Namen. btn_navi_home_on.gif btn_navi_impressum_on.gif btn_navi_kontakt_on.gif btn_navi_kurse_on.gif btn_navi_service_on.gif Nun möchte ich gern, wenn ich auf den Button "Kontakt" klicke, dass dann in der Navigation (Frame f_oben) der Button "btn_navi_kontakt.gif" gegen den Button "btn_navi_kontakt_on.gif" getauscht wird und im Frame f_mitte die Seite Kontakt.htm geöffnet wird. Das Frameset in der Datei index.html sieht so aus:

  <frame name="f_oben" src="navi_home.htm" target="_self" scrolling="no" marginwidth="0" marginheight="0">

  <frame name="f_mitte" scrolling="auto" src="inhalt/start.cfm" target="_self" marginwidth="0" marginheight="0">

  <frame name="f_unten" scrolling="no" src="menubar.htm" target="_self" marginwidth="0" marginheight="0">

Ist dieses Problem irgendwie lösbar? Wäre für eine ausführliche Newbie-Hilfe sehr dankbar.

Aiun · 21. Juni 2005

wenn ich nachher Zeit habe, bastel ich dir mal beispielcode. Gug dir ansonsten mal an was ich im Post zuvor geschrieben habe...

gibts eigentlich nen Fachinformatiker.de IRC-Channel ?

thesecretboy · 21. Juni 2005

Au ja... das wäre klasse. Wenn ich das dann so übernehmen könnte und es funktioniert dann auch noch, dann werde ich sicher durchsteigen, wie es genau funktioniert.

Danke Dir schonmal im voraus Aiun

Wolle · 21. Juni 2005

gibts eigentlich nen Fachinformatiker.de IRC-Channel ?

Jup, hier steht alles: http://www.fachinformatiker.de/index.php?option=com_content&task=view&id=15&Itemid=63

thesecretboy · 22. Juni 2005

Hi Aiun,

hast Du schonmal was zusammenklicken können?

Aiun · 22. Juni 2005

nein, der Tag war zu heiß gestern werd' das wohl heute beim Stargate-Gugen machen.

thesecretboy · 22. Juni 2005

Wäre echt nett, Aiun... bin leider ein wenig im Zeitdruck. Das Dingen muss irgendwie fertig werden. Daher auch nur meine berenzte Zeit rumzuprobieren.

Aber danke dennoch.

Aiun · 23. Juni 2005

hier ein Beispiel, getestet im IE, Firefox & Co sollten das aber auch fehlerfrei hinkriegen

index.html:


<html>

<frameset rows="200,*">

<frame src="navigation.html" name="nav" />

<frame src="inhalt.html" name="content" />

</frameset>

</html>

navigation.html:


<html>

<body>

<style type="text/css">

.link

{

	color: black;

	text-decoration: none;

	background-color: #aeaeae

}

</style>

<script type="text/javascript">

links = Array('link1','link2','link3');


function OpenPage(pagename,linkid)

{

	for(i = 0; i< links.length; i++)

	{

		mylink = document.getElementById(links[i]);

		if(linkid == links[i])

		{

			mylink.style.backgroundColor = '#903030';

		}

		else

		{

			mylink.style.backgroundColor = '#aeaeae';

		}

	}

	parent.content.document.location.href = pagename;


}

</script>

<a class="link" href="#" onclick="OpenPage('inhalt1.html','link1');" id="link1">Link 1</a>

<a class="link" href="#" onclick="OpenPage('inhalt2.html','link2');" id="link2">Link 2</a>

<a class="link" href="#" onclick="OpenPage('inhalt3.html','link3');" id="link3">Link 3</a>

</body>

</html>

thesecretboy · 23. Juni 2005

Wenn ich das richtig verstehe, Aiun, ersetzt das Script aber nur die Hintergrundfarbe, aber ich habe Bilder als Buttons, die gegen andere Bilder ausgetauscht werden sollen/müssen.

Aiun · 23. Juni 2005

HTML:


<a href="#" onclick="OpenPage('inhalt1.html','link1');">

<img src="link1_normal.jpg" border="0" id="link1" /></a>

Javascript:


mylink.src = "link1_active.jpg";

ich bin nicht sicher ob .src das richtige attribut ist, musst du ausprobieren.

evtl. auch ein .href oder so

Aiun · 23. Juni 2005

Zusatz:

mylink.src = 'link'+i+'_normal.jpg';

damit es nicht grausig viele Ifs werden, musst du die Linknummer oder etwas ähnliches in den bildnamen einbauen.

mit mylink.text kommst du glaube ich auch an die Link-Beschriftung

thesecretboy · 23. Juni 2005

Hallo Aiun,

vielen Dank für Deine Mühe, aber ich kapiers einfach nicht. Könntest Du mir nicht einmal ein Script so machen, wie ich es dann verwenden kann?

Also einfach eine Seite in der 5 buttons sind und beim klick drauf wird der entsprechende Button gegen einen anderen getauscht und bleibt so lange getauscht, bis ich wieder einen anderen button anklicke. Dann wird dieser getauscht usw....

Ich bin halt ein Newbie und daher noch "Begriffsstutzig".

thesecretboy · 23. Juni 2005

Achso... falls Du das machst. Wie die Buttons lauten, die zu tauschen sind, habe ich hier ganz am anfang schon geschrieben.

Aiun · 23. Juni 2005


<html>

<body>

<style type="text/css">

<script type="text/javascript">

links = Array('home','impressum','kontakt','kurse','service');


function OpenPage(pagename,linkid)

{

	for(i = 0; i< links.length; i++)

	{

		mylink = document.getElementById(links[i]);

		if(linkid == links[i])

		{

			mylink.src = 'btn_navi_'+linkid+'_on.gif';

		}

		else

		{

			mylink.src = 'btn_navi_'+linkid+'.gif';

		}

	}

	parent.content.document.location.href = pagename;


}

</script>


<a href="#" onclick="OpenPage('inhalt1.html','home');">

<img src="btn_navi_home.gif" id="home" />

</a>

<a href="#" onclick="OpenPage('inhalt1.html','impressum');">

<img src="btn_navi_impressum.gif" id="impressum" />

</a>

<a href="#" onclick="OpenPage('inhalt1.html','kontakt');">

<img src="btn_navi_kontakt.gif" id="kontakt" />

</a>

<a href="#" onclick="OpenPage('inhalt1.html','kurse');">

<img src="btn_navi_kurse.gif" id="kurse" />

</a>

<a href="#" onclick="OpenPage('inhalt1.html','service');">

<img src="btn_navi_service.gif" id="service" />

</a>

</body>

</html>

nicht getestet, sollte aber funktionieren.

thesecretboy · 23. Juni 2005

Hallo zusammen,

wollte noch schnell danke sagen. Hat sich erledigt. Ich habe habe anderweitig Hilfe bekommen und es funktioniert nun genau so, wie ich es wollte. Dennoch DANKE !

Anmelden

Navigation und Frames

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte