Zum Inhalt springen

Dropdown Menü mit Bildern Kombinieren

Marc Otte

Von Marc Otte
in Webdesign

 Teilen

Empfohlene Beiträge

Marc Otte

Marc Otte

Geschrieben
Geschrieben

Hallo wir haben in der Ausbildung jetzt die Aufgabe bekommen Einfach ein Formular zu entwerfen wo wir Kundendaten aufnehmen können. Unter anderem haben wir dort bei Herkunft ein Dropdown Menü.

Ich habe auf diversen Gamingseiten mal gesehen das wenn man ein Land ausgewählt hatte, das dann direkt hinter herkunft so eine kleine Landesflagge angezeigt wird.

Wie kann man sowas realisieren? Sowas hatten wir noch nicht in ITA :(

<tr>

<td align="left" class="normal">Land:</td>

<td align="right">

<select name="auswahlliste" size="1">

<option value=" " selected>Bitte auswählen</option>

<option value=" " >Germany</option>

<option value=" " >England</option>

<option value=" " >...</option>

</select>

</td>

Das mein Code für das Dropdown Menü. Zwischen dem Text "Land:" und dem dropdownmenü möchte ich gern eine kleine Landesflagge anzeigen lassen.

Liebe Grüße

Marc

Link zu diesem Kommentar
Auf anderen Seiten teilen
PieDie

PieDie

Geschrieben
Geschrieben

Wenn Du so eine Seite noch präsent hast, guck doch mal in den Quellcode :hells:

Da es bei SelfHTML nicht erwähnt wir, vermute ich, dass es sich nicht mit "Bordmitteln" lösen lässt. ich tippe hier auf DropDowns, die per Java generiert werden.

HIer gibts ein _ähnliches_ beispiel. kein echtes Dropdown, aber naja.

Change Html Drop Down Template

Ich vermute mal, dass diese Sites das auf ähnliche Weise machen.

Link zu diesem Kommentar
Auf anderen Seiten teilen
dennisderweber

dennisderweber

Geschrieben
Geschrieben

wenn ich richtig verstanden hab, soll die flagge ja nicht in das dropdownfeld, sondern davor.

da packst du anfangs einfach eine leere grafik hin, gibts der ne id und änderst die quelle der grafik, wenn sich der inhalt des dropdowns ändert.

also ca so: 

<option onSelect="document.getElementByID('grafikId').src='flagge_de.gif'">

nicht getestet.

falls sie da rein sollte, kann man das auch mit javascript lösen, dafür braucht man kein java-applet.

Link zu diesem Kommentar
Auf anderen Seiten teilen
ZuVieL

ZuVieL

Geschrieben
Geschrieben 

<script>

function chImage()

{

	if(document.getElementById("list").value == 1) {

	    document.getElementById("image").src = "germany.jpg";

	}

	if(document.getElementById("list").value == 2) {

	    document.getElementById("image").src = "england.gif";

	}

}

</script>



<select name="" size="1" onChange="chImage()" id="list">

<option value="" selected>Bitte auswählen</option>

<option value="1" >Germany</option>

<option value="2" >England</option>

</select>


<img id="image" src="">

Link zu diesem Kommentar
Auf anderen Seiten teilen
dennisderweber

dennisderweber

Geschrieben
Geschrieben

jupp, so gehts auch.

allerdings kann man das dann auch mit switch kürzer machen

function chImage()

{

	switch(document.getElementById("list").value){

		case "1":

		document.getElementById("image").src = "germany.jpg";

		break;


		case "2":

		...

	}

}
oder halt gleich die bilder so nennen wie die values gesetzt werden, dann kann man 
function chImage()

document.getElementById("image").src = document.getElementById("list").value + ".gif";

}

machen.

und die eine zeile könnte man jetzt auch doch wieder in den <select> tag mit reinpacken ;)

Link zu diesem Kommentar
Auf anderen Seiten teilen
Marc Otte

Marc Otte

Geschrieben
  • Autor
Geschrieben 

<script>

function chImage()

{

	if(document.getElementById("list").value == 1) {

	    document.getElementById("image").src = "germany.jpg";

	}

	if(document.getElementById("list").value == 2) {

	    document.getElementById("image").src = "england.gif";

	}

}

</script>



<select name="" size="1" onChange="chImage()" id="list">

<option value="" selected>Bitte auswählen</option>

<option value="1" >Germany</option>

<option value="2" >England</option>

</select>


<img id="image" src="">

