Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 44
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    19
    Thanks
    10
    Thanked 1 Time in 1 Post

    innerHTML not showing images in IE

    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:

    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

  • #2
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    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).

    Code:
    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.

    Code:
    oRequest.setRequestHeader("User-Agent",navigator.userAgent);
    Again, why bother? Setting a User-Agent string for a simple GET request seems unnecessary to me.

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    19
    Thanks
    10
    Thanked 1 Time in 1 Post
    Thanks, bdl, for replying to my post.

    I changed the code to

    Code:
    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.)

  • #4
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    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.
    Code:
    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:
    Code:
    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:
    Code:
    function handleRequest() {
    
    }
    
    oRequest.open(...);
    oRequest.onreadystatechange= handleRequest;
    oRequest.send(null);

    Take a look at the XMLHttpRequest object methods & properties.

  • Users who have thanked bdl for this post:

    melissadiane (05-06-2009)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,023
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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:
    Code:
    <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!

  • Users who have thanked Old Pedant for this post:

    melissadiane (05-06-2009)

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,023
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    That is, you could have this in your JS code somewhere:

    Code:
    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:
    Code:
    <li onMouseover="showtext(0);" onMouseout="hidetext()">Hurricane resistant</li>
    No???

    Seems SO much simpler!
    Last edited by Old Pedant; 05-06-2009 at 06:51 AM. Reason: typos

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,023
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.)

  • #8
    New Coder
    Join Date
    May 2009
    Posts
    19
    Thanks
    10
    Thanked 1 Time in 1 Post
    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
    Code:
    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
    Code:
    <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
    Last edited by melissadiane; 05-06-2009 at 06:52 PM. Reason: typo

  • Users who have thanked melissadiane for this post:

    TinyScript (05-06-2009)

  • #9
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    gotta watch those commas in your Array. You needed to add \ before them to make it work.

    Code:
    <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.

  • Users who have thanked TinyScript for this post:

    melissadiane (05-06-2009)

  • #10
    New Coder
    Join Date
    May 2009
    Posts
    19
    Thanks
    10
    Thanked 1 Time in 1 Post
    Thanks TinyScript for pointing that out. Unfortunately, it still didn't fix the problem.

  • #11
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    melissadiane:

    This works for me, as is, in IE6 and FF3:
    Code:
    <!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>
    Last edited by 12 Pack Mack; 05-06-2009 at 08:14 PM.

  • The Following 2 Users Say Thank You to 12 Pack Mack For This Useful Post:

    melissadiane (05-06-2009), Old Pedant (05-06-2009)

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,023
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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...

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,023
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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:
    Code:
    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:
    Code:
    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.

  • #15
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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


  •  
    Page 1 of 3 123 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •