Shoutbox

Refresh Image Button Needed (refreshes image only, not whole page) [fixed] - Printable Version

-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: Refresh Image Button Needed (refreshes image only, not whole page) [fixed] (/showthread.php?tid=73812)
Refresh Image Button Needed (refreshes image only, not whole page) [fixed] by prashker on 04-21-2007 at 06:39 PM

Right now I have code that when you refresh the page it changes the image automatically that is displayed.

Thing is I dont really like that as it restarts the music playing in the backround.

So,

How would I create a button, that when you click it, it automatically reloads the image without refreshing the whole page, just the image part of it.

quote:
Nathan says:
it will probs use a cookie to track that they've enabled this, he also thinks you will have to use ajax.

Help (a)?
RE: Refresh Image Button Needed (refreshes image only, not whole page) by MeEtc on 04-21-2007 at 06:52 PM

if the image is an <img> tag, something like this might work:

code:
<input onclick="getimage()">

<script>
function getimage() {
   document.getElementById(picture id name).src = 'path to random image generator php file'
}
</script>

If its a css background image, use something like this:
code:
<script>
function getimage() {
   document.getElementById(picture id name).className = 'path to random image php file'
}
</script>

<script>
function getimage() {
   document.body.style.backgroundImage = 'url(path to random image php file)'
}
</script>

RE: Refresh Image Button Needed (refreshes image only, not whole page) by Nathan on 04-21-2007 at 06:56 PM

It is infact in the body tag: using a style.

RE: Refresh Image Button Needed (refreshes image only, not whole page) by MeEtc on 04-21-2007 at 06:57 PM

body? ok, ill edit the script

EDIT: no, that doesn't quite work yet

RE: Refresh Image Button Needed (refreshes image only, not whole page) by Nathan on 04-21-2007 at 07:03 PM

ah, yyou dont get sonicsam, he wants it to automatically update like a slideshow.

RE: Refresh Image Button Needed (refreshes image only, not whole page) by prashker on 04-21-2007 at 07:05 PM

quote:
Originally posted by Nathan
ah, yyou dont get sonicsam, he wants it to automatically update like a slideshow.

Ok let me say it again :p.

When you click a button like "Refresh this Image" it refreshes the image without reloading the whole page :p.

RE: Refresh Image Button Needed (refreshes image only, not whole page) by MeEtc on 04-21-2007 at 07:05 PM

no, he says:

quote:
Originally posted by SonicSam
How would I create a button, that when you click it, it automatically reloads the image

if you want a slideshow, all you need to do is add the getimage() to the body onload and add a timer
RE: Refresh Image Button Needed (refreshes image only, not whole page) by vaccination on 04-21-2007 at 07:06 PM

=s

He just wants a button that when you click reloads the php file - well that's my understanding anyway.

RE: Refresh Image Button Needed (refreshes image only, not whole page) by prashker on 04-21-2007 at 07:07 PM

quote:
Originally posted by MeEtc

if you want a slideshow, all you need to do is add the getimage() to the body onload and add a timer

Nononono.

quote:
Originally posted by vaccination
=s

He just wants a button that when you click reloads the php file - well that's my understanding anyway.

(y). Basically.



So let me explain it 1 more time.

http://jesuswasajew.info/

See it plays music and shows a random image?

When you refresh the page, the image changes, but the music restarts, because the whole page was refreshed.

I want a button, that when you click it, changes ONLY the image, and does not refresh the whole page.

Ok :p?
RE: Refresh Image Button Needed (refreshes image only, not whole page) by andrewdodd13 on 04-21-2007 at 07:37 PM

You could always use... *cough* frames *cough*. :P

RE: Refresh Image Button Needed (refreshes image only, not whole page) by MeEtc on 04-21-2007 at 07:37 PM

frames are evil

RE: Refresh Image Button Needed (refreshes image only, not whole page) by prashker on 04-21-2007 at 07:38 PM

quote:
Originally posted by andrewdodd13
You could always use... *cough* frames *cough*. :P

Yes I know I could, but I dont want to :p.
RE: Refresh Image Button Needed (refreshes image only, not whole page) by andrewdodd13 on 04-21-2007 at 07:45 PM