Besten Dank, leider habe kriege ich das nicht so implementiert. Ich poste euch mal das, was ich bis jetzt geschrieben habe, wäre nett wenn mir jmd helfen würde das zu implementieren.

<html>

<head>

<title>Benutzerdaten erfassen</title>

<link rel="stylesheet" type="text/css" href="style.css">

<!-- Kommentar

Mit link rel leiten Sie eine logische Dateibeziehung ein.

Dahinter folgt der Typ der Dateibeziehung

(link = Verweis, rel = relationship = Verwandtschaft).

Das Attribut type ist ein Hinweis für Browser,

um welche Art Stylesheet es sich handelt – schließlich gibt

es noch andere Stylesheet-Sprachen.

href gibt das Verweisziel an -->

</head>

<body bgcolor="#0C528B">

<div class="header">Benutzerdaten</div><hr><br><br>

<fieldset>

<legend class="normal">Neuen Benutzer anlegen</legend>

<form name="adduser" action=" " method="post">

<div align="center">

<table border="0" cellspacing="0" cellpadding="3">

<tr>

<td align="left" class="normal"><input type="radio" name="auswahl1" value=" " ><img src="images\maskulin.gif" title="Maskulin">Herr</td>

<td align="left" class="normal"><input type="radio" name="auswahl1" value=" " ><img src="images\feminin.gif" title="Feminin">Frau<br>

</td>

<td align="left" class="normal"> </td>

<td align="right" class="normal"> </td>

</td>

</tr>

<td align="left" class="normal">Name:</td>

<td align="right"><input name="Name" type="text" size="25" maxlength="25"></td>

<td align="left" class="normal">Telefon:</td>

<td align="right"><input name="Telfon" type="text" size="25 maxlength="25">

</tr>

<tr>

<td align="left" class="normal">Vorname:</td>

<td align="right"><input name="Vorname" type="text" size="25 maxlength="25">

</td>

<td align="left" class="normal">Mobil:</td>

<td align="right"><input name="Mobil" type="text" size="25 maxlength="25">

</td>

</tr>

<tr>

<td align="left" class="normal">Straße:</td>

<td align="right"><input name="Straße" type="text" size="25" maxlength="25">

</td>

<td align="left" class="normal">Email:</td>

<td align="right"><input name="Email" type="text" size="25" maxlength="25">

</td>

</tr>

<tr>

<td align="left" class="normal">Plz / Ort:</td>

<td align="right"><input name="Plz" type="text" size="5" maxlength="5">

<input name="Ort" type="text" size="15" maxlength="15">

</td>

<td align="left" class="normal">ICQ:</td>

<td align="right"><input name="ICQ" type="text" size="25" maxlength="25">

</td>

</tr>

<tr>

<td align="left" class="normal">Land:</td>

<td align="right">

<select name="auswahlliste" size="1">

<option value=" " selected>Bitte auswählen</option>

<option value=" " >Germany</option>

<option value=" " >England</option>

<option value=" " >...</option>

</select>

</td>

<td align="left" class="normal">URL:</td>

<td align="right"><input name="url" type="text" value="http://" size="25" maxlength="25">

</td>

</tr>

</table>

</div>

</form>

</fieldset><br>

<div align="center">

<input type="submit" name="Eintragen" value="Eintragen" align="center">

</div>

</body>

</html>

Link zu diesem Kommentar
Auf anderen Seiten teilen
ZuVieL

ZuVieL

Geschrieben
Geschrieben
Besten Dank, leider habe kriege ich das nicht so implementiert. Ich poste euch mal das, was ich bis jetzt geschrieben habe, wäre nett wenn mir jmd helfen würde das zu implementieren.


<html>

<head>

<title>Benutzerdaten erfassen</title>


<link rel="stylesheet" type="text/css" href="style.css">


<!-- Kommentar

Mit link rel leiten Sie eine logische Dateibeziehung ein.

Dahinter folgt der Typ der Dateibeziehung

(link = Verweis, rel = relationship = Verwandtschaft).


Das Attribut type ist ein Hinweis für Browser,

um welche Art Stylesheet es sich handelt – schließlich gibt

es noch andere Stylesheet-Sprachen.


href gibt das Verweisziel an -->


<script>

function chImage()

{

	if(document.getElementById("list").value == 1) {

	    document.getElementById("image").src = "germany.jpg";

	}

	if(document.getElementById("list").value == 2) {

	    document.getElementById("image").src = "england.gif";

	}

}

</script>


</head>

<body bgcolor="#0C528B">

