Hyperlinks von Drop Down Box verlinken

maerk72 · 3 Juni 2017

Hallo HTML-Freunde

Habe mit dem Microsoft Expression Web 4 eine HTML Datei (index.html) erstellt.
In dieser Datei hat es mehrere Drop Down Listen (Händler, Garagen, Marken, etc ...) mit bis jetzt jeweils 3-4 Einträge, später werden noch weitere ergänzt.

Die Drop Down Listen sind oben horizonal angeordnet.
Jetzt möchte ich gerne, dass der "angeklickte Eintrag" unten in einem Fenster angezeigt wird. Das Fenster darf den ganzen unteren Teil ausfüllen.

Die anzuzeigenden Dateien sind im "Stammverzeichnis" wo sich auch die index.html Datei ist abgespeichert. Es sind ebenfalls alle *.html Dateien.

Beispiel:
Händler
derendinger.html
normauto.html
iwag.html
Garagen
amag.html
rebmann.html
Ruckstuhl.html
etc... (alle "kleingeschrieben.html"

Bei der letzten Drop Down List sind Einträge wie Google.ch, tel.search.ch ... diese Links sollten in einem neuem Fenster geöffnet werden.

Habe die Datei auf 00.markusbircher.ch veröffentlicht.
Die index.html Datei hier mal hochgeladen.

Im Microsoft Expression Web 4 sowie beim Vorgänger FrontPage habe ich keine Möglichkeit gefunden die Hyperlinks zu erfassen; auch nicht in einem neuen Fenster. Habe mich auch bereits schon "halb wahnsinnig" gegoogelt

Kann mir bitte jemand helfen, bitte um Nachsicht; bin ein absoluter Nobody was die Programmierung betrifft :(

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="de-ch" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>InfoBox</title>
<style type="text/css">
.auto-style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
}
</style>
</head>

<body>

<form method="post">
    <select class="auto-style1" name="Select1" style="width: 150px">
    <option>Händler</option>
    <option>Derendinger</option>
    <option>Normauto</option>
    <option>IWAG</option>
    </select> <select class="auto-style1" name="Select2" style="width: 150px">
    <option>Garagen</option>
    <option>AMAG</option>
    <option>Rebmann</option>
    <option>Ruckstuhl</option>
    </select> <select class="auto-style1" name="Select3" style="width: 150px">
    <option>Marken</option>
    <option>Audi</option>
    <option>Alfa-Romeo</option>
    <option>BMW</option>
    </select> <select class="auto-style1" name="Select4" style="width: 150px">
    <option>Versicherungen</option>
    <option>Alba</option>
    <option>Mobiliar</option>
    <option>AXA</option>
    </select> <select class="auto-style1" name="Select5" style="width: 150px">
    <option>Telefonlisten</option>
    <option>Weiden</option>
    <option>Filialen</option>
    <option>Mitarbeiter</option>
    </select> <select class="auto-style1" name="Select6" style="width: 150px">
    <option>Stichwortverzeichnis</option>
    <option>Farbe</option>
    <option>Entsorgung</option>
    <option>Formular13.20A</option>
    </select> <select class="auto-style1" name="Select7" style="width: 150px">
    <option>Links</option>
    <option>Google</option>
    <option>AVIS</option>
    <option>tel.search.ch</option>
    </select></form>

</body>

</html>

Freundliche Grüsse aus der Schweiz
Markus

maerk72 · 3 Juni 2017

Hallo

wie bereits erwähnt:

maerk72 schrieb:
bitte um Nachsicht; bin ein absoluter Nobody was die Programmierung betrifft :(

iFrame ... InlineFrame?
wie füge ich so ein "iFrame" ein

maerk72 · 4 Juni 2017

Hallo,

habe nun folgenden Code eingefügt:

HTML:

<p style="margin-bottom: 5px"> </p>
</body>
<iframe src="derendinger.html" height="650" frameborder="0" name="Derendinger" style="width: 896px">
</iframe>[/

Habe ich eingefügt, dass ich zwischen der obersten Zeile und dem "iFrame" einen Abstand habe

HTML:

<p style="margin-bottom: 5px"> </p>

Jetzt wird die Datei derendinger.html im iFrame angezeigt, verlinkt ist aber noch nichts

wie geht es jetzt weiter?

maerk72 · 4 Juni 2017

O.K., Danke

Versuche es gerade umzusetzen

maerk72 · 4 Juni 2017

Habe es auch angepasst;
jetzt funktioniert es, Dankeschön :)

.... aber nur mit dem Mozilla Firefox
mit dem Microsoft Edge und dem IE nicht :(

http://02.markusbircher.ch/

sind bereits nur
Händler
- Derendinger
- Normauto
verlinkt

maerk72 · 4 Juni 2017

habe jetzt den obigen Code im "script-Bereich" eingefügt
auch mit den "//" am Anfang der Zeile?

jetzt geht es nicht mal mehr mit dem Firefox

maerk72 · 4 Juni 2017

den Script-Teil vom iFrame muss nicht noch angepasst werden?

maerk72 · 4 Juni 2017

HTML:

<iframe id="infoiframe" width="950" height="700" frameborder="0"></iframe>

maerk72 · 4 Juni 2017

Also braucht es nur den Teil:

Code:

   <script>
        $("select.infos").on("change", function () {
            var url = $(this.options[this.selectedIndex]).attr("data-url");
            $("#infoiframe").attr("src", url);
        });
    </script>

HTML:

<script type="text/javascript" src="//code.jquery.com/jquery-1.7.2.min.js"></script>
<script>

wo muss ich die Code: noch einfügen?

maerk72 · 4 Juni 2017

wo genau ist der Code noch einzufügen?
muss ich noch was entfernen?

maerk72 · 4 Juni 2017

geht immer noch nicht,
der Code sieht jetzt momentan so aus:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="de-ch" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>InfoBox</title>
<style type="text/css">
.infos {
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
}
.auto-style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
}
</style>
</head>

<body>

<form method="post">
    <select class="infos" name="Select1" style="width: 150px">
    <option>Händler</option>
    <option data-url="derendinger.html">Derendinger</option>
    <option data-url="normauto.html">Normauto</option>
    <option>IWAG</option>
    </select> <select class="auto-style1" name="Select2" style="width: 150px">
    <option>Garagen</option>
    <option>AMAG</option>
    <option>Rebmann</option>
    <option>Ruckstuhl</option>
    </select> <select class="auto-style1" name="Select3" style="width: 150px">
    <option>Marken</option>
    <option>Audi</option>
    <option>Alfa-Romeo</option>
    <option>BMW</option>
    </select> <select class="auto-style1" name="Select4" style="width: 150px">
    <option>Versicherungen</option>
    <option>Alba</option>
    <option>Mobiliar</option>
    <option>AXA</option>
    </select> <select class="auto-style1" name="Select5" style="width: 150px">
    <option>Telefonlisten</option>
    <option>Weiden</option>
    <option>Filialen</option>
    <option>Mitarbeiter</option>
    </select> <select class="auto-style1" name="Select6" style="width: 150px">
    <option>Stichwortverzeichnis</option>
    <option>Farbe</option>
    <option>Entsorgung</option>
    <option>Formular13.20A</option>
    </select> <select class="auto-style1" name="Select7" style="width: 150px">
    <option>Links</option>
    <option>Google</option>
    <option>AVIS</option>
    <option>tel.search.ch</option>
    </select></form>
<p style="margin-bottom: 5px"> </p>

    <iframe id="infoiframe" width="950" height="700" frameborder="0"></iframe>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js></script>
    <script>
        $("select.infos").on("change", function () {
            var url = $(this.options[this.selectedIndex]).attr("data-url");
            $("#infoiframe").attr("src", url);
        });
    </script>
</body>

maerk72 · 4 Juni 2017

Super, Vielen Dank :)
Jetzt funktioniert es auch mit dem Edge und IE11
Datei bereits hochgeladen.

Können wir uns bitte noch mit diesen Teil befassen:

HTML:

    </select> <select class="auto-style1" name="Select7" style="width: 150px">
    <option>Links</option>
    <option>Google</option>
    <option>AVIS</option>
    <option>tel.search.ch</option>
    </select></form>

Ich möchte gerne, dass die Hyperlinks von diesem Teil der DropDownListe in einem neuen Fenster geöffnet werden.
Diverse Code's wo ich bei Kollege "Google" gefunden habe, öffnet die Links nur in einem anderen Register

maerk72 · 4 Juni 2017

da ist es ja kein Wunder, dass ich nicht fündig geworden bin ;)
Nochmals Vielen Dank, du hast mir das verlängerte Pfingstwochenende gerettet.
Mein Chef möchte am Mittwoch morgen das "Projekt" fertig gestellt haben

