在鼠標懸停文字上通過Ajax加載圖像

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

嗨，我正在爲我的web項目使用ASP。但是當我嘗試將鼠標懸停在描述該圖像的文本上時將圖像加載到目標分區時，我遇到了問題。持有文本的部門位於左側（描述加載圖像）右側是目標部門。在鼠標懸停文字上通過Ajax加載圖像

一切都很好，當我用它來裝載從.txt文件中的文本，但是當我試圖修改相同的代碼在同一個部門加載文本的圖像，而不是

我的代碼的問題開始如上

來源

2012-01-01 Vivek S Bhujbal

請標記幫助您解決問題的答案，作爲接受的答案。 :) – 2012-01-04 05:35:51

如果圖像文件是存儲在文件系統上的物理文件，那麼XMLHttpRequest可能不是一個好主意來加載圖像。

我建議在你的javascript代碼中你可以創建一個圖像並將src設置爲圖像路徑。這會加載它，你的圖像onload例程也可以運行。此外，你會得到瀏覽器緩存圖像的好處。

如果您的圖像作爲BLOB存儲在某個地方並且您需要某種機制來檢索它，那麼使用XMLHttpRequest是有意義的。在這種情況下請看這個鏈接。

Handling images from XMLHttpRequest (with HTML and Javascript)

希望這會有所幫助。

EDIT 1（響應於評論）：可以具有用於經由JavaScript.that方式的圖像可以通過一個單獨的函數來處理，同時通過XHR動態數據可以被分開處理設定的圖像的單獨的方法。

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

和onmouseover="getImage('Image/1.jpg','targetDiv')

調用此請注意，這是純粹的JavaScript代碼。您總是可以使用JQuery庫（如JQuery）在很少的幾行代碼中完成相同的工作。

來源

2012-01-02 05:52:15

嗨Pankaj，感謝您的指導，現在我明白，xmlhttprequest將服務更好時，它是一個請求發送到第三方服務器。我曾嘗試過你告訴我的方法，說改變src的img標籤，但有一個問題，不幸的是，我是新來的AJAX和自己學習因此，我不明白hw通過javascript來改變給定div中的src標籤。我的意思是獲取div的id值，獲取img標籤，並且主要將更改應用於src標籤。我的意思是我是這個東西的新手。因此，如果您可以請詳細說明代碼。 – 2012-01-02 07:32:18

@VivekSBhujbal：查看編輯 – 2012-01-02 09:51:33

非常感謝Pankaj。我將包括你給我的代碼，N告訴它的結果。 Thankyou非常確實.... :)：D – 2012-01-02 13:14:46

在鼠標懸停文字上通過Ajax加載圖像

回答

相關問題