473,320 Members | 1,979 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

changing image src property does not work in IE?

I tried to change the image.src on the fly when the user click a link.
But for some reason it does not work in IE 6 (the image just disappear
when I click the link), but if I add the alert('test') line on the
change_pic function it works in IE. it's like IE just didn't refresh
the display with the new image. Btw, the code works fine on Firefox
1.5.0.4 and Opera 8.52

Here is the simplified code:

<script type="text/javascript">
function change_pic(p) {
document.images._pimg.src = p;
// alert('test');
}
</script>

<img name="_pimg" src="image.jpg" >

<a href="javascript:;" onclick="change_pic('image.jpg')">image</a>
<a href="javascript:;" onclick="change_pic('image2.jpg')">image 2</a>

thanks,

Jun 7 '06 #1
2 7479
ok, I think I just solved my own problem :) seems like IE does not
display the image if it's not loaded yet, so here is the solution.

function change_pic(p) {
img = new Image();
img.src = p;
img.onload = function() {document.images._pimg.src = img.src};
}

Jun 7 '06 #2
re*******@gmail.com wrote:

Hello,
<a href="javascript:;" onclick="change_pic('image.jpg')">image</a>
This construct exhibits two issues:

[1] it uses the "javascript:" pseudo-protocol in an incorrect way;
originally this pseudo-protocol was used to display javascript string
values on the screen, but in your case there happens to be nothing to
display, so the user agent (if javascript-enabled) might get confused if
requested to run the link :)

[2] the ONCLICK handler does not return false, therefore telling the
browser to navigate to the resource identified by the HREF attribute. In
your case, you definitely don't want that, all the more that you don't
have any resource to navigate to; you want to prevent the default
behavior by returning false.

I therefore think that it would be better to use:

<a href="foo.html" onclick="change_pic('foo'); return false">

or, if you don't have a page to navigate to,

<span onclick="change_pic('foo')">

ok, I think I just solved my own problem :) seems like IE does not
display the image if it's not loaded yet, so here is the solution. function change_pic(p) {
img = new Image();
img.src = p;
img.onload = function() {document.images._pimg.src = img.src};
}


In such a perspective, I'd prefer something like the following,
separating the load from the display (note that it could be separated
further, in two distinct script contents), and parameterising the image
name as second argument (among other things).

---
var change_pic = (function(){
var sources=new Object();
return function(p, img) {
var tmp;
if(sources[p]) {
document.images[img].src=p;
} else {
tmp=new Image();
tmp.onload=new Function("document.images['"+img+"'].src='"+p+"'");
tmp.src=p+"?"+new Date().getTime();
sources[p]=true;
}
}
})();
---
However, I am not sure the reason you invoke is the correct one; I think
that the link defaulting to the pseudo-protocol "javascript:" is a more
probable candidate for your issues. Please change the HREF attribute for
javascript-disabled agents and definitely add a "return false".

HTH
Jun 7 '06 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Amer Kheir via .NET 247 | last post by:
Salaam To All, I created a custom control using Vb.net, and it contains an Image Property it works half ok, it lets you select an image, but my problem is: if I want to delete my selection and...
1
by: Dave | last post by:
Hi all, I was trying to make an image submit button with a rollover and discovered to my suprise that there is no way to access a form element of the "image" type. I tried specifying it by name...
1
by: Riccardo Giomi | last post by:
Hi I would to display a Cursors.WaitCursor on a ListView control, so I tried listView.Cursor = Cursors.WaitCursor but it doesn't work at all, I see always the default cursor. The same thing...
1
by: Adam Dockter | last post by:
I am trying to create image property that will work in the designer. I want the image to be written to the resource file for the class. Here is what I have so far, but I am running into a wall...
1
by: Cade Carvell | last post by:
Hello, I have a class that I have a public property on it for an Image. In my class I change the image, different image etc. Anyway, Everythign works fine for the first image. I an bind the...
0
by: Panic Student | last post by:
hi all, i'm having trouble with changing image when mouseover on a particular label. Below is what i attempted to but it didn't seem to work at all. I guess my concept is wrong ): Please...
7
by: Michael Turner | last post by:
Anyone know how to make use of this? http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/frlrfSystemWindowsFormsControlClassBackgroundImageTopic.asp I cant seem to work...
5
by: mattcolenutt | last post by:
Scenario: Have a product form with an "image location" field. The image property uses this field to display the image. Problem: If an image location field has been changed, the image will not...
0
by: doubts | last post by:
Hi, I have a query regarding reading Image Property for button from a XML file . I read XML files to Generate Screens using System.Windows.Forms.Controls .The XML file is read and properties...
1
by: rickbear | last post by:
Hi group I'm developing a Form for target WindowsCE platform in .NET 2.0 In my form I create a Button without any problems. I can set some properties also. But in the documentation and many...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.