Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations John Tel on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Looking for a script 1

Status
Not open for further replies.
timcadieux

timcadieux

Programmer
May 25, 2005
129
BE
I would simply like to have a textbox where i prompt a user for a img source and when they leave that text box, the img would appear in a given spot.

Has anyone seen anything like this?
 
Sort by date Sort by votes
Do you mean you want the user to upload the image?
Or enter a URL to display one hosted elsewhere?



Paranoid? ME?? WHO WANTS TO KNOW????
 
Upvote 0 Downvote
Not exactly, assuming the image already exists on my server, but my client now wishes in include in in a given project. They would enter the jpg name and when they exit that Textbox, the thumbnail of the image would appear in a box next to the filename so they could be assured they are referring to the correct image.
 
Upvote 0 Downvote
That would be easy enough to do.
Use an onblur event to Pass the value they typed in to a function then use that value to change the src attribute of an image on the page to the new source.

<html>
<head>
<script language="javascript">
function changepic(newsrc)
{
var newpic = document.getElementById('MyPic');
newpic.src = newsrc;
}
</script>
</head>
<body>
<img id="MyPic" src="Picture022_12May05.jpg"><br><br>
Enter a picture name: <input type="text" name="PicSelect" size="20" onblur="changepic(this.value)">
</body>
</html>

Paranoid? ME?? WHO WANTS TO KNOW????
 
Upvote 0 Downvote
What would be nicer would to be able to present them with a list of images so they do not have to type one in and possibly get the name wrong. Might need server side script to automate that though unless you indexed the image names so that you could include them in the page.

Paranoid? ME?? WHO WANTS TO KNOW????
 
Upvote 0 Downvote
BTW, you would of course need to replace the filename I put in there when I was testing with an image on your own server.

Also, if you have the images in a different path you will have to append the path to the image name before modifying the src attribute.

For instance, if your images are in a subfolder called images:

newpic.src = "images/" + newsrc;

Paranoid? ME?? WHO WANTS TO KNOW????
 
Upvote 0 Downvote
Thanks, that's awesome, 1 last question though, i tried to use multiple on 1 page but it updates the image in both the img src ?

Code: 
<script language="javascript">
function changepic(newsrc)
{


var newpic0 = document.getElementById('MyPic0');
newpic0.src = newsrc;
var newpic1 = document.getElementById('MyPic1');
newpic1.src = newsrc;
  
}
</script>


<img id="MyPic0" src="">
<img id="MyPic1" src="">

[\code]
 
Upvote 0 Downvote
That is what you are telling it to do in the code.
You are using getElementById to grab the correct object to replace the source on but you pass both of them the same source.

How do you want it to work? Two input fields for two images? If so, you need to identify which image needs replacing based on which input field sent it.

<html>
<head>
<script language="javascript">
function changepic(which,newsrc)
{
var newpic = document.getElementById(which);
newpic.src = newsrc;
}
</script>
</head>
<body>
<img id="MyPic0" src="Picture028_06Jun05.jpg"><br><br>
<img id="MyPic1" src="Picture027_06Jun05.jpg"><br><br>

Enter a picture name: <input type="text" name="PicSelect" size="20" onblur="changepic('MyPic0',this.value)"><br>
Enter a second picture name: <input type="text" name="PicSelect2" size="20" onblur="changepic('MyPic1',this.value)">
</body>
</html>

Paranoid? ME?? WHO WANTS TO KNOW????
 
Upvote 0 Downvote
That's awesome, thank you, i was looking at the logic a bit backwards!! It is now working and i am very happy, thank you!
 
Upvote 0 Downvote
If we could go back to one of your suggestions, i would certainly prefer to list the files for the people who will be inputting them, however, the img src files reside on a seperate server, one we do not have access to other than browsing. Would i still be able somehow to populate a list if i knew the name of the folder on that server?
 
Upvote 0 Downvote
do you mean using a drop down list menu, that just has for example:
[doHTML]
<pre>
Name Value
test test 2 test 3 </pre>
[/doHTML]
Because you can do that and have the same JavaScripts active.

-----
Best Regards
Rob Kelsey
_________________________________________________________________
My computer makes me say: "Somebody stop the world, I want to get off!
 
Upvote 0 Downvote
While yes, i would like to do that, how could i populate the dropdown using the contents of a folder on another server, is that even possible?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
654
Rayj0000
Rayj0000
MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
1K
MDGarcia
MDGarcia
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
787
malpa
malpa
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
306
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top