<div class="header">Benutzerdaten</div><hr><br><br>



<fieldset>

<legend class="normal">Neuen Benutzer anlegen</legend>

	<form name="adduser" action=" " method="post">

	    <div align="center">

	        <table border="0" cellspacing="0" cellpadding="3">

	            <tr>

	                <td align="left" class="normal"><input type="radio" name="auswahl1" value=" " ><img src="images\maskulin.gif" title="Maskulin">Herr</td>

	                <td align="left" class="normal"><input type="radio" name="auswahl1" value=" " ><img src="images\feminin.gif" title="Feminin">Frau<br></td>


	                <td align="left" class="normal"> </td>

	                <td align="right" class="normal"> </td>

	            </tr>

	            <tr>

	                <td align="left" class="normal">Name:</td>

	                <td align="right"><input name="Name" type="text" size="25" maxlength="25"></td>

	                <td align="left" class="normal">Telefon:</td>

	                <td align="right"><input name="Telfon" type="text" size="25 maxlength="25">

	            </tr>

	            <tr>

	                <td align="left" class="normal">Vorname:</td>

	                <td align="right"><input name="Vorname" type="text" size="25 maxlength="25"></td>

	                <td align="left" class="normal">Mobil:</td>

	                <td align="right"><input name="Mobil" type="text" size="25 maxlength="25"></td>

	            </tr>

	            <tr>

	                <td align="left" class="normal">Straße:</td>

	                <td align="right"><input name="Straße" type="text" size="25" maxlength="25"></td>

	                <td align="left" class="normal">Email:</td>

	                <td align="right"><input name="Email" type="text" size="25" maxlength="25"></td>

	            </tr>

	            <tr>

	                <td align="left" class="normal">Plz / Ort:</td>

	                <td align="right">

	                    <input name="Plz" type="text" size="5" maxlength="5">

	                    <input name="Ort" type="text" size="15" maxlength="15">

	                </td>

	                <td align="left" class="normal">ICQ:</td>

	                <td align="right"><input name="ICQ" type="text" size="25" maxlength="25"></td>

	            </tr>

	            <tr>

	                <td align="left" class="normal">Land:</td>

	                <td align="right">

	                    <select name="auswahlliste" size="1" onChange="chImage()" id="list">

	                        <option value="" selected>Bitte auswählen</option>

	                        <option value="1" >Germany</option>

	                        <option value="2" >England</option>

	                        <option value="" >...</option>

	                    </select>

	                    <img src="" id="image">

	                </td>

	                <td align="left" class="normal">URL:</td>

	                <td align="right"><input name="url" type="text" value="http://" size="25" maxlength="25"></td>

	            </tr>

	        </table>

	    </div>

	</form>

</fieldset>


<br>

<div align="center">

	<input type="submit" name="Eintragen" value="Eintragen" align="center">

</div>


</body>

</html>

Link zu diesem Kommentar
Auf anderen Seiten teilen
Marc Otte

Marc Otte

Geschrieben
  • Autor
Geschrieben

Besten Dank, klappt super, habe nur den Pfad und die Bildnamen angepasst.

Wenn ich die Seite jetzt das erste mal aufrufe, dann setzt er nicht das platzhalterbild bei "bitte auswählen" sondern es kommt das klassische Symbol für Grafik kann nicht angezeigt werde. Wenn ich jetzt durchklicke und wieder auf "Bitte auswählen" dann zeigt er mir das Platzhalter bild an.

Hier nochmal der Teil aus dem Header:

<script>

function chImage()

{

if(document.getElementById("list").value == 1) {

document.getElementById("image").src = "images/ph.gif";

}

if(document.getElementById("list").value == 2) {

document.getElementById("image").src = "images/germany.gif";

}

if(document.getElementById("list").value == 3) {

document.getElementById("image").src = "images/england.gif";

}

}

</script>

und der Teil aus dem Body

<td align="left" class="normal">Land:</td>

<td align="right">

<select name="auswahlliste" size="1" onChange="chImage()" id="list">

<option value="1" selected>Bitte auswählen</option>

<option value="2" >Germany</option>

<option value="3" >England</option>

<option value="" >...</option>

</select>

<img src="" id="image">

</td>

Edit hab grad mal mit ner 2ten Funktion probiert, funktioniert:

function ldImage()

{

document.getElementById("image").src = "images/ph.gif";

}

</script>

</head>

<body bgcolor="#0C528B" onload="ldImage()">

<div class="header">Benutzerdaten</div><hr><br><br>

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...