Develop Reference

Html Can you run css code from javascript?

I am making a canvas on my website that you can draw on. To achive this effect I draw a fillRect everytime the mouse moves, at the mouseposition. Everithin works fine but when i try to add a background image, it hides everything. I tried using canvas.drawImage();
Then I found that you can add Background image from CSS, using: background:url(pic1.jpg);
This workes fine, but I dont want to the image to be there from load, but load when the user clickes a button. Anny Idea how to do this? Can I call the CSS from Java like you can from HTML, or is there another way. Thanks for answers

You can use JavaScript to programmatically set the CSS that defines the background.
var img = "some_image.png";
element.style.backgroundImage = "url(" + img + ")";
Make sure to change the element with the actual HTML element you want to set the background image on.

You can use HTML DOM to do this like the code below
<button type="button"
onclick="document.getElementById('id').style.backgroundImage = "url('image.png')"">
Click Me!</button>

You need something like that:
handling the event (in thi example click)
Append the new css property to the element target
function appendImg() {
document.getElementById('result').style.backgroundImage = 'url(http://4.bp.blogspot.com/-Q13U4dlElI8/VSW78iey57I/AAAAAAAAI7k/HO3zYPaRYso/s1600/img_john_lennon2-500.jpg)';
}
#result {
width: 500px;
height: 400px;
background-size: 100% auto;
background-repeat: no-repeat;
visibility: visible;
}
<button onclick="appendImg()">Imagine</button>
<hr>
<div id="result"></div>

Zoom on an image inside an iframe not working on IE and Google Chrome

I have an image where the zoom works on all the browsers, but when i open it inside an iframe, the zoom stops working in IE and Google Chrome, but works fine in Firefox.
How do I fix this issue?
The link to the image - found it on the internet.
<iframe width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" src="http://www.dobble.net.au/help/template.jpg" style="align:left;vertical-align:top;border-width:0px;" name="AisIFrame"></iframe>
http://jsfiddle.net/qL75khzg/

Even Opera Browser is affected of the same issue. It is an issue that affects IE and Chromium derived browser (and perhaps not only). Chrome and Opera are both derived from Chromium browser project. After testing the issue on IE, FF, Op, Ch, Firefox is the only one that behaves right.
I've sent to respective developers (but MS) a bug notice with the issue more times in the past, but as far as I can see the issue is still there unfortunately.
Anyway to try to solve the problem insert into the iframe another html/css page instead loading the image directly into the iframe and load the image into the html page within the html tag "img". Than style that tag with the css style sheet as you wish giving the img the size you need. Also, depending on what you need, you may evaluate to wrap the img tag into a styled div to contain img size. If properly done de css part, the img will match in size to the container div scaling proportionally, without shrinking/deforming.
Done that let's try now the implementation of the zoom function.
Well for this it is needed a javascript event attached to the element that you want to zoom (the div for ex.). The event would be "onclick" (or "click" if you want to use addEventListener js method. Also you can zoom even without any js using ":over" css pseudoclass (in the example is used once to compare the different behavior).
The following example will explicate how the whole trick works:
function zoom(el)
{
var checksize = el.style.width == "100%";
if (checksize)
{
el.style.width = "";
el.style.height = "";
}
else
{
el.style.width = "100%";
el.style.height = "100%";
}
}
.h
{
float: left;
width: 400px;
height: 150px;
background-color: blue;
}
.v
{
float: left;
height: 400px;
width: 150px;
background-color: yellow;
}
img
{
height: 100%;
width: 100%;
object-fit: contain;
}
.v:hover
{
float: left;
width: 100%;
height: 100%;
background-color: blue;
}
<div class="v" onclick="zoom(this)">
<img src='http://download.4-designer.com/files/20150801/It-is-said-that-there-is-no-second-wave-of-copyright-free-image-collection-54650.jpg'/>
</div>
<div class="h" onclick="zoom(this)">
<img src='http://download.4-designer.com/files/20150801/It-is-said-that-there-is-no-second-wave-of-copyright-free-image-collection-54650.jpg'/>
</div>
Also remember that the iframe is not the only html tag that allows you to show an external content (the image in this case). In fact you can use the 'img' tag itself, the 'embed' tag, the 'object' tag and even the 'div' tag or other tags that accept the background to be styled with an image. In this last case you can show an image into it by setting its 'background-image' css style property to the image you want to show into it.

Changing image on hover

I need a menu consisting of images and the images should change when someone hover around it.
HTML
<div id="menu" >
<img src="images/about.png" alt="logo" />
</div>
CSS
#menu {
margin-left : 353px;
margin-top : -70px;
padding-bottom : 16px;
}
#home {
background : transparent url(images/about.png);
z-index : 1;
}
#home:hover {
background : url(images/aboutR.png);
z-index : 2;
}
The problem I am facing is that when I hover around the menu item, the image to be displayed on hover is displayed at the back of the old image. Moreover, the hover background image displayed is very small in width and height. Please help out. Thanks

