Salve.
Vorrei passare il nome, in formato stringa, di una determinata icona che clicco.
Ad esempio, se ho una faccia sorridente come icona e la seleziono, in una rispettiva textbox vorrei fare apparire ad esempio "sorriso".
E' una cosa possibile farlo con html oppure ci vuole un linguaggio di programmazione web?
Grazie.
devi utilizzare javascript
http://www.trustweb.it - Web Development - Design 2D/3D - SEO & SEM
Twitter http://twitter.com/#!/TrustWeb
LinkedIn http://it.linkedin.com/in/trustweb
sposto su JS
Beh per associare un testpo ad una immagine ti conviene mettere il testo lell' attributo alt della immagine, sembra la cosa più sensata da fare. Poi all' evento che credi, diciamo onclick, indirizzi un campo di form (ad esempio) a cui hai assegnato un id il testo dell' attributo alt:
<form><input type="text" id="scrivi" /></form>
Se, come immagino, il codice ti serve a inserire del testo (tipo smile, tags, etc.) in una textarea, potresti partire dal consiglio di TrueLies e integrarlo con questo codice:
[CODE]<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio per il Forum di HTML.it</title>
<script type="text/javascript">
function insertMetaChar(sStartTag, sEndTag) {
var bDouble = arguments.length > 1, oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value;
oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd);
oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length);
oMsgInput.focus();
}
</script>
<style type="text/css">
.intLink {
cursor: pointer;
text-decoration: underline;
color: #0000ff;
}
</style>
</head>
<body>
<form name="myForm">
[<span class="intLink" onclick="insertMetaChar('[B]','[\/B]');">grassetto</span> | <span class="intLink" onclick="insertMetaChar('[I]','[\/I]');">corsivo</span> | <span class="intLink" onclick="insertMetaChar('[URL='+prompt('Enter the full URL for the link')+']','[\/URL]');">collegamento</span> | <span class="intLink" onclick="insertMetaChar('\ncodice:\n','\n[\/CODE]\n');">codice</span> | <span class="intLink" onclick="insertMetaChar(' :-)');">smile</span> | etc. etc.]</p> <textarea rows="10" cols="50" name="myTxtArea">Testo di esempio</textarea></p> </form> </body> </html>
Grazie TrueLies e carlomarx. Ho preso spunto e alla fine ho utilizzato questo codice:
Praticamente così passa direttamente il sorriso ":)" nella textbox.codice:[img]risata.jpg[/img] <form action="emoticonTest.php" method="post"> <input type="text" name="testo" id="scrivi"> <input type="submit" name="submit" value="invia"> </form>
Piccola retifica
Cavoli però ora nella textbox posso solo passare le faccine ":)" perchè se scrivo e poi clicco su una icona emoticon cancella il testo che ho scritto prima nella texbox e gli mette proprio questo ":)".
Devo trovare qualche sistema per concatenare quello che c'è scritto al sorriso :)
In rosso la correzione:
Calcola che se usi il campo input text potrai inserire il "sorriso" soltanto alla fine della stringa digitata, mentre se usi una textarea con un codice simile a quello che ti ho mandato potrai inserire gli smile anche all'interno del testo, nel punto esatto in cui si trova il cursore. Magari prova anche il mio codice, così te ne renderai conto...codice:[img]risata.jpg[/img] <form action="emoticonTest.php" method="post"> <input type="text" name="testo" id="scrivi"> <input type="submit" name="submit" value="invia"> </form>
Grazie carlomarx, ora funziona come doveva.
Ho inserito il + nel punto che mi hai indicato.
Ho fatto delle prove ed il testo viene inserito sia prima che dopo l'inserimento dell'emoticon anche nel text box.
OkComunque prova questo, ho usato la tua immagine "risata.jpg", così capisci cosa intendo...:
codice:<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Esempio per il Forum di HTML.it</title> <script type="text/javascript"> function insertMetaChar(sStartTag, sEndTag) { var bDouble = arguments.length > 1, oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value; oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd); oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length); oMsgInput.focus(); } </script> </head> <body> <form name="myForm"> [img]risata.jpg[/img]</p> <textarea rows="10" cols="50" name="myTxtArea">Testo di esempio</textarea></p> </form> </body> </html>
Dimenticavo! La funzione che ti ho inviato può inserire un singolo metatag nel punto esatto in cui si trova il cursore se usi un solo argomento, oppure può racchiudere il testo selezionato in due metatag se usi due argomenti. Per capire meglio di cosa parlo, guardati il mio esempio precedente.
Permessi di invio
