Bilderanzeige reagiert auf dropdown

melistik

Erfahrenes Mitglied
Wie kann ich durch die verschiedenen Auswahlkreterien im Dropdown
die verschiedene dazugehörigen Bilder anzeigen lassen, ohne das ich voher poste !
Ich stelle mir das so vor, das ich in meinem post forumular post.html
unten in im dropdown die Symbole auswähle und der Benutzer sofort sieht,
wie es aussehen würde wenn es dieses nimmt !
Oben rechts im leeren bereich soll das Bild errscheinen.
Könnte mir einer bitte erklären wie soetwas geht (schön ausführlich)
damit ich es verstehe da ich nur ein "wenig" PHP kann. Danke :)
 
Mal angenommen,deine Bilder heissen so,wie es in der Liste steht,also bspw. "info.gif","inet.gif" usw...
Füge an der Stelle,wo später die "Icons" erscheinen sollen, ein transparentes Gif ein und gib ihm nen Namen,
z.B. icon
Code:
<img name="icon"src="kein.gif">
Dann brauchst du deinen <select>-Tag nur noch um ne kleine JS-Anweisung zu ergänzen:
Code:
<select size="1" name="icons"onchange="document.icon.src=this.options[this.options.selectedIndex].value+'.gif';">
Fertig :)
(Sollten sich die Bilder nicht im selben Verzeichnis wie die Seite befinden, müsste man die Sache noch um den entsprechenden Pfad ergänzen)

Zur Erklärung:
Mit Javascript deshalb,weil es mit PHP nicht geht;)

Den Namen (icon) bekommt das Bild,um es mit JavaScript ansprechen zu können.
Das Skript:
  • onchange
    ....sobald sich die Auswahl in der Liste ändert,wird das Skript ausgeführt.
  • document.icon
    ...das Bild wird angesprochen
  • src
    ....die Eigenschaft des Bildes,welche neu gesetzt werden soll
  • this.options[this.options.selectedIndex].value...
    der Wert(value) der gerade ausgewählten Option
  • +'.gif';
    ....an den "value" der Option wird noch die Dateiendung des Bildes angehängt
 
Zuletzt bearbeitet:
Ersteinmal great thanks,
das mit dem Verzeichnis bekomme ich noch net so hin.
Und da habe ich noch eine Frage an meinen JavaScript kenner :)
wie kanne ich per button klick zb eine Funktion/Text einfügen,
sodass der geschriebene Teil des Textes fett ist oder unterstrichen ist.
Genauso wie hier im Forum beim posten !?
 
Was den Pfad betrifft:
nehme den Pfad der Bilder,so wie du sie normalerweise in der Seite referenzieren würdest.
Davon entferne den Dateinamen der Grafik und füge in in die Zeile ein.
Mal angenommen der Pfad wäre 'icons/inet.gif',dann müsste das so aussehen:
Code:
document.icon.src='icons/'+this.options.value+'.gif';"
Zu dem anderen:
Die JS-Function könnte so aussehen:
Code:
<script type="text/javascript">
<!--
function formatiere(f)
{
eingabe=prompt("Zu formatierender Text","");
if(eingabe.search(/\w/)>-1)
  {
  document.forms[0].text.value=document.forms[0].text.value+'['+f+']'+eingabe+'['+f+'/]';
  }
}
//-->
</script>
Sie erhält als Parameter einen Buchstaben/Zeichenkette,z.B. 'b'....jenachdem,wie es formatiert werden soll.
Dann erscheint ein Eingabefenster, wo der Text eingegeben werden kann.Aus der Eingabe wird dann
eine Zeichenkette mit den jeweiligen "Tags" erzeugt,welche in das Textfeld eingefügt wird.

Aufrufen kannst du das Ganze dann mit
Code:
<input type="button" value="b"onclick="formatiere('b');">
Bei der Ausgabe des Textes musst du die Dummie-Tags dann durch Echte ersetzen:
PHP:
<?php
$text="was dun so an Text ausgeben willst";
$tags=array('b','i','u');
for($t=0;$t<count($tags);++$t)
 {
 $pattern="|\[".$tags[$t]."\](.*)\[\/".$tags[$t]."\]|iU";
 $text=preg_replace($pattern,"<".$tags[$t].">\\1</".$tags[$t].">",$text);
 }
echo $text;
?>
 
Zuletzt bearbeitet:
Jup Danke

Ich habe den Script von Gaisbauer genommen ;)
PHP:
<script language="JavaScript" type="text/javascript">
<!--
function edit(mode){
switch(mode){
   case "fett":
        txt = prompt("Bitte gib den fetten Text ein","");
        document.edit.text.value += ""+txt+"";
			  document.edit.text.focus();
	      break; 
	 case "kursiv":
	      txt = prompt("Bitte gib den kursiven Text ein","");
        document.edit.text.value += ""+txt+"";
 			  document.edit.text.focus();
        break;
   }
}


function smiley(x){
         document.edit.text.value += x;
         document.edit.text.focus();
}

</script>
Aufgerufen werden die dann so :
<a href="javascript:smiley(':p');">blabla<a>
Habe ich beim durchforsten der Tutorials doch noch gefunden.
Besser zu spät als nie ;)
 

Neue Beiträge

Zurück