As previously stated, no need for a JS solution.
Another way of doing it is by loading both images and hiding/showing them with the :hover event. Something like this:
HTML:
<a id="home"><img class="image_on" src="images/about.png" alt="logo" /><img class="image_off" src="images/aboutR.png" alt="logo" /></a>
CSS:
.image_off, #home:hover .image_on{
display:none
}
.image_on, #home:hover .image_off{
display:block
}

Here is a js/jquery solution
//should go inside your <head> tag
function onHover()
{
$("#menuImg").attr('src', 'images/aboutR.png');
}
function offHover()
{
$("#menuImg").attr('src', 'images/about.png');
}
html:
<div id="menu" >
<a href="#" id="home">
<img id="menuImg" src="images/about.png" alt="logo" onmouseover="onHover();"
onmouseout="offHover();" />
</a>
</div>
Here is a working example. Happy coding :)

Place this code just before the closing body tag,
<script type='text/javascript'>
$(document).ready(function(){
$(".home").hover(
function() {$(this).attr("src","images/aboutR.png");},
function() {$(this).attr("src","images/about.png");
});
});
</script>
place the class home in the img tag. Done. Works perfectly.

This works:
<html>
<head>
<title>Example</title>
<style type="text/css">
#menu {
width: 400px;
height: 142px;
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#menu:hover {
background: url(lPr4mOr.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="menu">
<img src="lPr4m.png" alt="logo" />
</div>
</body>
</html>
(Image names changed for my convenience making the page.)

Remove the img tag, and set the width and height of #home (and any other menu item) to the width and height of the images.
Also, set the content to whatever the alt of the image would be (for accessibility purposes), and then set the text-indent property so it's moved offpage.
Currently, when you hover, it's changing the background image, but the img tag is on top, and it always will be.
HTML
<div id="menu" >
Home
</div>
CSS
#menu{
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#home{
background:transparent url(images/about.png);
width: 400px;
height: 142px;
z-index:1;
text-indent: -9999em;
}
#home:hover{
background:url(images/aboutR.png);
z-index:2;
}

you could do a:hover img{display:none} which would get rid of the img, idk about size issue bc you didnt specify the sizes. if i were you i'd either ditch the img element, use it as background-image for a element, then change it on :hover. or if you want the img element, use the clip property following the same principles as above

You're calling <img src="images/about.png" alt="logo" /> twice, once in the html and once in the css. I suggest deleting the html and strictly using css background image. You don't need the z-index either.

you need to use position rule while using a z-index rule. Try adding position:relative where you used z-index.