maerk72 · 4 Juni 2017

kein Problem ;)
mein Chef hat noch weniger Ahnung von dieser Sache als ich selbst :)

maerk72 · 5 Juni 2017

Hallo, ich schon wieder ...

ist es möglich eine Excel-Datei im iFrame anzeigen zu lassen?
Es funktioniert ja auch bei *,txt und eben ja bei *.htm und *.html Dateien

Die Datei sollte auch wieder vom Drop Down Menu aus gestartet werden.
Habe schon was probiert, der Browser will dann aber die Datei nur herunterladen

nu.tella · 5 Juni 2017

Sempervivum schrieb:
Müsste man mal prüfen, ob es gut dokumentiert ist, so dass ein durchschnittlicher Anwender es handhaben kann.

Ich habe PHPExcel schon mal eingesetzt, ist eigentlich kein großes Problem. Sind auch einige Beispiele vorhanden, aus denen man einiges lernen kann.

maerk72 · 7 Juni 2017

Hallo zusammen,
Hallo "Sempervivum" ;)

übrigens, mein Chef war begeistert ...
möchte dennoch ein paar Änderungen vornehmen.
Die Variante die wir aufgebaut haben, stützt sich auf die "alte" Bauform, also anklicken und "scrollen"
Habe jetzt eine Lösung gefunden mit der Mouse-Over Funktion und dass sich die angewählten "Fenster" aufklappen.
Jetzt passen natürlich die Verlinkungen nicht mehr

