473,591 Members | 2,842 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Loading Image without refreshing

BN
Hello..:)

Is it possible to load and show a JPG file using Javascript...?

I have a HTML document, and want to load a new image when the user pushes a
button.

Thanx..

--
Best Regards,

BN - [E A Rosengrens AS]
Jul 20 '05 #1
4 5815
On Sat, 17 Jan 2004 16:37:14 GMT, BN <tn******@enter .vg> wrote:
Is it possible to load and show a JPG file using Javascript...?

I have a HTML document, and want to load a new image when the user
pushes a button.
Do you mean you want to change the source (src attribute) of an existing
IMG element when a user presses a button? If so, then yes, it can be done
as long as you accept the fact that a user with JavaScript disabled cannot
use this feature in your page.

Place this somewhere before the button below (HEAD or BODY):

<SCRIPT type="text/javascript">
function changeImage( element, URI ) {
var img = null;

if( document.getEle mentById ) {
img = document.getEle mentById( element );
} else if( document.all ) {
img = document.all[ element ];
}
if( img ) {
img.src = URI;
}
}
</SCRIPT>

In the BODY of your document:

<IMG id="giveMeAUniq ueID" src="initialIma ge.jpg">
...
<BUTTON type="button"
onclick="change Image('giveMeAU niqueID','newIm age.jpg')"Change image</BUTTON>


replacing the two filenames and the ID name with your own values.

This will only allow the image to be changed once. Cycling between two or
more images, in sequential or random order, is equally possible, but as
you didn't ask for it, you're not getting it[1]. :P

Mike
[1] Obviously, ask if you do need such a feature.

--
Michael Winter
M.******@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 20 '05 #2
BN
Thanx, I will try this..

Is there also a way of handeling if the file does not excist...?

or to be exact:

My filenames consist of 2 or 4 characters. If a button loads the picture
2341.jpg and that image does not excist at the moment, I want 2300.jpg to be
loaded. And if 4356.jpg does not excist, I want to load 4300.jpg. ( The
first two bytes of the name + 00 )

--
Best Regards,

BN - [E A Rosengrens AS]
"Michael Winter" <M.******@bluey onder.co.invali d> skrev i melding
news:op******** ******@news-text.blueyonder .co.uk...
On Sat, 17 Jan 2004 16:37:14 GMT, BN <tn******@enter .vg> wrote:
Is it possible to load and show a JPG file using Javascript...?

I have a HTML document, and want to load a new image when the user
pushes a button.


Do you mean you want to change the source (src attribute) of an existing
IMG element when a user presses a button? If so, then yes, it can be done
as long as you accept the fact that a user with JavaScript disabled cannot
use this feature in your page.

Place this somewhere before the button below (HEAD or BODY):

<SCRIPT type="text/javascript">
function changeImage( element, URI ) {
var img = null;

if( document.getEle mentById ) {
img = document.getEle mentById( element );
} else if( document.all ) {
img = document.all[ element ];
}
if( img ) {
img.src = URI;
}
}
</SCRIPT>

In the BODY of your document:

<IMG id="giveMeAUniq ueID" src="initialIma ge.jpg">
...
<BUTTON type="button"
onclick="change Image('giveMeAU niqueID','newIm age.jpg')"
>Change image</BUTTON>


replacing the two filenames and the ID name with your own values.

This will only allow the image to be changed once. Cycling between two or
more images, in sequential or random order, is equally possible, but as
you didn't ask for it, you're not getting it[1]. :P

Mike
[1] Obviously, ask if you do need such a feature.

--
Michael Winter
M.******@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

Jul 20 '05 #3
On Sat, 17 Jan 2004 18:43:07 GMT, BN <tn******@enter .vg> wrote:
Is there also a way of handeling if the file does not excist...?


Not that I know of[1].

Mike
[1] That doesn't necessarily mean there isn't a way.

--
Michael Winter
M.******@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 20 '05 #4

You would have to use server side coding to do this .. like asp.


On Sat, 17 Jan 2004 18:43:07 GMT, "BN" <tn******@enter .vg> wrote:
Thanx, I will try this..

Is there also a way of handeling if the file does not excist...?

or to be exact:

My filenames consist of 2 or 4 characters. If a button loads the picture
2341.jpg and that image does not excist at the moment, I want 2300.jpg to be
loaded. And if 4356.jpg does not excist, I want to load 4300.jpg. ( The
first two bytes of the name + 00 )

--
Best Regards,

BN - [E A Rosengrens AS]
"Michael Winter" <M.******@bluey onder.co.invali d> skrev i melding
news:op******* *******@news-text.blueyonder .co.uk...
On Sat, 17 Jan 2004 16:37:14 GMT, BN <tn******@enter .vg> wrote:
> Is it possible to load and show a JPG file using Javascript...?
>
> I have a HTML document, and want to load a new image when the user
> pushes a button.