are you just trying to make a simple image rollover? without seeing a working example i can't make out exactly what you're trying to do, but image rollovers are simple to do with CSS sprites, no jquery needed and this makes for a much more bulletproof website. it also makes your website respond faster because the default and over state images are the same image, no preload code necessary.
if you need a mapped image (rather than a full swap out) this can be accomplished with a background image, a container div and png-24 graphics (javascript required to make png-24s work in IE6, but who cares about supporting IE6 anymore anyway?).
a good way to change out nav images without resorting to javascript is by using the background-position property, like so:
// define your container element
#nav-home {
margin: 20px 5px;
height: 15px;
width: 40px;
}
// use a descendant selector to style the <a> tag
#nav-home a {
background-image: url("/images/buttons-nav.gif");
display: block; // THIS IS VERY IMPORTANT!!
background-position: 0 0; // the first number is horizontal placement, the second is vertical placement. at 0 0 it is positioned from the top left corner
height: 15px;
}
// this is where you change the position of the background for the hover state
#nav-home a:hover {
background-position: -20px 0; //this moved it 20px to the right
}
and your html code would look like this:
<div id="nav-home"><img src="/images/transparent.gif" alt="home" height="100%" width="100%;">
<!-- uses a 1px transparent gif to "hold" the place of the actual clicked item -->
your image would actually contain BOTH on and off states, like this: http://www.w3schools.com/css/img_navsprites_hover.gif then all you are doing is moving the image to one side to show the :hover state. (code example at http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav). you are basically making a window with a container div, then only showing a portion of the actual background image.
also, stay away from using :hover on anything but an tag as not all browsers support use of :hover on block level elements.

And now for the simple way:
<img id=logo src=img1.png onmouseover=logo.src='img2.png' onmouseout=logo.src='img1.png'>
This HTML will change the image to a new picture on mouse over and turn it back to the first picture on mouse out.

DIV with text over an image on hover

OKay first off this is really really similiar to the http://dribbble.com homepage.
In the simplest form possible. I have an image, and i'm trying to CSS it so that when i hover over the image, a DIV shows up with some text and a partially transparent background color.
I have no idea how to do this..

Here is a start. IE6 won't do this, unless you make the parent an anchor (a).
HTML
<div class="container">
<img src="something.jpg" alt="" />
<div>some text</div>
</div>
CSS
.container div {
display: none;
opacity: 0.7; /* look into cross browser transparency */
}
.container:hover div {
display: block;
}

#alex, I think he wants the text to appear over the image, not under it. Two ways to fix this:
Add position:absolute to the div containing the text.
Use a background-image instead of an img tag.
I'd go with 1, as it's better semantically and better for accessibility to use img tags for content-bearing images.

If what you want to obtain is an effect like that on Dribbble page, then you do not need to create a div over an img.
It's sufficient to have 2 versions of the image, one normal and one desaturated and with luminosity increased (or something like that, to give the impression of "transparency").
Now you create a div with the image as background and on mouseover you switch background and add the text.
On mouseout you revert the changes.
EDIT: Of course in practice you will dynamically assign the images name (e.g. with PHP), but that's another story. You may even automagically generate the "transparent" image by using GD libraries I guess.
A little example:
CSS:
.squareImg
{
display: block;
width: 100px;
height: 100px;
background-image: url("100x100.jpg");
}
.squareImgOver
{
display: block;
width: 100px;
height: 100px;
background-image: url("100x100transp.jpg");
}
HTML
<div id="mydiv" class="squareImg" onmouseover="writeText();"
onmouseout="eraseText()"></div>
JS
function writeText()
{
var d = document.getElementById("mydiv");
d.className = "squareImgOver";
d.innerHTML = "something here!";
}
function eraseText()
{
var d = document.getElementById("mydiv");
d.className = "squareImg";
d.innerHTML = "";
}
</script>

I suggest using jQuery as it's easy to say "mouseover" triggers another thing to show up.

How do I remove the gray border that surrounds background images?

I've come across an interesting problem in the following line of code:
<img style="background-image:url(Resources/bar.png); width: 300px; height: 50px;"/>
In Safari (at least), a gray border surrounds the 300x50px area. Adding style="border: none;" doesn't remove it. Any ideas?
Thanks.
Mike