Hier die entscheidenden Codes:

HTML:

<!--[START-QM0]--><ul id="qm0" class="qmmc qm-horizontal-c">

    <li><a class="qmitem-m qmparent" href="JavaScript:void(0);">Lieferanten</a>

        <ul class="qmsub">
        <li><a class="qmitem-s" href="JavaScript:void(0);">Derendinger AG</a></li>
        <li><a class="qmitem-s" href="JavaScript:void(0);">Normauto OE-Teile AG</a></li>
        <li><a class="qmitem-s" href="JavaScript:void(0);">Glas Tr&ouml;sch AG Autoglas</a></li>
        <li><a class="qmitem-s qmparent" href="JavaScript:void(0);">... weitere</a>

            <ul class="qmsub">
            <li><a class="qmitem-s" href="JavaScript:void(0);">Auto Teile Wettingen GmbH</a></li>
            <li><a class="qmitem-s" href="JavaScript:void(0);">Streit Imports GmbH</a></li>
            </ul></li>

        </ul></li>

    <li><a class="qmitem-m qmparent" href="JavaScript:void(0);">Marken</a>

        <ul class="qmsub">
        <li><a class="qmitem-s" href="JavaScript:void(0);">Alfa-Romeo</a></li>
        <li><a class="qmitem-s" href="JavaScript:void(0);">Audi</a></li>
        <li><a class="qmitem-s" href="JavaScript:void(0);">BMW</a></li>
        <li><a class="qmitem-s qmparent" href="JavaScript:void(0);">... weitere</a>

            <ul class="qmsub">
            <li><a class="qmitem-s" href="JavaScript:void(0);">Abarth</a></li>
            <li><a class="qmitem-s" href="JavaScript:void(0);">Aixam</a></li>
            </ul></li>

        </ul></li>

etc ....

der iFrame ist auch bereits angefügt, und wird auch bereits angezeigt

HTML:

<body>
<p style="margin-bottom: 15px"> </p>
</body>

<body>
    <iframe id="infoiframe" width="900" height="600" frameborder="1"></iframe>
</body>

die anzuzeigenden Dateien sind nach wie vor *.html Formate

Die Testseite: http://test.markusbircher.ch/

Grüsse aus der Schweiz

maerk72 · 7 Juni 2017

1. Nö, mit einem Online-Generator
2. kompletter Code ist unten angefügt
3. spielt keine Rolle, wird bei uns im Geschäft eh nur intern genutzt, also per PC

maerk72 · 8 Juni 2017

Dankeschön :)
Habe die Einträge verlinkt, klappt soweit
Ausser wenn ich bei Lieferanten auf weitere klicke resp. mit der Maus drüberfahre öffnet sich das Fenster nicht und die erweiterten Einträge werden nicht angezeigt.

Siehe als Beispiel auf: http://test.markusbircher.ch/
Marken/... weitere

Das mit der anzuzeigenden Excel-Liste hat sich erledigt, habe die Datei resp. die Tabelle als *.html gespeichert.

maerk72 · 8 Juni 2017

Entschuldige die spähte Antwort, bin soeben von der Arbeit gekommen
Ja habe folgenden Original-Eintrag wieder zugefügt resp. überschrieben

HTML:

                    <a class="qmitem-s qmparent" href="JavaScript:void(0);">... weitere</a>
 
                    <ul class="qmsub">

Jetzt sind aber zwischen den Einträgen "Derendinger AG, Normauto usw. grössere Abstände entstanden ...?

Hyperlinks von Drop Down Box verlinken

Neues Mitglied

Anhänge

Neues Mitglied

Neues Mitglied

Anhänge

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Neues Mitglied

Anhänge

Neues Mitglied

Neues Mitglied