Loading an Image through Ajax on mouseover text

Question

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Services</title>
  <link rel="shortcut icon" 
        type="image/x-icon" href="css/images/favicon.ico" />
  <script language="javascript">
  var XMLHTTPRequestObj=false;
  if(window.XMLHttpRequest)
  {
    XMLHttpRequestObj=new XMLHttpRequest();
  }
  else if(window.ActiveXObject)
  {
    XMLHttpRequestObj=new ActiveObject("Microsoft.XMLHTTP");
  }

  function getData(dataSource, divID)
  {
    if(XMLHttpRequestObj)
    {
      var obj=document.getElementById(divID);
      XMLHttpRequestObj.open("GET", dataSource);
      XMLHttpRequestObj.onreadystatechange = function() {
        if(XMLHttpRequestObj.readyState == 4 &&   
           XMLHttpRequestObj.status == 200) {

          alert("Inside the ready status "+dataSource);
          if(dataSource=="ajaximport/1.jpg") {
            alert("The if loop is working");  
            document.getElementById(
            "targetDiv").innerHTML = 
            XMLHttpRequestObj.responseText;
            var img = document.createElement('img');
            alert("Variable img Recorded "+img);
            img.onload = function (e){
              alert("Loading Image");
              document.getElementById(
              "imgHolder").width=this.width;
              document.getElementById(
              "imgHolder").height=this.height;
              document.getElementById(
              "imgHolder").src=this.src;
            }
            img.onerror = function(e){
              alert("Error processing Image.  Please try again."+e);
            }
            img.src = XMLHttpRequestObj.responseImage;
          }
          else
            obj.innerHTML=XMLHttpRequestObj.responseText;
        }
      }
      XMLHttpRequestObj.send(null);
    }
  }
  </script>
  <!--[if IE 6]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
  <![endif]-->
    </head>
    <body>
  <!-- Content -->
  <div id="content">
    <!-- Shell -->
    <div class="shell">
    <h2>We at Creative bits 5 are plegded to serve you our best in.......</h2>
      <table>
      <th>
      <div id="hold_left">
        <ul>
            <li><label>
            <a href="#" onmouseover="getData('ajaximport/1.jpg','targetDiv')">
            Graphic   Designing
            </a></label></li><br>
            <li><label>
            <a href="#" onmouseover="getData('text1.txt','targetDiv')">
            Web Devlopment
            </a></label></li><br>
            <li><label>
            <a href="#" onmouseover="getData('text1.txt','targetDiv')">
            Logo Designing
            </a></label></li><br>
            <li><label>
            <a href="#" onmouseover="getData('text1.txt','targetDiv')">
            3D Walk-Through
            </a></label></li><br>
            <li><label>
            <a href="#" onmouseover="getData('text1.txt','targetDiv')">
            3D Modelling
            </a></label></li><br>
            <li><label>
            <a href="#" onmouseover="getData('text1.txt','targetDiv')">
            2D Presentations
            </a></label></li><br>
      </ul>
    </div>
    </th>
    <th>
    <div id="targetDiv">
          This is target
      <img id="imgHolder" src="" alt="This is where image will load" />
      </div>
      </th>
      </table>
    </div>
    <!-- end Shell -->
  </div>
  <!-- end Content -->
    </body>
    </html>

Hi I am Using ASP for my web project. but I got stuck with a problem when I tried loading an image into a target division when a mouse is hovered over a text describing that image. The division holding the text is on the left side (which describes the loading image) On the right side is the Target division.

All is fine when I used it to load a text from a .txt file but The problem started when I tried modifying the same code for loading an image in the same division instead of the text

My code is as above

please mark the answer that helped you to solve the problem as the accepted answer. :) — Pankaj Kumar, Jan 04 '12 at 05:35

score 0 · Accepted Answer · edited May 23 '17 at 12:12

If the image file is a physical file stored on the filesystem then XMLHttpRequest may not be such a good idea to load the image.

I would suggest that in your javascript code you can create an image and set the src to the image path. that would load it and your image onload routines can also run. furthermore, you would get the benefit of browser caching of the image.

It would have made sense to use XMLHttpRequest in case your image was stored as a BLOB somewhere and you need some mechanism to retrieve it. in that case have a look at this link.

Handling images from XMLHttpRequest (with HTML and Javascript)

hope this helps.

EDIT 1(in response to comment): You can have a separate method for setting images via JavaScript.that way the images can be handled by a separate function while dynamic data through XHR can be handled separately.

<script language="javascript">
        var XMLHTTPRequestObj = false;
        if (window.XMLHttpRequest) {
            XMLHttpRequestObj = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            XMLHttpRequestObj = new ActiveObject("Microsoft.XMLHTTP");
        }

        function getData(dataSource, divID) {

            if (XMLHttpRequestObj) {
                var targetDIV = document.getElementById(divID);

                XMLHttpRequestObj.open("GET", dataSource);
                XMLHttpRequestObj.onreadystatechange = function () {
                    if (XMLHttpRequestObj.readyState == 4 &&
           XMLHttpRequestObj.status == 200) 
                    {

                        targetDIV.innerHTML = XMLHttpRequestObj.responseText;
                    }
                }
                XMLHttpRequestObj.send(null);
            }
        }
        function getImage(dataSource, divID) {
            //create image element
            var img = document.createElement('img');
            //assuming divID has the target div id
            img.onload = function (e) {
                alert("Loading Image");
                document.getElementById(
              divID).width = this.width;
                document.getElementById(
              divID).height = this.height;
            }
            img.onerror = function (e) {
                alert("Error processing Image.  Please try again." + e);
            }
            //set the path here
            img.src = dataSource;
            var targetDIV = document.getElementById(divID);
            //clear contents of target div
            if (targetDIV.hasChildNodes()) {
                while (targetDIV.childNodes.length >= 1) {
                    targetDIV.removeChild(targetDIV.firstChild);
                }
            }
            //finally add the image as a child control to the div.
            targetDIV.appendChild(img);
        }
    </script>

and call this by onmouseover="getImage('Image/1.jpg','targetDiv')

please note that this is pure javascript code. you can always use a JS library such as JQuery to do the same work in very few lines of code.

Hi Pankaj,Thanks for your guidance,Now I understood that xmlhttprequest would serve better when it is a request sent to a thrid party server.I had tried the method you told me,the one which said of changing the src of the img tag, but there is a problem, unfortunately that I am new to AJAX and learning on my own Hence I dont understand hw to change the src tag in a given div through javascript.I mean getting the id value of the div, fetching the img tag from it and MAINLY applying the changes to the src tag.Sorry I mean I am a novice to this stuff.So if you could please elaborate the code too. — Vivek S Bhujbal, Jan 02 '12 at 07:32
Thankyou very much Pankaj. I'll include the code you gave me, N tell about its result. Thankyou very much indeed.... :) :D — Vivek S Bhujbal, Jan 02 '12 at 13:14
The code you gave me worked fully now the image directly opens in the targetDIV..... Great work!!! :) — Vivek S Bhujbal, Jan 05 '12 at 13:13
Could you just tell me that is it possible to display a loading.gif whilst loading the image... if possible how??? I found it for jquery but that wont work for me isn't it?? :) — Vivek S Bhujbal, Jan 05 '12 at 13:45
it will work. you can get a jquery object for your image simply by doing $(img) since "img" is the name of the element you created in GetImage function. and have a look at this link http://stackoverflow.com/a/4635517/168371 — Pankaj Kumar, Jan 06 '12 at 06:28

Loading an Image through Ajax on mouseover text

1 Answers1