So, you have an img element that doesn't have a src attribute, but it does have a background-image style applied.
I'd say that the gray border is the 'placeholder' for where the image would be, if you'd specified a src attribute.
If you don't want a 'foreground' image, then don't use an img tag - you've already stated that changing to a div solves the problem, why not go with that solution?

You can also add a blank image as a place holder:
img.src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='
This should do the trick!

Actually, this seems to work at least on Chrome:
img {
content: "";
}

The following will use css to set the src to a tiny transparent image which solves the src attribute issue while maintaining control from image:
content:url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
My overall approach is to define the following in my reset.css, then use a class to provide the actual image and control it. This behaves just like an img, but is entirely css controlled.
img {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
*display: inline;
vertical-align: middle;
*
vertical-align: auto;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
box-sizing: border-box;
}
img:not([src]) {
content: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}
.myuniqueimage {
background-image: url('../images/foobar.png');
height: 240px;
}
Thanks to +programming_historian and +binnyb for the data:image tip

try <img border="0" />
That should do the trick.
EDIT
Sorry I see you are doing something very wrong.. you are setting a background image on a img tag.. that doesn't really make sense...
instead of a imagetag use a
<div style="background-image: url(Resources/bar.png);"></div>
or if it is a image you want in that area use a
<img src="Resources/bar.png" border="0" Width="500px" Height="300" />

img tags need a src attribute.
e.g.,
<img src="Resources/bar.png" alt="bar" width="300" height="50" />
But img is only for inline (foreground) images. If you actually want the image to be a background of something, you need to apply the style to the actual element you want it to be the background of:
<div style="background-image:url(Resources/bar.png);">...</div>

Tried setting the border to 0px?
EDIT: Yes, you are meant to have background images in the css of another class. Doing it in div or in the body tag (depending what your trying to do) will work. It also stops the background image being a element in itself which would screw the flow of the elements on the page and mess your positioning up.
<div class="myDivClass">content to go on TOP of the background image</div>
CSS:
.myDiVClass
{
background: url(Resources/bar.png) no-repeat;
width: 300px;
height: 50px;
}
or
<div class="myDivClass" style="background: url(Resources/bar.png) no-repeat; width: 300px; height: 50px;">content to go on TOP of the background image</div>
It's best to keep CSS seperate as it otherwise defeats part of the point though.

I had a similar issue where my initial HTML had an IMAGE tag with no source. My Javascript determined which image to show. However before the image was loaded the user saw the placeholder box.
<img id="myImage">
My fix was to update the initial image tag CSS to
#myImage {
display:none;
}
And then used a JQuery to show it once its content was loaded.
$('#myImage')
.attr('src', "/img/" + dynamicImage + '.png')
.fadeTo(500, 1);

Try setting this instead of background-image:
background: url(Resources/bar.png) no-repeat;

if is happening only in Safari and not in other browsers try to reset the browser CSS using something like YUI CSS RESET
The correct way it would be to separate the css from code and to have a CSS class for the image.
<img src='whatever.png' alt='whatever' class='className' />
and in the css to define what className looks like.
,className {border:0;}

I know this is an old question but I found this useful..
In the case that your Resources/bar.png is a foreground image in the form of a sprite, it makes sense to use an img tag rather than a div. When you do this it can help to have a 1px transparent image file which you use for the src attribute, then set the background image as you do here e.g.
<img src="transparent.png" style="background: url(sprite.png) x y" />
Here you set x and y to be the pixel position on the sprite that you want the image to start at. This technique is also explained at: http://www.w3schools.com/css/css_image_sprites.asp
Of course the downside of this is that there is an extra request, but it you're always using the same transparent image for you sprites it's not a massive deal.

Try this one, it worked for me(on chrome and Safari). That was not the border but the shadow, so please add this line to the tag:
{-webkit-box-shadow:none;}
Hope it works for you too.

add an empty src="" to your image component if your using as a background-image in css the square will disappear
<image class=${styles.moneyIcon} src="" ></image>