Good day all
Have done quite a bit of web research on this but can't find the answer I need. I have a lot of images, all numbered 1 through 3000. I want the user to place a number in a textbox and from there click a button. The image will be displayed in a Jquery pop up box. I have the pop up box sorted but not the img souce element.
I have created a test area to try to fix the problem. In the root I have an image called test1.jpg and the test is to try to display it. I have a textbox called testbox1 and it has the value test1 loaded into it. I have a button that runs the javascript function that hopefully adds together the contents of the textbox and ".jpg" - Thats where the problem is, it does not work.
Some help guys, where am I going wrong? - Or is there a much easier way to achieve this such as
img.src = "textbox1.value" - Or some such syntax
Once I can get the image source to change based upon the value of the textbox I can deal with the issue of the textbox input being equal to one of the 3000 numbers etc
This is where I'm up to
regards
Peter
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="pop_out_window_test.WebForm1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>'This is the title</title><script
src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script><script type="text/javascript">
function myFunction() {
var elm = document.getElementById("myid");
img = document.getElementById("myimg");
img.src = elm + ".jpg";
}</script></head><body><form id="form1" runat="server"><input id="myid" type="text" value="test1"/><img src="Capture.PNG" /><button onclick="myFunction()">Try it</button><br /><br /><asp:Button ID="Button1" runat="server" Text="Test" /><div id="overlay" class="web_dialog_overlay"></div><div id="dialog" class="web_dialog"><!Add what you want in the box below here, use the drop down box to sort the properties i.e gridview 2 set to 100% width - Peter W ><div id="Div1"><img src="Capture.PNG" /></div><table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0"><tr><td class="web_dialog_title">Selected Image</td><td class="web_dialog_title align_right"><a href="#" id="btnClose">Close</a></td></tr><tr><td> </td></tr><tr><td> </td></tr><tr><td colspan="2" style="padding-left: 15px;"></td></tr><tr><td> </td><td> </td></tr></table></div><div><script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function (e) {
ShowDialog(false);
e.preventDefault();
});
$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});
});
function ShowDialog(modal) {
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function (e) {
HideDialog();
});
}
}
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}</script></div></form></body><style type="text/css">
.web_dialog_overlay
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.web_dialog
{
display: none;
position: fixed;
width: 400px;
height: 150px;
top: 100%;
left: 100%;
margin-left: -800px;
margin-top: -500px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;
}
.web_dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.web_dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
</style></html>