SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot XandroZ's Avatar
    Join Date
    May 2006
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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).

  2. #2
    SitePoint Author silver trophybronze trophy

    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

  3. #3
    SitePoint Addict
    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>
    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>
    Last edited by muazzez; Jan 24, 2007 at 22:00.

  4. #4
    SitePoint Zealot XandroZ's Avatar
    Join Date
    May 2006
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Addict
    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 12:50. Reason: delete </img>

  6. #6
    SitePoint Member
    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>

  7. #7
    SitePoint Zealot
    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>

  8. #8
    SitePoint Wizard
    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.
    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!

  9. #9
    SitePoint Author silver trophybronze trophy

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •