472,976 Members | 1,434 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,976 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 and Opera 8.52

Here is the simplified code:

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

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


Jun 7 '06 #1
2 7446
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:

<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]) {
} else {
tmp=new Image();
tmp.onload=new Function("document.images['"+img+"'].src='"+p+"'");
tmp.src=p+"?"+new Date().getTime();
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".

Jun 7 '06 #3

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

Similar topics

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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

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.