# Using AJAX to refresh images



## Merzbow (Dec 16, 2007)

Hey there.

So I'm working on a project for class but I've hit a block.

Essentially what I want to do is reload the main image on my page, without refreshing the entire page.
See, the plan is to have a music player going and while, reloading the page every time to view all 12 images of my friends art portfolio will just kill the whole music aspect which should really add the whole site. This'll also cut down how many pages I have to make from like 14 to 3.

Now, my sister pointed me towards AJAX, but my class is just super-basic html **** so I don't really know what's going on with well... any of it.

Now, don't get me wrong. It is for class and I don't want someone to just do it for me. But, if anyone can take some time and explain to me how I'd go about this, than thanks. 


Also, here's my page since I can only attach 2 things. Attached are the images that need to swap when clicked.

<html>
<head>
<title></title>
<style type="text/css">

ul { float:left; top:344px; position:relative; margin-right:5%; list-style-

type:none; }

</style>
</head>

<body bgcolor="#00033">
<h1>
<!-- Also, this is going to be an image with the title of the work. It also needs to refresh when the image is clicked -->
<span style="color:white"><center>The Art</span></center></h1>

<ul>
<li><a href="shawnesite2.html"><img src="portfolio.jpg" alt="portfolio" /></a></li>
<li><a href="shawnesite3.html"><img src="about.jpg" alt="about" /></a></li>
</ul>

<!-- I need "M" to refresh to "pc2" upon clicking it. -->

<img src="M.jpg" alt="Opening Image" />

</body>
</html>


----------



## jamiemac2005 (Jul 5, 2007)

Hey, you don't even need AJAX to do this, regular Javascript will do...

http://www.javascriptkit.com/howto/show.shtml <the tutorial there will step through how you go about it, if it's not to your liking then google "javascript slideshow" or "javascript image swap".

Cheers,
Jamey


----------



## Merzbow (Dec 16, 2007)

My sister just mentioned AJAX could do it, so that's what I was looking into.

I'll definately check this out today though.

Thanks a lot.


----------



## Merzbow (Dec 16, 2007)

I couldn't find the edit button, sorry for double posting.

I was using that tutorial to make the slideshow but it won't change slides.
Any idea what's wrong with the code?

<html>
<head>
<title></title>
<style type="text/css">
<script type="text/javascript">
<!--
var image 1=new Image( )
image1 .src="M.jpg"
var image 2=new Image ( )
image .src="artpeice3.jpg"
var image 3=new Image ( )
image .src="pc2.jpg"
var image 4=new Image ( )
image .src="pc4.jpg"
var image 5=new Image ( )
image .src="pc6.jpg"
var image 6=new Image ( )
image .src="pc7.jpg"
var image 7=new Image ( )
image .src="pc9.jpg"
var image 8=new ( )
image .src="pc12.jpg"
var image 9=new ( )
image .src="pc13.jpg"
var image 10=new ( )
image .src="pc14.jpg"
//-->
</script>

ul { float:left; top:344px; position:relative; margin-right:5%; list-style-type:none; }

</style>
</head>

<body bgcolor="#00033">
<h1><span style="color:white"><center>The Art</span></center></h1>

<ul>
<li><a href="shawnesite2.html"><img src="portfolio.jpg" alt="portfolio" /></a></li>
<li><a href="shawnesite3.html"><img src="about.jpg" alt="about" /></a></li>
</ul>
<img src="M.jpg" name="slide1" width=600 height=650>
<script type="text/javascript">
<!--
var step=1
function slideit () {
if (!document.images)
return
document.images.slide.src=eval ("image"+step".src")
if (step<3)
step++
else step=1
settimeout ("slideit () " ,2500
}
slideit ( )
//-->
</script>

</body>
</html>


----------



## jamiemac2005 (Jul 5, 2007)

Hey, there were a few basic syntax problems (pretty regular when you're new to Javascript). I've fixed them up for you, things to look out for are; spaces in variable names and closing open brackets/quotes. Apart from that it was fine.


```
<html>
<head>
<title></title>

<script type="text/javascript">
<!--
var image1=new Image();
image1.src="M.jpg";
var image2=new Image();
image2.src="artpeice3.jpg";
var image3=new Image();
image3.src="pc2.jpg";
var image4=new Image();
image4.src="pc4.jpg";
var image5=new Image();
image5.src="pc6.jpg";
var image6=new Image();
image6.src="pc7.jpg";
var image7=new Image();
image7.src="pc9.jpg";
var image8=new Image();
image8.src="pc12.jpg";
var image9=new Image();
image9.src="pc13.jpg";
var image10=new Image();
image10.src="pc14.jpg";
//-->
</script>
<style type="text/css">
ul { float:left; top:344px; position:relative; margin-right:5%; list-style-type:none; }

</style>
</head>

<body bgcolor="#00033">
<h1><span style="color:white"><center>The Art</span></center></h1>

<ul>
<li><a href="shawnesite2.html"><img src="portfolio.jpg" alt="portfolio" /></a></li>
<li><a href="shawnesite3.html"><img src="about.jpg" alt="about" /></a></li>
</ul>
<img src="M.jpg" name="slide1" width="600" height="650">
<script type="text/javascript">
<!--
var step=1;
function slideit() {
if (!document.images){
	return;
	}
	document.images.slide1.src=eval("image"+step+".src");
	if (step<10)
		step++;
	else step=1;
}
setTimeout("slideit()", 2500);
slideit();
//-->
</script>
</body>
</html>
```
Cheers,
Jamey


----------



## Merzbow (Dec 16, 2007)

Thanks a lot man.
I see all the brackets and things comparing the two.
That tutorial didn't mention anything about brackets, haha.

Hey, I found the edit button. 
Okay, so I took that script and saved it in it's own little file to see what it'd do. It keeps stopping after changing to the second pic. Why would it do that? o-O

I keep looking at the javascript but it means little to me. If I understand what it's saying it looks right, but it stops.

Anyway, I'll try hitting up google to see if I can turn anything up on this after work.


----------