Do you mean you want to change the source (src attribute) of an existing
IMG element when a user presses a button? If so, then yes, it can be done
as long as you accept the fact that a user with JavaScript disabled cannot
use this feature in your page.

Place this somewhere before the button below (HEAD or BODY):

<SCRIPT type="text/javascript">
function changeImage( element, URI ) {
var img = null;

if( document.getEle mentById ) {
img = document.getEle mentById( element );
} else if( document.all ) {
img = document.all[ element ];
}
if( img ) {
img.src = URI;
}
}
</SCRIPT>

In the BODY of your document:

<IMG id="giveMeAUniq ueID" src="initialIma ge.jpg">
...
<BUTTON type="button"
onclick="change Image('giveMeAU niqueID','newIm age.jpg')"
>Change image</BUTTON>


replacing the two filenames and the ID name with your own values.

This will only allow the image to be changed once. Cycling between two or
more images, in sequential or random order, is equally possible, but as
you didn't ask for it, you're not getting it[1]. :P

Mike
[1] Obviously, ask if you do need such a feature.

--
Michael Winter
M.******@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)



I participate in the group to help give examples of code. I do not guarantee the effects of any code posted. Test all code before use!

Brynn
www.coolpier.com
Jul 20 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2535
by: jdi | last post by:
Hello, I have a seemingly basic question about ASP.NET. I would like to create a page containing an image, which keeps swapping the url of the image source, without refreshing the entire page. So when the page first loads I'd like the image url to be "img1.gif"; then 20 seconds later "img2.gif"; then "img3.gif", and so on. All this should take place dynamically without refreshing the page. Any help would be appreciated.
0
1315
by: Jeronimo Bertran | last post by:
Hi, I have a page that includes an image that uses an image map. When the user clicks on a button, the image needs to be refreshed and the map needs to be updated without refreshing the entire form. <img id="mapimage" src="renderimage.aspx?param=1" usemap="#mappoints"> <map name ="mappoints> <area......> </map>
6
2559
by: Ivan Bútora | last post by:
I have recently looked at http://alistapart.com/articles/imagegallery to implement a simple picture gallery on a webpage that I'm working on. Everything works fine; however, I have one question. When I click on a thumbnail, a JavaScript function is executed to change the picture in the main view. Since some of these images are around 300KB, it takes up to a couple of seconds to load the image. In Internet Explorer, one can see the image...
6
6437
by: Mark Denardo | last post by:
My question is similar to one someone posted a few months back, but I don't see any replies. Basically I want to be able to have users upload photos and save them in a database (as byte data) and be able to load them to an image webcontrol, but system.web.ui.webcontrols.image only seems to have a control to load the image from a URL. There's no way to load this directly without saving the image as a file and then using...
10
13396
by: eholz1 | last post by:
Hello Members, I am setting up a photo website. I have decided to use PHP and MySQL. I can load jpeg files into the table (medium blob, or even longtext) and get the image(s) to display without a problem. I am using chunk_split(data) and the base64_encode and base64_decode on the files. I do a select from the database, and then echo the image (with header(Content Type: image/jpeg) and the decoded image displays fine. Yes, I have...
0
1702
by: AndySummers | last post by:
Hi We have just re-written a majour asp.net project to use a user control embedded in a web page. The main dll references 3 other custom controls and so to deploy the project I copy the 4 dll's to the server and the web page loads the control via the <object> tag. I have also added a iexplore.exe.config file (because of another thread) where I specify that .net v1.1 should be used. (The controls have been developed in VS2003) I have also...
1
2376
by: pdesai007 | last post by:
hello, i tried to upload an image in to server with asp and java script ( using AJAX) but it gave an error. so please give me any solution that help me to upload an image to server with java script and whithot refreshing of my page. thank you
3
1702
by: hegdepras | last post by:
Hi, I need to load only the image in a JSP without refreshing the entire page. I have an action class which sends the stream of the image and I call this action class from 'src' of <img> tag in JSP. I have two links, next and previous. Clicking on them should fetch a different image and replace the current image. Currently I'm making a fresh request and loading the entire page afresh. But I don't want to refresh the entire page but only...
6
2234
by: mistral | last post by:
Is there way change image (swap) on click on thumbnail without javascript? I.e. main image is big(preview), and below it is two small images - when click on small image, it should change big image. All on one page, without opening new windows.
0
7934
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
7870
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8236
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8362
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
7992
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8225
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
6639
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
5732
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5400
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.