473,387 Members | 3,781 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,387 software developers and data experts.

problems with images using innerhtml in ie

Ben
Hi all
I have a problem with a page I'm working on. It's a cateloge with a
collection of thumbnails which, when clicked on display a larger
picture in the middle. The problem that I have with internet explorer
is that sometimes it works, sometimes it loads part of the image and
sometimes it doesn't load the image at all. is there any way I can get
this to work without preloading the images (there are a lot of images
on the page and it would take ages to preload them all, and most of
them probably won't need to be loaded). Any advice would be greatly
appreciated. Below is the code I'm using with an html stub.

<script type="text/javascript">
<!--
function changeImgContent(id,image_src)
{
var before = "<img src='";
var after = "' height='255' width='470'>";
var el = document.getElementById(id);
el.innerHTML = before+image_src+after;
}
function changeTxtContent(id,desc) {
var el = document.getElementById(id);
el.innerHTML = desc;
}
function doublechange(image_src,description)
{
changeImgContent('image_cell',image_src);
changeTxtContent('desc_cell',description);
}
-->
</script>

<table>
<tr>
<td id='image_cell'>image goes here</td>
<td id='desc_cell'>description here</td>
</tr>
</table>
<a href='javascript:;' onclick='doublechange("one.jpg","image
one")'>one</a>
<a href='javascript:;' onclick='doublechange("two.jpg","image
two")'>two</a>
<a href='javascript:;' onclick='doublechange("three.jpg","image
three")'>three</a>

Nov 9 '05 #1
3 2214

Ben wrote:
Hi all
Hi

[snip] <a href='javascript:;' onclick='doublechange("one.jpg","image
one")'>one</a>


Your problem may lie with href='javascript:;', why have you included
this?

Try replacing with:

<a href='#' onclick='doublechange("one.jpg","image one")'>one</a>

Or use something else, e.g.:-

<span onclick='doublechange("one.jpg","image one")'>one</span>

Regards

Julian

Nov 9 '05 #2
Ben wrote:
I have a problem with a page I'm working on.


I suspect the root cause of your problem is that you do not return false
from your onClick event.
Also, I'm not sure why you want to change the innerHTML of the image cell,
rather than just changing the src attribute of an image tag within the cell.

But overall, I would recommend changes like the following:

<script type="text/javascript">
function changeImgContent(id,image_src) {
var el = document.getElementById(id);
el.innerHTML = '<img src="'+image_src+'" height="255" width="470">';
}
function changeTxtContent(id,desc) {
var el = document.getElementById(id);
el.innerHTML = desc;
}
function doublechange(image_src,description) {
changeImgContent('image_cell',image_src);
changeTxtContent('desc_cell',description);
}
</script>

<table>
<tr>
<td id='image_cell'>image goes here</td>
<td id='desc_cell'>description here</td>
</tr>
</table>
<a href="one.jpg" target="_blank"
onclick="doublechange(this.href,'image one');return false;">one</a>
<a href="two.jpg" target="_blank"
onclick="doublechange(this.href,'image one');return false;">two</a>
<a href="three.jpg" target="_blank"
onclick="doublechange(this.href,'image one');return false;">three</a>

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Nov 9 '05 #3
Ben
thank you for your help, I tried changing the src instead of the
innerhtml and it works perfectly now, should have thought of that in
the first place. Thanks again.

Nov 11 '05 #4

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

Similar topics

1
by: nick | last post by:
Dear All, I have a little strange problem with using innerHTML property to update my browser document. The HTML content I am inserting in document contains images. These images are to be...
2
by: Van der Weij | last post by:
Hi, I want to preload some images for a webpage _and_ determing their width and height. The problem is that the scripts continue while the images are loaded in the background, while I need the...
40
by: Geoff Cox | last post by:
Hello, I am still having problems - apologies if the answer is in previous postings! I now have, in the header, <sctipt> var myimages=new Array();
12
by: shafiqrao | last post by:
Hello everyone, I have a script that runs in IE great, but in firefox it has problems. I understand that there are some objects that are accessed differently in IE and Mozilla. Can anybody let...
5
by: furby | last post by:
I have this little bit of code : var request = false; var divid = 0; var fforie; try { request = new XMLHttpRequest(); fforie = "FF"; } catch (trymicrosoft) { try { //request = new...
6
by: Rob | last post by:
Hello, I'm sure this has come up before. I have need for a collection of all elements/objects in an HTML document that have any kind of an attribute (HTML or CSS) that is making use of a URL to...
3
jeremydowe
by: jeremydowe | last post by:
Hi, I have noticed that quite a few websites use a preloading graphic (i.e spining circle) to show the that the site is loading images while the user waits. How can I add this to my website? ...
2
by: spinow | last post by:
Hi there, My current project has a div with a table inside it. In this table I have a cell. In this cell images are loaded using a javascript function and the images are resized to fit the cell with...
5
matheussousuke
by: matheussousuke | last post by:
Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails. The goal is: Make it send the email with the URL...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

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.