the image isn't visible

I'm having trouble with a JavaScript function that is supposed to display an image on hover, but it's only showing the placeholder symbol for missing images. What could be causing this issue?

Here is the code in question:

function createimg() 
{ 
   var img = new Image();
   img.src='images/imageoverlay.png';
   img.id = 'span1'; 
   img.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 file is located in the "images" subdirectory relative to this code file.

javascripthtmlcssimage

Answer №1

By setting img.style.display to none, you are instructing the image not to be displayed on the screen. This effectively hides the image, as per the specification which states that when set to 'none', the element will generate no box at all (refer to this CSS reference for more information).

Answer №2

If you encounter the "missing image symbol", try right-clicking on it and selecting "Properties". Check to see if the URL is correct, as it may be incorrect especially if the current page is located in a subfolder.

To ensure the image displays correctly, consider using the precise URL for the image:

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

Answer №3

When referencing the source in code, it is relative to the page's location.

However, when referenced in CSS, it becomes relative to the CSS file's location.

For instance, consider this structure:

/index.html
/css/styles.css
/scripts/app.js
/images/photo.jpg

In index.html:

<img src="images/photo.jpg">

In styles.css:

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

Take note of the "..", indicating a level up before reaching the "images" directory.

In app.js:

img.src = "images/photo.jpg";

Answer №4

After making a slight adjustment (replacing img.style.display='block';), your code performed perfectly for me on both Internet Explorer and Firefox. This could suggest that the image URL is inaccurate (it should be the path to the image relative to your page, or use an absolute reference) or possibly the function responsible for creating the image is not being called at all (or maybe it's being called in the wrong location, like within the <head></head> before the DOM is fully loaded).

Could you share how you are invoking the function?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Apache causes HTML download tag to malfunction

I have an HTML file that includes the following code: <a href="/Library/WebServer/Documents/file.zip" download="file.zip"> Download here </a> When I test this HTML page on Chrome, it successfully allows me to download the file. However, when ...

javascripthtmlapachewebserver

Is there a way for me to achieve a vertical page turning effect on a single page?

I am seeking to develop a unique calendar display consisting of 12 images that give the illusion of flipping up when clicked. While I am aware of turn.js, my knowledge of javascript is limited and I need guidance on how to proceed. Despite having a program ...

javascriptcss

Two selection options controlling filters. The first choice influences the data shown in the second filter

I've been struggling for hours to figure out how to build this functionality. My code seems to be getting close, but I'm having trouble passing my selection from the HTML back to the controller. Here's my Angular code: var Categories = Pa ...

javascriptangularjsdrop-down-menuunderscore.js

Guide to importing a JavaScript file into a different JavaScript file

I encountered an issue while trying to import a JavaScript file into my server-side JavaScript file. The function I need to run cannot be executed on the server side. Is there a method to successfully import my source code to the server-side JavaScript fil ...

javascripthtmljquerycssselenium-webdriver

Can a JSON interface be integrated into a c# application?

I have successfully created a basic C# application (.Net 4.0 + WPF) that is capable of sending and receiving JSON messages through TCP sockets. Now, I am looking to enable JavaScript applications on websites and PHP scripts to communicate with my app by s ...

c#javascript.netweb-servicesjson

Combining and dividing a caret button: A Bootstrap approach

The title I chose may not be very clear, but I struggled to find the right words. Currently, I have a vertical navigation bar with a small caret next to the text. When clicked, the button expands to display its contents. In the image above, you can see th ...

htmlcsstwitter-bootstrapbuttoncaret

Encountering a Runtime Exception while setting up a Client Component in the latest version of Next JS (v13.3

I am facing an issue with a component in my Next JS website. When I attempt to convert it into a Client Component, the page fails to load in the browser and I encounter the following unhandled runtime exception: SyntaxError: "undefined" is not va ...

javascripttypescriptnext.js

Why does the content spill out of the div when I add padding?

Can someone help me understand why when I add padding to the "header div," the content overflows the div? For instance, if I set it to 60%, instead of limiting to within the div, it takes up 60% of the entire page. I thought that % would be applied based o ...

htmlcssflexboxgrid

displaying the identical image from various perspectives

I have an arrow image that I need to display in different angles - top, left, bottom, right. I was considering what would be the best approach: 1: Changing the image direction via CSS and loading the main image <img src="a.png"> <img src="a.png" ...

androidhtmlcssoptimization

What is the process for converting an array of strings into a 2D array?

How can I transform the string ["0,1", "0,1", "1,2"] into an array of arrays like this: [[0,1], [0,1], [1,2]]? ...

javascriptarrays

Improper Placement of Bootstrap 5 Modal

I seem to be facing an unexpected issue where the Bootstrap 5 Modal and other components are displaying inside the sidebar menu instead of the main content area. Has anyone encountered this problem before? How can it be resolved? Here is a test example: ...

htmlcssbootstrap-5

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?

Currently, I am in the process of restructuring an application to ensure that component styles are separated from global styles using CSS modules. However, I have come across an issue where the styles are not being applied correctly. The original code sni ...

javascriptcssreactjssassnext.js

Covering the full width of the page, the background image

My struggle is with setting a background image to 100% width, as the image ends up getting cut off on half of the screen. The picture becomes wider than my display area. How can I resolve this issue so that the image width adjusts to fit the screen without ...

htmlcssimagetumblr

"Implementing a method to convert a varbinary array returned in JSON to an image and displaying it on an ImageView in an

need assistance in converting a varbinary array returned by a web service to an image and displaying it on an imageview. any help would be greatly appreciated. thank you. ...

androidarraysjsonimage

Modifying background with CSS and JavaScript

I am currently facing a dilemma and could really use some fresh perspectives on how to tackle this problem. var vaction = "{{vaction}}"; if(vaction === "Driving") document.getElementByClassName("cover").style.backgroundImage = url(https://media.na ...

javascripthtmlcss

Set the background color of the list item to a color that I choose

I am dealing with colors on my server side. I have a list structure in place. When loading the jsp, I need to assign specific colors to specific list items. The color from the server side may change and the assignment of colors to list items depends on the ...

javascriptjqueryhtml

Tips for concealing an input IP Address in React

Looking for suggestions on an IP Address mask input solution. The format might vary between 999.99.999.99 and 99.9.99.9, but react-input-mask does not support varying lengths. Any recommendations? ...

javascriptnode.jsreactjsinput-mask

How to leverage onpopstate in Vuejs without relying on vue-router

I am currently utilizing vue.js in conjunction with laravel, specifically incorporating a vue component within a laravel blade file. My aim is to trigger a page reload upon pressing the back navigation button to return to the previous page. The code I have ...

javascriptjquerylaravelvue.js

Add an element to the end within a separate div

I am facing a challenge where I need to rearrange ten divs with the class pcre within a single div identified by huge. The task involves moving the clicked div, which has the class pcre, to be placed at the end of the div with an id of huge using jQuery. ...

jqueryhtml

Utilize Bootstrap 4 classes to center divs horizontally in the container at the top, middle, and bottom

I'm having trouble finding the right way to center the div elements horizontally. .d-flex.flex-row.justify-content-center div.align-self-start p Top div.align-self-center p Middle div.align-self-end p Bottom http ...

htmlcssbootstrap-4