JS changing image with button

Question

js

var identbutton = document.getElementById('imagebutton');
var imag = document.getElementById('contentimage');
var runtext = function(){
    imag.style.background="url(../images/contimgtwo.jpg)";
}
identbutton.addEventListener("click",runtext,"false");

html

    <button id="imagebutton">click here to change images</button>
<img id="contentimage"></a>

css

#contentimage { 
display:block; 
background:url(../images/contimg.jpg);
top:1600px;
width:500px; 
height:400px; 
position:absolute;
} 

#contentimage:hover { 
    opacity:0.5; 
    cursor:crosshair;
}

I'm trying to make the image change when i press the button and so when you press the button the style of the image is suppose to change the image. This works and you can see the image change except all you see is a thin black border around the outline of the image and white space in the middle so you can't see the image. Also tried .className method instead of .style and didn't work

here: jsfiddle.net/sKdR3 wierd, i changed the images to an external website and it found the second image when i clicked but not when it was server side, any idea why that might be? — jn025
– jn025, Commented Nov 24, 2013 at 6:16

Charlie Martin · Accepted Answer · 2013-11-24 06:14:14Z

1

You should be setting the image using the src attribute of the img tag instead of the background property. If you want to use background property, use a div tag instead of an img tag. Here is an example using the src attribute..

http://jsfiddle.net/2tSbq/

Essentially, its the same as what you were doing except I set the inital value of the image directly in the html with..

<img src="https://www.somewebsite.com/someimage.jpg" id="contentimage">

And then update it using javascript...

imag.src = 'http://www.somewesbtie.com/anotherimage.jpg";

answered Nov 24, 2013 at 6:14

Charlie Martin

8,4363 gold badges39 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JS changing image with button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related