Change styled image through JavaScript

Question

I have a style specified in the head of my document. I specify the background image on a division but later on a need to change it if the user clicks on a link but everything I've tried to do refuses to work.

<style type="text/css">
            /*Some CSS*/
            .large {
                background: url('/images/artwork1.jpg') no-repeat;
}
</style.

<div class="large"></div>
<img id="main_image" alt="Image"/>
<img onclick="javascript:document.getElementById('main_image').sr‌c='/images/artwork2.‌jpg'; $('.large').css({'background-image':'url(/images/artwork2.jp‌g)';" alt="Change Image"/>

I tried taking the background image out of the style but clicking on a link didn't change it. I've tried JavaScript and jQuery.

"but everything I've tried to do refuses to work" – We do not see anything in provided question :( — Rayon
– Rayon, Commented Sep 26, 2016 at 12:41
Sticking the label javascript: at the front of your onclick function is pointless. There is no loop to label. It does not declare that you are writing code in JavaScript. — Quentin
– Quentin, Commented Sep 26, 2016 at 13:02
<img onclick — Images are not designed to be interactive elements. Using one as a button introduces a number of accessibility issues. Use a button instead. <button type="button" onclick="..."><img ...></button>. (and don't neglect the alt attribute) — Quentin
– Quentin, Commented Sep 26, 2016 at 13:04

Quentin · Accepted Answer · 2016-09-26 12:52:55Z

2

large

This is a type selector, it matches <large> elements.

A class selector begins with a .

$('.large').css({'background-image':'url(/images/artwork2.jpg)';

answered Sep 26, 2016 at 12:52

community wiki

Quentin

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

6 Comments

Richard Young Over a year ago

Can I mix JavaScript and jQuery into the same onclick?

Quentin Over a year ago

Eh? jQuery is a JavaScript library. i.e. it is nothing more than "JavaScript functions that other people wrote".

Richard Young Over a year ago

This the whole onclick statement. <img onclick="javascript:document.getElementById('main_image').src='/images/artwork2.jpg'; $('.large').css({'background-image':'url(/images/artwork2.jpg)';" The first bit used to work by now none of it works.

Quentin Over a year ago

Since there is no main_image element, you try to access the src property of null, throw an exception and the script stops.

Richard Young Over a year ago

I had used the main_image element but I didn't include that in the code I posted. I was able to change it until I added the jQuery.

|

Marcin · Accepted Answer · 2016-09-26 12:47:42Z

0

Add below code under click event

var element = document.querySelector(".large");

element.style.background = "url('/images/artwork1.jpg') no-repeat;
}";

answered Sep 26, 2016 at 12:47

Marcin

1,4921 gold badge14 silver badges27 bronze badges

1 Comment

Richard Young Over a year ago

I couldn't get it to work, I think it may have had something to do with all the nested quotes.

Collectives™ on Stack Overflow

Change styled image through JavaScript

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related