img not showing_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-08 00:59 出处：网络

I have the following javascript function to create an image that will show on hover of another image, but the image does not load... just the little symbol that goes in place when it cannot find an im

相关专题：css javascript

What is wrong with this code:

function createimg() 
{ 
   var img = new Image();
   img.src='images/imageoverlay.png';
   img.id = 'span1'; 
   img开发者_StackOverflow社区.style.zIndex = 10;  
   img.style.position = 'absolute';  
   img.style.display='none'; 
   img.style.top = '140px';  
   img.style.padding='10px'; 
   img.style.left='240px';    
   img.className ='dynamicSpan';  
   document.body.appendChild(img); 
}

The image sits in the images subdirectory to this where this code file sits.

If you set img.style.display to none no image will show up. Thats what you specified, this will hide your image (see css reference: none: The element will generate no box at all).

Right click the "missing image symbol", click "Properties". Look at the URL that it says - it's likely the URL is incorrect. If the current page is in a subfolder the URL might end up wrong.

You probably want to put the exact URL of the image:

img.src='http://yoursite.com/images/imageoverlay.png';

The source, when specified in code, is relative to the page.

When specified in CSS, it's relative to the CSS file.

For example, if you have the following structure:

/page.html
/css/style.css
/scripts/script.js
/images/image.png

In page.html:

<img src="images/image.png">

In style.css:

#image { background-image: url(../images/image.png) }

Note the ".."! That means go up a level first, before going down the "images" folder.

In script.js:

img.src = "images/image.png";

Your code worked fine for me (once I changed img.style.display='block';) in both IE and FF - so this either means the URL of the image is incorrect (it should be the path to the image relative to your page - or just use an absolute reference) or you're simply not calling the function that creates the image. (or you're calling it in the wrong place, like the <head></head> before the DOM is ready)

How are you calling the function?