• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hyperlinks von Drop Down Box verlinken

M

maerk72

Neues Mitglied
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 :eek:

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
 

Anhänge

  • index.zip
    779 Bytes · Aufrufe: 2
Werbung:
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?
 

Anhänge

  • InfoBox.zip
    19,9 KB · Aufrufe: 0
Werbung:
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
 
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
 
Werbung:
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?
 
Werbung:
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>
 
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 :confused:
 
Zuletzt bearbeitet:
Werbung:
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
 
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 :eek:
 
Werbung:
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 :eek:

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
 
Zuletzt bearbeitet:
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
 

Anhänge

  • index.zip
    2,4 KB · Aufrufe: 4
Werbung:
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.
 
Zuletzt bearbeitet:
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 ...?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben