Home/ Questions/Q 8582435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T21:17:32+00:00

I have been trying to change a image in a webpage using jquery and

  • 0

I have been trying to change a image in a webpage using jquery and httprequest, without any luck… after research a lot I decide to ask for help.
The code is pasted bellow and I first try to ask for the json (what works fine) and then update the scr on the image… didn’t work.
For a final test I use a mouseover and mouse out function and didn’t work as well, funny thing is that other property like, show and hide works fine, the only problem is with the attr('scr','').

Thanks

<!DOCTYPE html>
<html>
<head>
<script src="..\js\jQuery.js"></script>
<script>
  $.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php", 
  {plantSelected:"ARGYRANTHEMUM-POLLY"},
  function(data){
    $('#a1').attr('scr','data:image/jpg;base64,'+data.plantDetail.Image);
  });
  $(document).ready(function() {
    $('#a1').mouseover(function(e) {
      $('#a1'.attr('scr','http://www.containernurseries.co.nz/images/services.gif');
    }).mouseout(function(e) {
      $('#a1').attr('scr','http://www.containernurseries.co.nz/images/services.gif');
    });
  });
</script>
</head>

<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>


</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are several problems I found and wrestled with, but finally got some working code:

    <!DOCTYPE html>
<html>
<head>
</head>

<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    $.getJSON("http://ip.jsontest.com", null,
            function (data) {
                console.log(data)
            });
    $(document).ready(function () {
        ($('#a1')).mouseover(function (e) {
            ($('#a1').attr('src', 'http://www.containernurseries.co.nz/images/services.gif'));
        }).mouseout(function (e) {
                    ($('#a1')).attr('src', 'http://www.containernurseries.co.nz/images/contacticon.gif');
                });
    });
</script>
</body>
</html>

    You can see it work here:

    http://www.sanbarcomputing.com/flat/forumPosts/imgSrcType/imgSrcTypeNoComments.html

    This code uses a service called “JSONTest” to get properly formatted JSON code. This returns an object (data) of key/value {ip: “xxx.xxx.xxx.xxx”} which shows your ip address. Here is the services website that I use to get the JSON response:

    http://teamaqua.github.com/JSONTest/

    To see the console log output, just open a console in your browser (hit the F12 key, for instance, or open the FireBug plugin for FireFox. Drill down into the object to see the key/value pair properly formatted in the console.

    I fixed your code with the scr->src typo fix and some other things needing fixing:

    <!DOCTYPE html>
<html>
<head>
</head>

<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    $.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php",
            {plantSelected:"ARGYRANTHEMUM-POLLY"},
            function (data) {
                ($('#a1')).attr('src', 'data:image/jpg;base64,' + data.plantDetail.Image);
            });
    $(document).ready(function () {
        ($('#a1')).mouseover(function (e) {
            ($('#a1').attr('src', 'http://www.containernurseries.co.nz/images/services.gif'));
        }).mouseout(function (e) {
                    ($('#a1')).attr('src', 'http://www.containernurseries.co.nz/images/contacticon.gif');
                });
    });
</script>
</body>
</html>

    You can see it (possibly) fail here:

    http://www.sanbarcomputing.com/flat/forumPosts/imgSrcType/imgSrcType.html

    I get a cross-domain error in Chrome, and it seems to fail silently in IE and FireFox:

    XMLHttpRequest cannot load
    http://www.containernurseries.co.nz/json/jsonPlantDetails.php?plantSelected=ARGYRANTHEMUM-POLLY.
    Origin http://www.sanbarcomputing.com is not allowed by
    Access-Control-Allow-Origin.

    Here is a good post that talks about one way to fix this (changing it to JSONP), but since your server returns JSON, not JSONP, it does not work either (I tried):

    stackoverflow: access-control-allow-origin-not-allowed-by

    You would need to return the result in the form of a JSONP JavaScript executable function from the server, I believe. To get a JSONP request sent, you would change this line:

    $.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php",

    To this:

    $.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php?callback=?",

    jQuery then would automatically produce a JSONP request for you. It works, but since the result is not executable JavaScript, you get the following error in Chrome:

    Uncaught SyntaxError: Unexpected token :

    Since I think Chrome is trying to execute the JSON as a function, which it is not.

    Changes need to be made to the server, I believe, to get this working cross-domain, if you need that.

    Here is a good article on cross-domain issues:

    https://developer.mozilla.org/en-US/docs/HTTP_access_control

    • 0