在鼠标悬停文字上通过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加载图像

回答

相关问题