|
HTML - Uploading Images Without Updating Page
Hi
I have written a gallery where a user can upload a photograph. This uses a form to upload the photo, and insert data into a MySQL table. What I want to do, is instead of having to go through the submit button, have a button where the user can click, this will upload the image, create a thumbnail, display the thumbnail on the page - but the page is not refreshed........... Can this be done with AJAX? Bearing in mind, I have little/no experience with Javascript - but I'm willing to learn! If this can be done, and it's using AJAX, are there tutorials out there to which I could be directed? Many thanks S Similar TutorialsHey everyone, I'm the owner of a small business who had a website made recently. Unfortunately, I felt the style of the designer wasn't what I was looking for so we parted ways. So, basically I am left with a mostly done website, including code for a sliding bar of pictures (sorry for the non-technical phrases) for the online shop section of the site. My problem is I don't know how to upload pictures to the bar! Right now all it has is a "coming soon" picture. Can anyone help? URL is: http://outoftheblue.ca/newarrivalsOOTB.html Thanks! Hello, I'm a bit of an amateur at HTML, I'm still using notepad to make my site ;-) Anyway for the most part I've had good success when updating my website, however now I'm encountring a real head scratcher and I'm hoping some of you kind and wiser gentlemen (and ladies?) can help. After inputting my code and building locally I see the image below to the left, however upon uploading all my goods (using Ipswitch WS_FTP Pro 30 day trial) it appears that my code has updated correctly, however none of my images show up, as seen on the below image to the right. I've attempted to troubleshoot this one a bit but I think I've hit a wall, I don't know if it's the FTP program I'm using (hasn't given me issues in the past) or if I'm running out of space on my site? but even some images that I merely swapped for newer images aren't updating (same file name, etc) It's as if it wont accept any new jpegs! I can change the code and the simple text that I have and it'll update fine and dandy but needless to say on a site that's supposed to feature art pieces, I'd like to get my artwork updated :-( My site is www.alexanderalza.com Any help would be GREATLY appreciated, thank you very much! I use frontpage to edit my page (so I can view it before uploading it to the web) It shows exactly the way I want it when I save it and view it on my HD but once I upload it to the server... it's the same... Then when I edit it again and upload the "update".... it's messed up. Could anyone tell me what I am doing wrong? Thanks Lace I decided to make a new homepage for my website. It is basically just a JPG. Which I imported in Dreamweaver and added AP DIV layout objects... It comes out really beautiful If I launch it locally using F12 in Dreamweaver. But it turns like this after I upload it to the server. (YOu can view HTML by clicking view source in your browser) I tried almost everything I can to fix it but it just won't. Can someone help? PLEASE? Hey there, I started html/css a few days since I wanted to make my own website for my own Minecraft server and I've ran into a little problem with it. I tried putting 2 videos aswell as a paragraph of text on the front page and well... the video at the bottom of the page was well below the white line. Is there something that I need to do so the page updates and expands? My html and css is below. HTML Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dawn Craft</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #000000;
background-image: url();
}
body,td,th {
color: #FFF;
}
</style>
</head>
<body>
<div id="header"><a href="index.html"><img src="images/header.png" width="900" height="100" /></a>
<div id="menu"><a href="index.html"><img src="images/Home.png" width="80" height="25" /></a><a href="http://www.dawncraftmc.com/"><img src="images/Forum.png" width="80" height="25" /></a></div>
</div>
<div id="content_wrap">
<div id="left_content">
<div id="information" style="text-align: center; font-family: Verdana, Geneva, sans-serif; font-weight: bold;">
<p>Server updates</p>
<p>----------------------------</p>
<p>Congratulations to ICOZANE1 and 450airsoft on becoming the first 2 moderator's.</p>
<p>----------------------------</p>
<p>The server is being upgraded to 26 slots!</p>
<p>----------------------------</p>
<p>We got a new site! We will be keeping the forum.</p>
<p> </p>
<p> </p>
<p> </p>
<p>Vote for the server!
<a href="http://www.xtremetop100.com/in.php?site=1132322674">
<img src="http://www.xtremeTop100.com/votenew.jpg" border="0" alt="Minecraft"></a></p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="right_content">
<p> </p>
<p style="text-align: center">A quick look at the 1.7 pistons update.</p>
<div class="video_wrap2">
<iframe width="640" height="390" src="http://www.youtube.com/embed/uZJr86d2IUo" frameborder="0" allowfullscreen></iframe></iframe>
</div>
<p style="text-align: center"> </p>
<p style="text-align: center"> </p>
<p style="text-align: center"> </p>
<p style="text-align: center">---------------------------------------------------------------------------------------------------------------------</p>
<p style="text-align: center">The Server will be staying at 1.6 until all the mods are updated! Keep checking the site or the forums for updates. </p>
</div>
</div>
<div id="footer" style="text-align: center">
<a href="http://minecraftviewer.com/servers/38428/view" target="_blank"><img src="http://cache.multiplayuk.com/b/1-38428-560x95.png" alt="Server Banner" style="border:0;width:560px;height:95" /></a>
</div>
</body>
</html>
Code: @charset "utf-8";
/* CSS Document */
body {
margin:0;}
#header {
height:90px;
width:855px;
margin-left:auto;
margin-right:auto;
}
#menu {
height:45px;
width:500px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
font-family: District;
border-bottom-width: 0px;
border-bottom-style: none;
border-bottom-color: #FFF;
}
#content_wrap {
height:800px;
width:980px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
border: 3px solid #FFF;
-moz-border-radius:20px;
-webkit-border-radius:15px;
background-color: #000;
}
#left_content {
height:800px;
width:240px;
float: left;
background-color: #000;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
}
#information {
height:719px;
width:220px;
margin-top:70px;
margin-left:5px;
-moz-border-radius:20px;
-webkit-border-radius:15px;
border: 3px solid #FFF;
}
#right_content {
height:800px;
width:730px;
margin-left:10px;
float: right;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #F00;
border-right-color: #F00;
border-bottom-color: #F00;
border-left-color: #F00;
}
.video_wrap2 {
height:390px;
width:640px;
margin-left:auto;
margin-right:auto;
margin-top:30;
}
#footer {
height:25px;
width:980px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
}
I've got a user interface written in html, with various parameters for iperf in various textboxes. When the submit button is pressed, I call a .php file which takes the parameters and passes them to a java programme which runs iperf. Using a form action pointing to the .php file, I can call the .php file and get the output (the data collected by iperf) to be printed to the screen, it just isn't in real time and refreshes the page completely. How would I redirect this output to a textbox on the original page? I was thinking about calling a javascript function upon submission of the form which would start an XMLHttprequest, but can't seem to get this to work... Current code which doesn't seem to do anything: Code: <head>
<script language="javascript" type="text/javascript">
function ajaxFunction()
{
var ajaxRequest
try
{
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
return false
}
}
ajaxRequest.onreadystatechange = function()
{
if (ajaxRequest.readystate == 4)
{
this.iperfClientParameters.results.value = ajaxRequest.responseText;
}
};
ajaxRequest.open("GET","iperfRunningFile.php",true)
ajaxRequest.send(null);
}
</script>
</head>
<body>
<form name="iperfClientParameters" onSubmit="return ajaxFuntion()" method="get">
//form contents
</form>
</body>
Thanks in advance for any responses. Hi, What are the possible locations inside a webpage for images? I know images can be directly inside the html tags, but where else there? Can I have images inside a table? If, then does it have to be inside a row? If, then does it have to be inside a cell? Can images be somewhere else? Is this kind of structure totally ok? Code: <html> <img /> <table> <img /> <tr> <img /> <td> <img /> </td> </tr> </table> </html> Hey guys are the images on this page showing up for people: http://www.anotherlookonline.com/content/photo-gallery Thanks for the help! JT hello i can't get my web page to display a picture from picture folder i have to use notepad its for my college assignments. anyone have any ideas what i'm doing wrong? I'm sorry I can't provide a url because I'm not online yet, but here is my problem. I am trying to post a series of images with text descriptions of each image, but I can't seem to align the images so they are spaced evenly. (Basically like tabs in between the photos) I have tried the following things: <img src="party23.jpg" width="150" height="150" hspace=50>Blowing out candles <img src="party24.jpg" width="150" height="150">The cake<br> what I got was the pictures separated from the text - and the next picture's placement spaced from the end of the 1st picture's text, instead of from the first picture. I have also tried this: <img src="party23.jpg" width="150" height="150">Blowing out candles <center><img src="party24.jpg" width="150" height="150">The cake</center><br> what I got was the first picture & text was fine but the 2nd was centered on a new line instead of to the right of the first picture. Then I tried: <img src="party23.jpg" width="150" height="150">Blowing out candles <img src="party24.jpg" width="150" height="150">The cake<br> I might be able to get this to work...but I would have to count the spaces from the end of each text until the space where the photo needs to go so I know how many  's to insert.. and since all the text captions are different, that would be really time-consuming since there are alot of photos. Anyone able to help me find an easier way?? Any help greatly appreciated!! Hello, I'm not sure if what I'm asking is possible using html, but I'm going to ask anyway... I'm trying to figure out how to have a sidebar randomly cycle through a series of images each time the page is loaded/refreshed. I'd like the same image displayed at the top and bottom of my sidebar, one image each at the top and bottom of my menu list. But I want to make sure that the image displayed at top and bottom are the same one. Here's my current version of the site: http://home.comcast.net/~blayne81/l5rrpgweb/ You can see the menu on the left side of the page and the two images at the top and bottom of the menu. I have another eight or so images I'd like it to display randomly or cycle through in order (it really doesn't matter which), whenever the page loads/reloads so I don't have to manually pick which image appears every page I write, the code will do that for me. Thanks for your help, Brienprime Please follow this link and observe how the page scrolls up after you have been taken there. It scrolls up because, unless you've been here before and have all the images stored on your computer, the images are continually downloaded and they expand the height of the page causing it to expand down and causing your browser to scroll up. Incidentally, the point at which you were supposed to be linked to ends up further down the page. Is there a way of preventing this? Is there a way of getting the browser to stick to the original point on the page where you were linked to? Hello People, I have 5 images that i want to display one by one after regular interval's of time . I dont know how to do this in HTML .Can you please help me. Thanks in advance, Kluserner This has been an issue with me for a very long time and this is the first time I'm asking the help of others to help me cure the problem. Take a look at www.tenniselbowpros.com. There is an image of a girl at the top of the page. She is holding a tennis racket. The image displays in 4 individual rows within the table. The problem is, there is a gap between the 2nd and 3rd images, and 3rd and 4th, leaving white space between the images and not butting them against each other so that the image looks as though it is one. What am I doing wrong with the layout or configuration of the cells? How do I fix this problem? I created the graphic elements in photoshop, then exported the html and images from photoshop. Then opened those files in Dreamweaver. If all of the cells had remained exactly how I imported them into Dreamweaver, all images butt up against each other just fine and I have no problem. But, if I add more text which lengthens some of the cells, then the table starts to go haywire and my images start separating. Please help. thanks Dear all. I see this done many times on many websites (especially comic websites) where an image has a forwards and backwards arrow button, and images selected correspondingly. Ideally I want the [img src="images/001.jpg"] file name to increase by one each time. So all I have to do is add more images in ever increasing filenames to the images folder, 002.jpg, 003.jpg etc. How do I add one to a filename and then refresh the page? Can I do this in XHTML ? Many thanks. On my website, there is a Gallery of several pictures and I made a special page for use as a popup, which matches the main website with the one image (the popup is to show the image larger, when clicked on from the gallery) However, I do not want to make 50 duplicate pages for use as a popup (click for larger image), I would rather have the one page then in the main gallery, call whichever photo should be in the popup. As an example of what I'm trying to do (not the code I'm using, but rather trying to make myself clear: Main page: <a href="popup.html" onclick="return popitup('popup.html') ImageToUse="classic001_lg.jpg""><img src="classic001_sm.jpg" width="320" height="268" border="0" /></a> Then in the popup: <img src=ImageToUse width="650" height="506" /> Thank you, - Randy I am making a page with a load of thumbnails which are links to other pages. The code is essentially... Code: <a href="#">
<img src="thumbnail" />
<span>
<img src="larger image with some nice css styling" />
</span>
</a>
a span has display none and and a:hover span has display block. What I want to know is does the larger image load with the whole page or does it only load when you hover on the link. I.E. does having loads of hidden images effect page load time? Thanks I'm in charge of doing the coding for a site that's been designed by a graphic designer with no knowledge of code. I like his designs, and the client wants me to make the site look exactly like them. They're .psd files representing each page. He sent me almost all of the images, but not the background and not certain key decorations (the guitar pics). I told him I needed the background, but his hard drive died (without being backed up) before he could send it to me. He doesn't seem to remember what font he used either. In light of all that, and the fact that the client wanted to get a basic version of the site up asap, I just converted the PSD's to JPEG's, uploaded them as whole pages, and used div's and image maps to add links and additional content. But that is obviously not a long-term solution. In fact, it's causing browser compatibility issues right now. And it's not accessible . . . etc. So I need to replicate these page design images using HTML or XHTML, and CSS. I can probably find a similar background and font to work with, but I just don't know where to begin. I haven't worked with CSS in years, but it looks like I'd probably need to use it. I'm not asking anyone to do my job for me. I'm just wondering how you would approach this task. Does anyone have time to look at the images and point me in the right direction? Here's the embarrassingly incomplete site: http://www.musicisrevolution.com The navigation works with Safari and Firefox. I'm also attaching one of the images so that it'll be clear what I'm talking about. I'm new to scripting and tried over and over to make it work please help : ) the link in question is the facility page... the image icons when clicked i need it to open in the parent page. the page is www.laineross.com/clients/trans the other page is http://www.laineross.com/clients/tra.../facility.html Hello this is going to sound really basic so any way How do you style font to appear in the middle of your page using CSS as im aware you can either float left or right, am i right in saying you have to use padding? margins? to get it to be where u want it to sit? |
|||||||