Okay okay, you're going to want to use code similar to what MeEtc posted, but there's a bit of a problem see:

<body style="backgroundImage = 'url(image.jpg)'">

For that to work properly, you'd need to supply the page with a list of images, or supply a way of using AJAX to retrieve the location of another image.

It'd be simpler to have a file image.php which gives you the random image. So it'd be backgroundImage = 'url(image.php)'. And image.php would be like

code:
// generate location to random image
header ("Location: <pathtorandomimage>");
.

Then, you'd have (wherever you wanted the refresh button to go):
<input type="submit" onClick="getimage(); return 0;" /> and use MeEtc's script to get image.php again.
RE: Refresh Image Button Needed (refreshes image only, not whole page) by vaccination on 04-21-2007 at 07:48 PM

He already has an 'image.php'

RE: Refresh Image Button Needed (refreshes image only, not whole page) by andrewdodd13 on 04-21-2007 at 07:52 PM

No he doesn't... I know he already has a script which generates the random image (which is why I didn't provide code for that), but if you read my post slowly (which you might needa do, I tend to waffle :P) it's because if you check the source for the page the actual URL to the image is sent to the browser, which would need to be changed somehow - the simplest way being AJAX, of course.

If you want a full AJAX implementation, I'm sure I could rustle up code for that.

RE: Refresh Image Button Needed (refreshes image only, not whole page) by MeEtc on 04-21-2007 at 07:59 PM

my script above works fine, except that it loads the specified image from the cache, instead of re-downloading it. looks like you're gonna need to XMLHTTPRequest it

RE: Refresh Image Button Needed (refreshes image only, not whole page) by vaccination on 04-21-2007 at 08:07 PM

quote:
Originally posted by andrewdodd13
No he doesn't... I know he already has a script which generates the random image (which is why I didn't provide code for that), but if you read my post slowly (which you might needa do, I tend to waffle :P) it's because if you check the source for the page the actual URL to the image is sent to the browser, which would need to be changed somehow - the simplest way being AJAX, of course.

If you want a full AJAX implementation, I'm sure I could rustle up code for that.

Blah my bad. Dodgy sam, I thought he had an 'image.php' type file :P
RE: Refresh Image Button Needed (refreshes image only, not whole page) by prashker on 04-21-2007 at 08:12 PM

quote:
Originally posted by vaccination
He already has an 'image.php'

I used too, now I am using some Nathan code to do it :p. (Because it had to be changed for the MySql Entries and Admin Panel =p.

./James/. says:
why'd you change? :P
SonicSam - New Account says:
Because
SonicSam - New Account says:
when I got the Ubercool Admin panel
SonicSam - New Account says:
all the uploaded images are now added to a MySql Database :P
./James/. says:
ohhh ::
SonicSam - New Account says:
which then I 'approve' or 'decline'
./James/. says:
:P*
SonicSam - New Account says:
which then decides which ones are shown :P
SonicSam - New Account says:
if it was just a php file, all of them would be shown
quote:
Originally posted by andrewdodd13
If you want a full AJAX implementation, I'm sure I could rustle up code for that.

Um, can you (a)?

quote:
Originally posted by MeEtc
my script above works fine, except that it loads the specified image from the cache, instead of re-downloading it. looks like you're gonna need to XMLHTTPRequest it

Meaning :p?
RE: RE: Refresh Image Button Needed (refreshes image only, not whole page) by andrewdodd13 on 04-21-2007 at 08:52 PM

quote:
Originally posted by SonicSam
quote:
Originally posted by MeEtc
my script above works fine, except that it loads the specified image from the cache, instead of re-downloading it. looks like you're gonna need to XMLHTTPRequest it

Meaning :p?
XMLHTTPRequest is the object used by most browsers (except IE6 and below) to initialize an AJAX session. It rocks.

I've included code in the file I sent you which works with all browsers..
RE: Refresh Image Button Needed (refreshes image only, not whole page) by prashker on 04-21-2007 at 08:55 PM

quote:
Originally posted by andrewdodd13
I've included code in the file I sent you which works with all browsers..

:D.

Thanks :D.

I got the button added and it works perfectly with Jesuswasajew.info :D.

Now it is a little better having the music flow when showing another image.

Thanks Andrew :). Reputation+1 :o.