Load a image with ajax or javascript

**XandroZ** · Jan 24, 2007, 09:49

I want to load a image in a <div> and replace the image that is inside the <div> element when someone click his thumb(image).
I try to use Ajax but in Ajax you can only load text or XML.
I want only to load the image when a user click his thumb not all the page(like in php).

**AutisticCuckoo** · Jan 24, 2007, 10:09

Just change the src attribute of the image. No need for ajax.

**muazzez** · Jan 24, 2007, 10:46

Code:

  
<html>
<head>
<script type=text/javascript>

var t=0;
var arr = new Array("resim0.bmp","resim1.bmp","resim2.bmp","resim3.bmp");
 
function next (){

var div1 = document.getElementById('div1');

div1.innerHTML='<img width="100" height="100" src=" '+arr[t] + ' " onclick="next ()">'

t++
// arr.length = 4
if (t== 4){t=0}

}


</script>

<body onload="next ()">
 
<div id="div1"></div>

</body>
</html>

I want to write it with replaceChild()

Code:

<html><head>
</head>

<script type=text/javascript>

var t=0;
var arr = new Array("resim0.bmp","resim1.bmp","resim2.bmp","resim3.bmp");
 
window.onload = function next (){

var div1 = document.getElementById('div1');
var img = document.createElement('img');
img.src = arr[t];
img.onclick = function () { next ();}
div1.replaceChild(img,div1.childNodes[0]) ;

t++

if (t== 4){t=0}

}

</script>

<body>
 
<div id="div1">&nbps;</div>

</body>
</html>

**XandroZ** · Jan 25, 2007, 11:39

thx very much but I will show you in the image what i realy want

What I want; when click the thumb1(the small aquare),thumb2,(can click thumb random not in order)... to change the image in div1.
Also when click previous or next change the image in div1 but this time in order.

**muazzez** · Jan 25, 2007, 12:15

Code:

  
<script type="text/javascript">

function show (what) {

var div = document.getElementById('div');
div.innerHTML = '<center><img src=\" '+what+ '\" width=\"200px\" height=\"300px\"></center> ' ;

}
</script>
</head>
<body>
<div id ="div"><center><img src="resim0.bmp" width="200" height="300" ></center> </div>

<div id ="div2">
<img src="resim1.bmp" width="100" height="100" onclick="show ('resim1.bmp')"> 
<img src="resim2.bmp" width="100" height="100" onclick="show ('resim2.bmp')"> 
<img src="resim3.bmp" width="100" height="100" onclick="show ('resim3.bmp')"> 

</div>

**raimund** · Jan 25, 2007, 12:25

No need to change the whole div here

Code:

<script type="text/javascript">

function showFullView (newSrc) {

var img = document.getElementById('fullView');
img.src = newSrc;

}
</script>
</head>
<body>
<div><img src="initial.jpg" width="200" height="300" id="fullView"></img></div>

<div id="thumbs">
<img src="pic1_thumb.jpg" width="100" height="100" onclick="showFullView('pic1.jpg')"></img> 
<img src="pic2_thumb.jpg" width="100" height="100" onclick="showFullView('pic2.jpg')"></img> 
<img src="pic3_thumb.jpg" width="100" height="100" onclick="showFullView('pic3.jpg')"></img> 

</div>

**funkdaddy** · Jan 25, 2007, 12:41

FYI, </img> is completely invalid, <img> is a self-closing tag.

While we're at it, let's make it unobtrusive and so it works with no JS:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<script type="text/javascript"><!--
function showFullView(newSrc) {
	var img = document.getElementById("fullView");
	img.src = newSrc;
}

window.onload = function() {
	var imgLinks = document.getElementById("thumbs").getElementsByTagName("a");
	for (i=0; i<imgLinks.length; i++) {
		imgLinks[i].onclick = function() {
			showFullView(this.href);
			return false;
		}
	}
}
//-->
</script>	</head>

	<body>
<div><img src="initial.jpg" width="200" height="300" id="fullView"></img></div>

<div id="thumbs">
<a href="pic1_large.jpg"><img src="pic1_thumb.jpg" width="100" height="100"></a>
<a href="pic2_large.jpg"><img src="pic2_thumb.jpg" width="100" height="100"></a>
<a href="pic3_large.jpg"><img src="pic3_thumb.jpg" width="100" height="100"></a>

</div>
</body>

</html>

**7stud** · Jan 25, 2007, 13:24

Just change the src attribute of the image. No need for ajax.

You are a heretic. Burn the witch!

AC: I'm not a witch.

gathering: See! AC denies it. A sure sign of a witch.

AC: Ok, I am a witch.

gathering: See! AC, admits it. Burn the witch!

**AutisticCuckoo** · Jan 25, 2007, 23:43

LOL

Watch out, or your new username will be 7toad ...

The SitePoint Forums have moved.

User Tag List

Thread: Load a image with ajax or javascript

Thread Tools

Display

Load a image with ajax or javascript

Bookmarks

Bookmarks

Posting Permissions