SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
-
Jan 24, 2007, 10:49 #1
Load a image with ajax or javascript
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).
-
Jan 24, 2007, 11:09 #2
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just change the src attribute of the image. No need for ajax.
Birnam wood is come to Dunsinane
-
Jan 24, 2007, 11:46 #3
- Join Date
- Aug 2006
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
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>
Last edited by muazzez; Jan 24, 2007 at 23:00.
-
Jan 25, 2007, 12:39 #4
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.
-
Jan 25, 2007, 13:15 #5
- Join Date
- Aug 2006
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
Last edited by muazzez; Jan 25, 2007 at 13:50. Reason: delete </img>
-
Jan 25, 2007, 13:25 #6
- Join Date
- Jan 2007
- Location
- Cologne, Germany
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Jan 25, 2007, 13:41 #7
- Join Date
- Dec 2006
- Posts
- 182
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Jan 25, 2007, 14:24 #8
- Join Date
- Mar 2001
- Posts
- 3,537
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just change the src attribute of the image. No need for ajax.
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!
-
Jan 26, 2007, 00:43 #9
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
LOL
Watch out, or your new username will be 7toad ...Birnam wood is come to Dunsinane
Bookmarks