Greetings experts,
I am currently using tinymce (tinymce.moxiecode.com) along with the file manager plugin. When I attach the javascript to the input text box, a nice file manager pops up and allows me to populate the value of that textbox with the value of the image that has been selected, along with directory paths etc.
I would like to put an image placeholder just below the text field, and have some onchange script change the value of the image based on the value that is contained in the text box. For example, I click browse, go to folder called items, then click an image called myimage.jpg and then click the insert button, that then populates the textbox called image and it reads items/myimage.jpg.
When the textbox value has changed, below it items/myimage.jpg loads and the user can see exactly what he is posting to the database before thinking "hmm, did I select the right image the first time?" I know that tinymce's filemanager does this functionality on the right hand side (it loads the clicked image for preview) but I want to add the textbox onchange feature to ensure there is no confusion.
EG:
Please select an image:
--------------------------
| images/myimage.jpg | [Browse] < On click the value of text is changed and based on the change the image is loaded/reloaded with the value
--------------------------
This is what you have selected:
--------------------------
| |
| |
| <img scr="images/myimage.jpg"> |
| |
--------------------------
If you are happy with the results please click Update to make your changes live:
Update
Just so that you know, this is for both the add and edit pages, and on the edit page, when it loads, I will already have the image loaded (value from database) but if the user selects a different image then when the textbox changes, the "loaded" image will change based on the value of the textbox.
I hope i have made this clear enough and hope that you are able to help me.
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
Ugh... need a preview button :)
Here's a more readable version (I hope):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Image Swap OnClick </TITLE>
</HEAD>
<BODY>
<div id="myIMGDIV"><img id=myIMGTAG src=http://www.google.com/
<input type=button onclick="javascript:docume
</BODY>
</HTML>
<html>
<head>
<title>Untitled</title>
</head>
<script type="text/javascript">
<!--
function chgImage(strtxt) {
document.getElementById("m
}
//-->
</script>
<body>
<form name="frmName">
<input type="file" name="strFile" onChange="chgImage(this.va
<img src="image.jpg" id="myImage" alt="alt-text">
</form>
</body>
</html>
Hi Crimson, unfortunately I didn't want to use an onclick event with a button to swap two pre-configured images and therefore your solution wasn't exactly what I was looking for.
Dukesta, many thanks for your input, I have integrated your code into my content management system and it works a treat. I had to double the function as there were a couple of text fields I wanted to apply the behaviour to. I changed the input type from file to text as there is already a file manager system for uploading files, moving them, creating directories etc which, when an image is selected (from the server directory structure) the value gets put into the text field. This function works a treat and thanks for your input.
Ingwa
Business Accounts
Answer for Membership
by: crimson117Posted on 2006-02-22 at 07:35:40ID: 16019940
Does this do the trick?
<pre><html>
<HEAD><TITLE>N
<META content=EditPlus name=Generator>
<META content="" name=Author>
<META content="" name=Keywords>
<META content="" name=Description></H
<BODY>
<DIV id=myIMGDIV><IMG id=myIMGTAG src="http://www.google.com
<INPUT onclick="javascript:docume
</html>