Click image opens popup

Question

So what I wanna do is to click an image, which opens up a popup window with the image-URL in a textfield. Here is should be possible to change the URL and by that changing the image-URL.

Im very poor with javascript and thats why im asking for help.

HTML

<img src="#" onClick="changePicture();" />

Javascript

function changePicture() {
      var myPopup = window.open("", "", "width=200, height=100");
}

Answer 1

This is actually very simple to do. Make a image like so:

<img src="http://lorempizza.com/200/200/" onclick="change()" id="target">

And the function is very simple.

    function change(){
    var target = document.getElementById("target");
    var current = target.src;
    var url = prompt("change address to:", current);
    target.src= url;
}

First, you define the variables. var url opens a prompt window that asks for the url. var target defines which image you want to change. And the last line changes var target 's src to the value of var url . var current gets the current url of the image and adds the current url to the text-box.
JSFiddle Demo

Answer 2

Perhaps I don't fully understand your question, but you can use JavaScript/HTML to open a link in a new window with the following code:

<a href="#" onclick="window.open('newWindow.html', 'newName', 'width=300, height=250'); return false;">Click here</a>

That new document could house the view for your images (alternatively, you could just change the first argument of open() to the image itself), and from that new window your "textfield" to change is the url.

Answer 3

Something like this maybe?

IMG HTML:

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png" />

JS:

$('img').on("click",function(){
    var win = window.open();
    var url = $(this).attr("src");
    var html = $("body").html("<textarea>" + url +"</textarea>");
    $(win.document.body).html(html);
});

Demo:

http://jsfiddle.net/HsTkf/10/

If you are looking for a dialog:

You could make your own and do something like this. This is still missing a few things such as a way to close it, proper positioning and what not. However, there are more advanced dialog libraries out there if this is what you are looking for.

HTML:

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png" />

<div class="prompt"></div>

JS:

$('img').on("click",function(){
   var url = $(this).attr("src");
   $(".prompt").append("<textarea>" + url +"</textarea>");
   $(".prompt").addClass("show");
});

CSS:

img {
    width:50px;
    height:50px;
}
.prompt {
   display:none;
    position:absolute;
    top:40%;
    left:40%;
    padding:10px;
    border:1px solid #ccc;
    -webkit-box-shadow: 3px 3px 7px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    3px 3px 7px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         3px 3px 7px 0px rgba(50, 50, 50, 0.75);
}
.show {
    display:block;
}

Demo: http://jsfiddle.net/HsTkf/21/

Libraries:

1. http://getbootstrap.com/javascript/#modals
2. http://jqueryui.com/dialog/
3. http://www.ericmmartin.com/projects/simplemodal/

Answer 4

I have created a example in jsfiddle..

when you will click on image it will open current image url in editing mode in pop up and you can change it.

function ChangeUrl(){ 
    var image1 = document.getElementById("image1");
    var url = prompt("change image source",image1.src);   
    image1.src= url;
}

see working example:- http://jsfiddle.net/XUjAH/1094/

or i have created another jsfiddle for you, i have used jquery dialog box in place of prompt.

see this working example:- http://jsfiddle.net/eDMmy/9/

thanks