...

View Full Version : innerHTML not showing images in IE



melissadiane
05-06-2009, 03:14 AM
Hi guys.

I'm the first to admit Javascript is not my forte, so I really hope someone here can help me out.

I'm having a problem with a page I am writing. I have a bulletted list on one side, and when the user rolls over, information (text and sometimes a picture) about the topic pops up on the right side. I'm retrieving simple html files and using Javascript innerHTML to accomplish this. Everything is working perfectly in Firefox and Opera. In Internet Explorer, I have a very strange bug. The text appears just fine, but images in the html files don't. There is just a blank space the size of the image. There's no little "can't find image" icon either, just blank space. Here's my code:



function showtext(filename){
if (!document.getElementById) return;
if(navigator.appName == "Microsoft Internet Explorer")
document.all.large_panel_right.innerHTML=getFile(filename);
else document.getElementById("large_panel_right").innerHTML=getFile(filename);

}

function getFile(filename){
var sURL = "http://"+self.location.hostname+"/why/"+filename;
var oRequest = false;
if(window.XMLHttpRequest && !(window.ActiveXObject)) {
oRequest = new XMLHttpRequest();
} else if(window.ActiveXObject) {
oRequest = new ActiveXObject("Msxml2.XMLHTTP");
}

if(oRequest) {
oRequest.open("GET",sURL,false);
oRequest.setRequestHeader("User-Agent",navigator.userAgent);
oRequest.send(null)

if (oRequest.status==200) return oRequest.responseText;
else alert("Error executing XMLHttpRequest call!");

} else alert("Error initializing XMLHTTP object!");
}


I've been scratching my head on this one for a week, and I would really appreciate some help.

Can I post the website address so you guys can see what is happening or is that against the rules? Or let me know if there is anything I can do to explain this better.

Thanks,
Melissa

bdl
05-06-2009, 03:37 AM
Don't use document.all, it's deprecated and I'm not sure it even works in modern browsers. Trying to perform browser validation for the most part is outdated; just use correct, cross-browser DOM code and you should be fine (in fact, any browser now can use document.getElementById).



oRequest = new ActiveXObject("Msxml2.XMLHTTP");


It's debatable whether or not all versions of IE can use Msxml2.XMLHTTP; I would start with that but degrade to Microsoft.XMLHTTP. IIRC, IE > v7 has its own native XMLHttpRequest object now, so checking for a browser that has that and does not have the ActiveXObject available to it may be shooting yourself in the foot. I know there's a link around here somewhere that spells out all versions of that object, if I find it I'll post it.



oRequest.setRequestHeader("User-Agent",navigator.userAgent);

Again, why bother? Setting a User-Agent string for a simple GET request seems unnecessary to me.

melissadiane
05-06-2009, 04:56 AM
Thanks, bdl, for replying to my post.

I changed the code to



function showtext(filename){
if (!document.getElementById) return;
document.getElementById("large_panel_right").innerHTML=getFile(filename);
}

function getFile(filename){
var sURL = "http://"+self.location.hostname+"/why/"+filename;
var oRequest = false;

try {
oRequest = new XMLHttpRequest();
} catch(e) {
try {
oRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
oRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) { oRequest = false; }
}
}


if(oRequest) {
oRequest.open("GET",sURL,false);
oRequest.send(null)

if (oRequest.status==200) return oRequest.responseText;
else alert("Error executing XMLHttpRequest call!");
} else alert("Error initializing XMLHTTP object!");
}



I'm still having the exact same problem. Works perfectly in Firefox and Opera. In IE 6,7,8 the text loads on the right hand side, but the images don't. You can see it at http://www.permacastwalls.com/why.php?content=durable
(I hope posting links is ok -- I couldn't find anything in the rules about it.)

bdl
05-06-2009, 06:14 AM
Ok. Let's look at it from the perspective of the Ajax request. Typically you define an event handler function and assign it to the XMLHttpRequest:onreadystatechange property, e.g.


function getFile(filename) {
// ...
if(oRequest) {
// open the request (use asynchronous == true)
oRequest.open("GET",sURL,true);
// define the onreadystate property (event handler)
oRequest.onreadystatechange= function(evt) {
// test for the HTTP status & readyState property
if ( oRequest.status === 200 && oRequest.readyState === 4 ) {
// at this point the request is valid and complete
// set the DIV element innerHTML here
document.getElementById("large_panel_right").innerHTML= oRequest.responseText;
}
};
oRequest.send(null);
} else {
alert("Error initializing XMLHTTP object!");
}
}


And you handle the onclick event like so:


function showtext(filename){
if (!document.getElementById) return;
getFile(filename);
}


Things to note:

I'm using an asynchronous request rather than a synchronous request; this is usually what you want, unless you know why you don't want to use an asynchronous request.

Check for status and readyState properties.

Pushing all the event handling down into the onreadystatechange property; this gives you much more flexibility on how to handle the returning data. I'm using an anonymous function here, but you could just as easily do this:


function handleRequest() {

}

oRequest.open(...);
oRequest.onreadystatechange= handleRequest;
oRequest.send(null);



Take a look at the XMLHttpRequest object methods & properties (https://developer.mozilla.org/en/XMLHttpRequest).

Old Pedant
05-06-2009, 06:43 AM
Dunno if it's relevant (probably not), but if you turn on debugging in MSIE you discover that the function hidetext( ) which is called from onmouseout in those <li>'s is *NOT DEFINED*.

But try this!

Just load this URL into your browser:
http://www.permacastwalls.com/why/durable/hurricane.html

NO IMAGE!

The reason is clear: The image is actually located at
http://www.permacastwalls.com/graphics/hurricane-emily.jpg
and when you view that "hurrican.html" page, because you used a *RELATIVE* URL to the image of just "durable/hurricant-emily.jpg" the browser tries to load the image from
http://www.permacastwalls.com/why/durable/graphics/hurricane-emily.jpg

I would *SUSPECT* this is the problem with MSIE: It is indeed trying to get the image from
http://www.permacastwalls.com/why/durable/graphics/hurricane-emily.jpg
(whereas FF, et al., apparently view the relative path differently).

So the solution is *probably* easy: Just change your HTML file to read:


<h3>Hurricane resistant</h3>
<p>Permacast Walls are resistant to rain, flood damage, and wind-blown debris. During a storm, it is not necessarily the wind that does the damage, but what's in the wind. Most wind-born debris cannot damage a Permacast Wall. </p>
<div class="image">
<a href="/graphics/hurricane-emily.jpg"><img src="graphics/hurricane-emily.jpg" alt="hurricane" border="none"/></a>
<div class="caption">Category 3 Hurricane</div>
</div>

And look at the SLASH the *precedes* "graphics" in the HREF!

Give it a shot.

***********************

I *DO* have to ask a question: WHY WHY WHY go to all the trouble to use Ajax and a call back to the server to load in that tiny bit of HTML code????

Why not just put the 8 simple sets of HTML as strings into an array right in the page and then just load from one of the array elements???

It would be faster, easier to debug, and LESS LOAD on your server!

Old Pedant
05-06-2009, 06:49 AM
That is, you could have this in your JS code somewhere:



var overlays = new Array( );
overlays[0] = '<h3>Hurricane resistant</h3>'
+ '<p>Permacast Walls are resistant to rain, flood damage, and wind-blown debris. '
+ 'During a storm, it is not necessarily the wind that does the damage, '
+ 'but what's in the wind. Most wind-born debris cannot damage a '
+ 'Permacast Wall. </p>'
+ '<div class="image">'
+ '<' + 'a href="/graphics/hurricane-emily.jpg"><'
+ 'img src="/graphics/hurricane-emily.jpg" alt="hurricane" border="none"/><'
+ '/a><div class="caption">Category 3 Hurricane</div></div>';
overlays[1] = '....'
etc.

function showtext(which)
{
document.getElementById("large_panel_right").innerHTML = overlays[which];
}
function hidetext( )
{
document.getElementById("large_panel_right").innerHTML =
'<p>Choose a topic for more information</p>';
}


And then you just do:


<li onMouseover="showtext(0);" onMouseout="hidetext()">Hurricane resistant</li>


No???

Seems SO much simpler!

Old Pedant
05-06-2009, 06:53 AM
And why is the image a link *TO ITSELF*???

If you were linking to a larger image of the same thing, that would make sense. But if clicking on the image transfers the user to...the SAME image...well...what's the point???

(I see the rusty wall links to a larger image...okay. But the hurricane image doesn't.)

melissadiane
05-06-2009, 06:51 PM
Old Pedant,

Thank you for working with me here.

Linking the image to itself is a mistake. Thanks for pointing that out.

The way you suggested is a lot simpler. (I'm new to Javascript, so go easy on me.) Unfortunately, I'm still having the same problem.

The new code is


var overlays = new Array();
overlays[0] = '<h3>Hurricane resistant</h3>'
+ '<p>Permacast Walls are resistant to rain, flood damage, and wind-blown debris. During a storm, '
+ 'it is not necessarily the wind that does the damage, but what\'s in the wind. Most wind-born '
+ 'debris cannot damage a Permacast Wall.</p>'
+ '<div class="image">'
+ '<img src="/graphics/hurricane-emily.jpg" alt="hurricane" border="none"/>'
+ '<div class="caption">Category 3 Hurricane</div></div>';
overlays[1] = '<h3>Withstands everyday use</h3>'
+ '<p>All fences and walls are subject to everyday wear and tear, and this is where the use of a '
+ 'Permacast Wall really makes sense. Its hard, tough surfaces are extremely resistant to everyday '
+ 'dents and dings. </p>';
overlays[2] = '<h3>Settling isn\'t a problem</h3>'
+ '<p>It\'s rare to look around and see a concrete block wall that hasn\'t settled. Since concrete '
+ 'can\'t bend, when a block wall settles, each block separates from the next, giving older concrete '
+ 'walls a stair-step appearance. This will never happen to a Permacast Wall.</p>'
+ '<div class="image">'
+ '<a href="/graphics/stairstep.jpg"><img src="http://www.permacastwalls.com/graphics/stairstep-thumb.jpg" '
+ 'alt="stairstep wall" border="none" height="247" width="300"/></a>'
+ '<div class="caption">Stairstep Wall—Not a Permacast Wall</div></div>';
overlays[3] = '<h3>Doesn\'t rust</h3>'
+ '<p>The factory-controlled production process means that rebar coverage is consistent and correct. '
+ 'Concrete is a permeable product, and it is necessary to have adequate coverage of concrete over '
+ 'rebar to ensure rust prevention in any concrete product.</p>'
+ '<div class="image">'
+ '<a href="/graphics/rust.jpg"><img src="/graphics/rust-thumb.jpg" alt="stairstep wall" border="none"/></a>'
+ '<div class="caption">Rusty Wall—Not a Permacast Wall</div></div>';
overlays[4] = '<h3>Inedible to termites</h3>'
+ '<p>Wooden fences make the best food for creatures like termites, and wherever there is moisture '
+ 'and wood, there are termites nearby. Permacast Walls are indestructible to termites.</p>';
overlays[5] = '<h3>Rot proof, fungus proof, &amp; mildew resistant</h3>'
+ '<p>Permacast Walls are dense, tough, and simply will not fall prey to these common enemies of '
+ 'organic materials. Using Permacast Walls means having confidence that your wall will not rot away.</p>';
overlays[6] = '<h3>UV resistent</h3>';
+ '<p>Unlike other materials, precast concrete does not degrade from exposure to sunlight. This is '
+ 'extremely important when choosing a wall or fence product, and both wood and vinyl fences can\'t compete. '
+ 'While wood and vinyl fences are deteriorating from the sun, the concrete in Permacast Walls continues to '
+ 'gain strength for 50 years.</p>';
overlays[7] = '<h3>Product service life</h3>'
+ '<p>Concrete structures from hundreds of years ago are still in use today. Some say that concrete can '
+ 'last up to 2,000 years, and there are certainly many structures around that are well on their way to '
+ 'such a ripe old age. With a Permacast Wall, a hundred year service life is easily achievable.</p>';



function showtext(which) {
document.getElementById("large_panel_right").innerHTML = overlays[which];
}

function hidetext() {
document.getElementById("large_panel_right").innerHTML="Move your mouse over a topic on the left for more information."
}


And it's being called by


<li onMouseover="showtext(0);">Hurricane resistant</li>


In FF and Opera, everything looks great, but in IE, the pictures do not display. Thinking you were probably right and this was a path issue, I changed one of the images (overlay[2]) to an absolute path, but that still didn't fix it.

I'm very confused.

-Melissa

TinyScript
05-06-2009, 07:06 PM
gotta watch those commas in your Array. You needed to add \ before them to make it work.



<HTML>
<HEAD>
<TITLE>Village Calculator</TITLE>

<script language="JavaScript">
var overlays = new Array();
overlays[0] = '<h3>Hurricane resistant</h3>'
+ '<p>Permacast Walls are resistant to rain\, flood damage\, and wind-blown debris. During a storm, '
+ 'it is not necessarily the wind that does the damage\, but what\'s in the wind. Most wind-born '
+ 'debris cannot damage a Permacast Wall.</p>'
+ '<div class="image">'
+ '<img src="/graphics/hurricane-emily.jpg" alt="hurricane" border="none"/>'
+ '<div class="caption">Category 3 Hurricane</div></div>';
overlays[1] = '<h3>Withstands everyday use</h3>'
+ '<p>All fences and walls are subject to everyday wear and tear\, and this is where the use of a '
+ 'Permacast Wall really makes sense. Its hard\, tough surfaces are extremely resistant to everyday '
+ 'dents and dings. </p>';
overlays[2] = '<h3>Settling isn\'t a problem</h3>'
+ '<p>It\'s rare to look around and see a concrete block wall that hasn\'t settled. Since concrete '
+ 'can\'t bend, when a block wall settles, each block separates from the next\, giving older concrete '
+ 'walls a stair-step appearance. This will never happen to a Permacast Wall.</p>'
+ '<div class="image">'
+ '<a href="/graphics/stairstep.jpg"><img src="http://www.permacastwalls.com/graphics/stairstep-thumb.jpg" '
+ 'alt="stairstep wall" border="none" height="247" width="300"/></a>'
+ '<div class="caption">Stairstep Wall—Not a Permacast Wall</div></div>';
overlays[3] = '<h3>Doesn\'t rust</h3>'
+ '<p>The factory-controlled production process means that rebar coverage is consistent and correct. '
+ 'Concrete is a permeable product\, and it is necessary to have adequate coverage of concrete over '
+ 'rebar to ensure rust prevention in any concrete product.</p>'
+ '<div class="image">'
+ '<a href="/graphics/rust.jpg"><img src="/graphics/rust-thumb.jpg" alt="stairstep wall" border="none"/></a>'
+ '<div class="caption">Rusty Wall—Not a Permacast Wall</div></div>';
overlays[4] = '<h3>Inedible to termites</h3>'
+ '<p>Wooden fences make the best food for creatures like termites\, and wherever there is moisture '
+ 'and wood\, there are termites nearby. Permacast Walls are indestructible to termites.</p>';
overlays[5] = '<h3>Rot proof, fungus proof, &amp; mildew resistant</h3>'
+ '<p>Permacast Walls are dense\, tough\, and simply will not fall prey to these common enemies of '
+ 'organic materials. Using Permacast Walls means having confidence that your wall will not rot away.</p>';
overlays[6] = '<h3>UV resistent</h3>';
+ '<p>Unlike other materials\, precast concrete does not degrade from exposure to sunlight. This is '
+ 'extremely important when choosing a wall or fence product\, and both wood and vinyl fences can\'t compete. '
+ 'While wood and vinyl fences are deteriorating from the sun\, the concrete in Permacast Walls continues to '
+ 'gain strength for 50 years.</p>';
overlays[7] = '<h3>Product service life</h3>'
+ '<p>Concrete structures from hundreds of years ago are still in use today. Some say that concrete can '
+ 'last up to 2,000 years\, and there are certainly many structures around that are well on their way to '
+ 'such a ripe old age. With a Permacast Wall\, a hundred year service life is easily achievable.</p>';


'dents and dings. </p>';



function showtext(which) {
document.getElementById("large_panel_right").innerHTML = overlays[which];
}

function hidetext() {
document.getElementById("large_panel_right").innerHTML="Move your mouse over a topic on the left for more information."
}
</script>

</HEAD>

<BODY >
<li onMouseover="showtext(0);">Hurricane resistant</li>
<li onMouseover="showtext(1);">Hurricane resistant</li>
<li onMouseover="showtext(2);">Hurricane resistant</li>
<li onMouseover="showtext(3);">Hurricane resistant</li>
<li onMouseover="showtext(4);">Hurricane resistant</li>
<li onMouseover="showtext(5);">Hurricane resistant</li>
<li onMouseover="showtext(6);">Hurricane resistant</li>

<div id="large_panel_right"></div>

</BODY>




I wanted to create a similar script, so thanks for posting this.

melissadiane
05-06-2009, 07:13 PM
Thanks TinyScript for pointing that out. Unfortunately, it still didn't fix the problem.

TinyScript
05-06-2009, 07:32 PM
I got it working in FF and IE. check your image addresses. Two of your images do not show up, but the one of them does. so I know the script works.

12 Pack Mack
05-06-2009, 08:11 PM
melissadiane:

This works for me, as is, in IE6 and FF3:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var displayArea = "";

var overlays =[]
overlays['H'] = '<h3>Hurricane resistant<\/h3>'
+ '<p>Permacast Walls are resistant to rain, flood damage, and wind-blown debris. During a storm, '
+ 'it is not necessarily the wind that does the damage, but what\'s in the wind. Most wind-born '
+ 'debris cannot damage a Permacast Wall.<\/p>'
+ '<div class="image">'
+ '<img src="./graphics/hurricane-emily.jpg" height="247" width="300" alt="hurricane" border="none"/>'
+ '<div class="caption">Category 3 Hurricane<\/div><\/div>';
overlays['W'] = '<h3>Withstands everyday use<\/h3>'
+ '<p>All fences and walls are subject to everyday wear and tear, and this is where the use of a '
+ 'Permacast Wall really makes sense. Its hard, tough surfaces are extremely resistant to everyday '
+ 'dents and dings. <\/p>';
overlays['S'] = '<h3>Settling isn\'t a problem<\/h3>'
+ '<p>It\'s rare to look around and see a concrete block wall that hasn\'t settled. Since concrete '
+ 'can\'t bend, when a block wall settles, each block separates from the next, giving older concrete '
+ 'walls a stair-step appearance. This will never happen to a Permacast Wall.<\/p>'
+ '<div class="image">'
+ '<img src="./graphics/stairstep-thumb.jpg"'
+ 'alt="stairstep wall" border="none" height="247" width="300"\/>'
+ '<div class="caption">Stairstep Wall—Not a Permacast Wall<\/div><\/div>';
overlays['D'] = '<h3>Doesn\'t rust<\/h3>'
+ '<p>The factory-controlled production process means that rebar coverage is consistent and correct. '
+ 'Concrete is a permeable product, and it is necessary to have adequate coverage of concrete over '
+ 'rebar to ensure rust prevention in any concrete product.<\/p>'
+ '<div class="image">'
+ '<img src="./graphics/rust-thumb.jpg" height="247" width="300" alt="stairstep wall" border="none"/>'
+ '<div class="caption">Rusty Wall—Not a Permacast Wall<\/div><\/div>';
overlays['I'] = '<h3>Inedible to termites<\/h3>'
+ '<p>Wooden fences make the best food for creatures like termites, and wherever there is moisture '
+ 'and wood, there are termites nearby. Permacast Walls are indestructible to termites.<\/p>';
overlays['R'] = '<h3>Rot proof, fungus proof, &amp; mildew resistant<\/h3>'
+ '<p>Permacast Walls are dense, tough, and simply will not fall prey to these common enemies of '
+ 'organic materials. Using Permacast Walls means having confidence that your wall will not rot away.<\/p>';
overlays['U'] = '<h3>UV resistent<\/h3>';
+ '<p>Unlike other materials, precast concrete does not degrade from exposure to sunlight. This is '
+ 'extremely important when choosing a wall or fence product, and both wood and vinyl fences can\'t compete. '
+ 'While wood and vinyl fences are deteriorating from the sun, the concrete in Permacast Walls continues to '
+ 'gain strength for 50 years.<\/p>';
overlays['P'] = '<h3>Product service life<\/h3>'
+ '<p>Concrete structures from hundreds of years ago are still in use today. Some say that concrete can '
+ 'last up to 2,000 years, and there are certainly many structures around that are well on their way to '
+ 'such a ripe old age. With a Permacast Wall, a hundred year service life is easily achievable.<\/p>';


function swapInfo(nItem){

if (nItem)
{
displayArea.innerHTML = overlays[nItem.firstChild.data.substring(0,1)];
}
else {
displayArea.innerHTML = "Move your mouse over a topic on the left for more information.";
}
}

function init(){

var nItems = document.getElementById('large_panel_list').getElementsByTagName('li');
for (i=0; i<nItems.length; i++)
{
nItems[i].onmouseover = function()
{
swapInfo(this);
}
nItems[i].onmouseout = function()
{
swapInfo();
}
}
displayArea = document.getElementById("large_panel_right");
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
</head>
<body>
<ul id="large_panel_list">
<li>Hurricane resistant</li>
<li>Withstands everyday use</li>
<li>Settling isn't a problem</li>
<li>Doesn't rust</li>
<li>Inedible to termites</li>
<li>Rot proof, fungus proof, &amp; mildew resistant</li>
<li>UV resistant</li>
<li>Product service life</li>
</ul>

<br><br>

<div id="large_panel_right"></div>
</body>
</html>

Old Pedant
05-06-2009, 08:16 PM
I like the idea of using overlay["H"] !!

Sheesh. Why didn't I think of that!

The idea of attaching the event handlers programatically is one that I think you have espoused before. It doesn't bother me to see them explicitly in the HTML code, but I can't argue with your preference for doing them via the init( ) call.

So, Melissa, are the images working on your site, yet? I'll have to go check...

Old Pedant
05-06-2009, 08:28 PM
Hmmm...no, still not working in MSIE 6. But I think it's a style problem of some kind.

The *SPACE* for the image is there. And in the case of the "rust" image, the cursor changes to a hand anyplace in the space where the image should be (and doesn't change outside that area). And if you click on it, then the larger image appears, so the <A> tag is working.

I wonder if perhaps it's just a z-index problem? Try adding in a z-index. Something like this:


overlays[0] = '<h3>Hurricane resistant</h3>'
+ '<p>Permacast Walls are resistant to rain\, flood damage\, and wind-blown debris. During a storm\, '
+ 'it is not necessarily the wind that does the damage\, but what\'s in the wind. Most wind-born '
+ 'debris cannot damage a Permacast Wall.</p>'
+ '<div class="image">'
+ '<img src="/graphics/hurricane-emily.jpg" alt="hurricane" border="none" style="z-index: 99;" />'
+ '<div class="caption">Category 3 Hurricane</div></div>';

And if that doesn't work, let's make the <DIV> around the image visible for debugging:


overlays[0] = '<h3>Hurricane resistant</h3>'
+ '<p>Permacast Walls are resistant to rain\, flood damage\, and wind-blown debris. During a storm\, '
+ 'it is not necessarily the wind that does the damage\, but what\'s in the wind. Most wind-born '
+ 'debris cannot damage a Permacast Wall.</p>'
+ '<div class="image" style="background-color: pink;">'
+ '<img src="/graphics/hurricane-emily.jpg" alt="hurricane" border="none" style="z-index: 99;" />'
+ '<div class="caption">Category 3 Hurricane</div></div>';


By the by, you did *NOT* need the \ in front of all the commas. You only needed it in front of the apostrophes. But don't take them out; they obviously don't hurt anything.

Hasn't this been a fun exercise in cross browser scripting? Not?

p.s.: I'm 90% sure I know how to make this work, but it's an ugly solution and I'd like to see if you can fix it this way, first.

TinyScript
05-06-2009, 08:33 PM
what's the advantage getting the first letter? Am I missing something? I'd like to understand why you'd go through the trouble of doing that when it seemingly adds nothing to the functionality of the script? Or what's the functionality I'm missing? LOL

12 Pack Mack
05-06-2009, 08:38 PM
melissadiane:

Again, the code I posted works, cross-browser, as is.

Please test it that way.

Copy the entire post, then save it as an .html document. Once you see that it works, then you can insert the new code in your existing document.

Old Pedant
05-06-2009, 08:51 PM
Well, actually, the first letter only HAPPENS to work in this case because it happens to be unique.

But a sensible way to handle that in the more general case would be:


overlays["Hurricane resistant"] = ....


That is, why not just use the innerHTML of the <li> as the key into the array?

Self documenting.

The reason he *needed* to use something other than a number is because he attached the event handlers via code, in the init( ) function, and didn't have a way to pass the number. [Well, that's not strictly true. He could have made a unique anonymous function for each <li> in the code that would pass the number. Or he could write code that would figure out the index of a give <li> in the collection of <li>s. Or or or... But using the initial letter was a quick and easy solution.]

melissadiane
05-06-2009, 08:55 PM
Thanks to everyone for their ideas and suggestions.

12 Pack Mac -- I copied and pasted your code and had the exact same problem with images not showing in IE. It's not just my machine. I've tried it on a half dozen. But I really appreciate you spending the time on it.

TinyScript -- I tried changing all the paths to absolute and checked them a hundred times. Same problem.

I believe you guys that it's worked for you, so the problem must be me. Am I fundamentally missing something? Am I retarded? This is so frustrating.

-Melissa

Old Pedant
05-06-2009, 08:59 PM
12 Pack: Did you test it with her styles???

As I said, even her code works to bring the <img> tag into the innerHTML, else the <a> around "rust" image wouldn't show the cursor as it does.

Your code is *STILL* putting the same string contents into the same DIV's innerHTML, so why do you think that will change how the image does or does not appear???

Hmmm...well, okay...fine toothed comb.

YOu are using
+ '<img src="./graphics/hurricane-emily.jpg" height="247" width="300" alt="hurricane" border="none"/>'

versus her
+ '<img src="/graphics/hurricane-emily.jpg" alt="hurricane" border="none"/>'

So you are specifying the "./" instead of just "/" and giving height and width. But I'm skeptical that those will matter. CLEARLY the "hidden image" in her current page already has that height and width. You can see how it affects the display of the rest of the area. And so how did the browser know that height and width if it couldn't find the image?

Oh, well...we shall see.

******************

EDITED: As predicted. Per Melissa. Again, I think the images *ARE* there. Just not visible for whatever reason.

TinyScript
05-06-2009, 08:59 PM
Well, actually, the first letter only HAPPENS to work in this case because it happens to be unique.

But a sensible way to handle that in the more general case would be:


overlays["Hurricane resistant"] = ....


That is, why not just use the innerHTML of the <li> as the key into the array?

Self documenting.

The reason he *needed* to use something other than a number is because he attached the event handlers via code, in the init( ) function, and didn't have a way to pass the number. [Well, that's not strictly true. He could have made a unique anonymous function for each <li> in the code that would pass the number. Or he could write code that would figure out the index of a give <li> in the collection of <li>s. Or or or... But using the initial letter was a quick and easy solution.]

Ahhhh, I see. Thnks

"That is, why not just use the innerHTML of the <li> as the key into the array?"

that's what i was gonna ask next. You read my mind. LOL

Old Pedant
05-06-2009, 09:01 PM
Did you try the DEBUG stuff I added? Putting in the z-index and then putting in the pink background to the div??

I *REALLY* believe that the image *IS* there, in MSIE 6. It's just hidden for some reason.

I haven't looked at your CSS. Try my experiment and if that still doesn't work, then let me look at the CSS.

TinyScript
05-06-2009, 09:03 PM
Thanks to everyone for their ideas and suggestions.

12 Pack Mac -- I copied and pasted your code and had the exact same problem with images not showing in IE. It's not just my machine. I've tried it on a half dozen. But I really appreciate you spending the time on it.

TinyScript -- I tried changing all the paths to absolute and checked them a hundred times. Same problem.

I believe you guys that it's worked for you, so the problem must be me. Am I fundamentally missing something? Am I retarded? This is so frustrating.

-Melissa

LOL no, you'll get it figured out. Maybe post your whole code again and let us see what's up

12 Pack Mack
05-06-2009, 09:05 PM
melissadiane:

Melissa, please. AS IS.

Copy my entire post, save it, using Notepad, as an .html document.

Give it some meaningful name, like: Test_Rollover.html

Upload it to the same directory as your default page.

Open it in any browser.

If it still doesn't work, post the link to Test_Rollover.html

melissadiane
05-06-2009, 09:07 PM
I apologize, 12 Pack Mack. As is, the code works as advertised. Now I need to adapt it somehow...

Old Pedant --

I changed the style to


.image {
float: left;
display: block;
padding: 10px;
z-index: 99;
background-color: pink;
}


Strange.

-Melissa

Old Pedant
05-06-2009, 09:09 PM
DOUBLE DOH on all of us!

There is a *DIRT EASY* way to find out if this is related to the JS code *AT ALL*!!!

MELISSA:

Just TEMPORARILY change your HTML.

Change your existing code:


<div id="large_panel_right">

<p>Choose a topic for more information</p>
</div>

to this:


<div id="large_panel_right">
<h3>Hurricane resistant</h3>
<p>Permacast Walls are resistant to rain, flood damage, and wind-blown debris. During a storm,
it is not necessarily the wind that does the damage, but what's in the wind.
Most wind-born debris cannot damage a Permacast Wall.</p>
<div class="image">
<img src="/graphics/hurricane-emily.jpg" alt="hurricane" border="none"/>
<div class="caption">Category 3 Hurricane</div>
</div>

</div>


SEE? Just put in the HTML that you want the JS to install there and see if *THAT* works. If it does, then the problem must be MSIE not handling the innerHTML correctly.

melissadiane
05-06-2009, 09:11 PM
Old Pedant--
Here's the CSS. The file's pretty long. Prettying it up was next on my to-do list.

melissadiane
05-06-2009, 09:11 PM
Old Pedant -- I'll test that right now...

Old Pedant
05-06-2009, 09:13 PM
Yes, AND LOOK AT THE PINK AREA!

Even in MSIE 6, the pink area shows clearly that the <DIV> *has* taken on the size of the image it contains.

Did you also change the image's z-index, as I showed?

melissadiane
05-06-2009, 09:14 PM
Old Pedant--

The image displays correctly when I copy the html directly into why.php. You're right--I should have thought of trying that a LONG time ago.

melissadiane
05-06-2009, 09:14 PM
z-index is 99. I might change it higher.

Old Pedant
05-06-2009, 09:16 PM
You changed the z-index of the <DIV> by changing that ".image" style; that did *NOT* change the z-index of the <IMG> it contained, necessarily.

Try this in the CSS file:



.image {
float: left;
display: block;
padding: 10px;
z-index: 50;
background-color: pink;
}
.image img { z-index: 99; border: solid red 3px; }

Old Pedant
05-06-2009, 09:20 PM
Ahh...just saw your message about it appearing correctly when you copy it in place.

Okay, I'm afraid you are stuck with an MSIE anomaly. For some reason, when you dump that HTML into that <div>, MSIE just won't render the image.

I doubt that my suggested change to your CSS will matter, but give it a stab, just in case.

In the meantime, I have the solution. It's a tiny bit ugly, but not really that bad.

Back in a bit...it's a minor chunk of code.

12 Pack Mack
05-06-2009, 09:23 PM
Melissa:

You don't need to declare a z-index for the images. There's nothing above or below it. Delete that line. There is NO IE "anomaly." None.

My validator found these CSS errors:

I've never heard of a "behavior" property. I'd delete it.


body {
/* dk gray if image is unavailable */
background: #333333 url(graphics/background.gif) repeat;
font-family: Arial, Helvetica, sans-serif;
color: #C7C8CA;
font-size: 0.88em;
line-height: 1.5em;
text-align: center;
behavior: url("csshover3.htc");
}

It's font-size, not font_size:


.button_link_text {
font_size: 18px;
line-height: 40px;
}


Same:


.button_link_text2 {
font_size: 10px;
line-height: 20px;
}

12 Pack Mack
05-06-2009, 09:28 PM
See above, also.

I'd delete the entire class: .image You don't need any of those properties. Border is none by default. Delete it, or comment it out.

Old Pedant
05-06-2009, 09:32 PM
I'm sure you are right about no need for the z-index on the image. That was a desperation attempt.

But how do you explain the fact that the *IDENTICAL* HTML, dropped inline without the use of innerHTML, works fine?

behavior is an MSIE-only thing.
http://msdn.microsoft.com/en-us/library/ms530723(VS.85).aspx
If it wasn't working, it should have affected the inline HTML same as the innerHTML-generated stuff, though that's a "should" not a "must".

How the heck do you guys get the black-text-on-yellow-background???

Old Pedant
05-06-2009, 09:33 PM
Tell you what, I'm going to go away for a while.

See if 12 Pack can get you working.

But if not, then the obvious answer is to *NOT* put an image in place via innerHTML.

Not hard.

melissadiane
05-06-2009, 09:38 PM
Ok, I fixed the CSS errors 12 Pack Mack pointed out.

Old Pedant -- How else would you put the image in place (not being sarcastic, want to know)?

Old Pedant
05-06-2009, 09:51 PM
By changing the .src property of an existing <img> tag.

Oh, what the hey... like this:

First, change your problem div so it has pre-defined elements, thus:


<div id="large_panel_right">
<div id="lpr_top">
<p>Choose a topic for more information</p>
<div id="lpr_image" class="image" style="display: none;">
<a id="lpr_href" href="#">
<img id="lpr_img" alt="" border="none" />
</a>
<div id="lpr_caption" class="caption"></div>
</div>
</div>
</div>


And then the JS code gets a bit messier, but not overly so:




function overlay( txt, big, thumb, ttl, cap )
{
this.top = txt;
this.href = big;
this.src = thumb;
this.alt = ttl;
this.caption = cap;
}
var overlays = new Array();

// only two of the overlays shown...others follow same pattern...
// can use either the numbered or named array elements.
overlays[1] = new overlay(
'<h3>Withstands everyday use</h3>'
+ '<p>All fences and walls are subject to everyday wear and tear\, and this is where the use of a '
+ 'Permacast Wall really makes sense. Its hard\, tough surfaces are extremely resistant to everyday '
+ 'dents and dings. </p>',
null, null, null, null );

overlays[3] = new overlay(
'<h3>Doesn\'t rust</h3>'
+ '<p>The factory-controlled production process means that rebar coverage is consistent and correct. '
+ 'Concrete is a permeable product\, and it is necessary to have adequate coverage of concrete over '
+ 'rebar to ensure rust prevention in any concrete product.</p>',
"/graphics/rust.jpg",
"/graphics/rust-thumb.jpg",
"stairstep wall",
"Rusty Wall—Not a Permacast Wall"
);

// and then showtext function is changed completely:
function showtext(which)
{
var ov = overlays[which];
document.getElementById("lpr_top").innerHTML = ov.top;
if ( ov.image == null )
{
document.getElementById("lpr_image").style.display = "none";
} else {
document.getElementById("lpr_image").style.display = "block";
document.getElementById("lpr_href").href = ov.href;
document.getElementById("lpr_img").src = ov.src;
document.getElementById("lpr_caption").innerHTML = ov.caption;
}
}


UTTERLY UNTESTED. Just finished writing this off the top of my head.

And I have to run for a while, so won't have a chance to test until later.

12 Pack Mack
05-06-2009, 10:15 PM
Melissa:

Try this, again, as is. Tested in IE and FF.

NO changes to the empty "large_panel_right" div are needed.

EDITED: to correct display of "Move your mouse..." message
EDITED again: I forgot to include the narrative for items that include an image and caption



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var displayArea = "";

var imgCaption = [];
imgCaption['H'] = "Category 3 Hurricane";
imgCaption['S'] = "Stairstep Wall—Not a Permacast Wall";
imgCaption['D'] = "Rusty Wall Not a Permacast Wall";

var imgSrc = [];
imgSrc['H'] = "./graphics/hurricane-emily.jpg";
imgSrc['S'] = "./graphics/stairstep-thumb.jpg";
imgSrc['D'] = "./graphics/rust-thumb.jpg";

var overlays = [];
overlays['H'] = '<h3>Hurricane resistant<\/h3>'
+ '<p>Permacast Walls are resistant to rain, flood damage, and wind-blown debris. During a storm, '
+ 'it is not necessarily the wind that does the damage, but what\'s in the wind. Most wind-born '
+ 'debris cannot damage a Permacast Wall.<\/p>'
overlays['W'] = '<h3>Withstands everyday use<\/h3>'
+ '<p>All fences and walls are subject to everyday wear and tear, and this is where the use of a '
+ 'Permacast Wall really makes sense. Its hard, tough surfaces are extremely resistant to everyday '
+ 'dents and dings. <\/p>';
overlays['S'] = '<h3>Settling isn\'t a problem<\/h3>'
+ '<p>It\'s rare to look around and see a concrete block wall that hasn\'t settled. Since concrete '
+ 'can\'t bend, when a block wall settles, each block separates from the next, giving older concrete '
+ 'walls a stair-step appearance. This will never happen to a Permacast Wall.<\/p>'
overlays['D'] = '<h3>Doesn\'t rust<\/h3>'
+ '<p>The factory-controlled production process means that rebar coverage is consistent and correct. '
+ 'Concrete is a permeable product, and it is necessary to have adequate coverage of concrete over '
+ 'rebar to ensure rust prevention in any concrete product.<\/p>'
overlays['I'] = '<h3>Inedible to termites<\/h3>'
+ '<p>Wooden fences make the best food for creatures like termites, and wherever there is moisture '
+ 'and wood, there are termites nearby. Permacast Walls are indestructible to termites.<\/p>';
overlays['R'] = '<h3>Rot proof, fungus proof, &amp; mildew resistant<\/h3>'
+ '<p>Permacast Walls are dense, tough, and simply will not fall prey to these common enemies of '
+ 'organic materials. Using Permacast Walls means having confidence that your wall will not rot away.<\/p>';
overlays['U'] = '<h3>UV resistent<\/h3>';
+ '<p>Unlike other materials, precast concrete does not degrade from exposure to sunlight. This is '
+ 'extremely important when choosing a wall or fence product, and both wood and vinyl fences can\'t compete. '
+ 'While wood and vinyl fences are deteriorating from the sun, the concrete in Permacast Walls continues to '
+ 'gain strength for 50 years.<\/p>';
overlays['P'] = '<h3>Product service life<\/h3>'
+ '<p>Concrete structures from hundreds of years ago are still in use today. Some say that concrete can '
+ 'last up to 2,000 years, and there are certainly many structures around that are well on their way to '
+ 'such a ripe old age. With a Permacast Wall, a hundred year service life is easily achievable.<\/p>';

function insertInfo(nItem){

var currItem = nItem.firstChild.data.substring(0,1);
if (currItem == 'H' || currItem == 'S' || currItem == 'D')
{
var nNarrative = document.createElement('div');
nNarrative.innerHTML = overlays[currItem];
displayArea.appendChild(nNarrative);
var nImg = document.createElement('img');
nImg.src = imgSrc[currItem];
nImg.className = "image";
displayArea.appendChild(nImg);
var nCaption = document.createElement('div');
nCaption.className = "caption";
nCaption.innerHTML = imgCaption[currItem];
displayArea.appendChild(nCaption);
}
else {
displayArea.innerHTML = overlays[currItem];
}
}

function swapInfo(nItem){

if (nItem)
{
while (displayArea.lastChild)
{
displayArea.removeChild(displayArea.lastChild);
}
insertInfo(nItem);
}
else {
while (displayArea.lastChild)
{
displayArea.removeChild(displayArea.lastChild);
}
displayArea.appendChild(document.createTextNode("Move your mouse over a topic on the left for more information."));
}

}

function init(){

var nItems = document.getElementById('large_panel_list').getElementsByTagName('li');
for (i=0; i<nItems.length; i++)
{
nItems[i].onmouseover = function()
{
swapInfo(this);
}
nItems[i].onmouseout = function()
{
swapInfo();
}
}
displayArea = document.getElementById("large_panel_right");
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

li {cursor: pointer;}
.image {width: 300px; height: 247px;}


</style>
</head>
<body>
<ul id="large_panel_list">
<li>Hurricane resistant</li>
<li>Withstands everyday use</li>
<li>Settling isn't a problem</li>
<li>Doesn't rust</li>
<li>Inedible to termites</li>
<li>Rot proof, fungus proof, &amp; mildew resistant</li>
<li>UV resistant</li>
<li>Product service life</li>
</ul>

<br><br>

<div id="large_panel_right">
</div>
</body>
</html>

melissadiane
05-07-2009, 04:37 AM
12 Pack Mack. Your code works perfectly. It works when I apply my styles, too. It's online at http://www.permacastwalls.com/mack2.html. Thank you so much. I may be back if I have problems integrating it with the rest of the site.

For my own edification, do you know what was causing my code not to work?

-Melissa

melissadiane
05-07-2009, 04:39 AM
I'll have to at least change how the array is indexed. The first letters aren't unique after I add in everything.

melissadiane
05-07-2009, 05:44 AM
12 Pack Mack--

Your code works perfectly on its own. As soon as I tried putting it in my site, the same problem with images not showing in IE reoccurred. I tried both putting the javascript in a separate file and using it inline, with the same results each time.

I'll play with it some more.

12 Pack Mack
05-07-2009, 11:09 AM
Melissa:

Validate your markup. There are 35 errors, and some look like they could be preventing the page from working.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.permacastwalls.com%2Fwhy.php%3Fcontent%3Ddurable%23main&charset=(detect+automatically)&doctype=Inline&group=0

Your CSS validates, but with 7 warnings:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.permacastwalls.com%2Fwhy.php%3Fcontent%3Ddurable%23main&profile=css21&usermedium=all&warning=1&lang=en

melissadiane
05-08-2009, 02:24 AM
I fixed some of the markup errors... and *poof* it's working.

I don't know how or why, but I'm not touching it again.

The remaining markup errors are all dealing with embedding the flash movie. There's pages I don't feel like reading right now on how to get that to validate.

Thank you guys so much. You're my heroes.

-Melissa



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum