Dynamically change a css image with jquery -


i need change image in css when button clicked matches slide image.

the slide images populated using list, click through lists , relevant image come up.

here's css images

.hero li:nth-child(1) span {    background-image: url('http://image1.jpg'); } .hero li:nth-child(2) span {    background-image: url('http://image2.jpg'); } .hero li:nth-child(3) span {    background-image: url('http://image3.jpg'); } 

here's jquery i've got far

jquery(document).ready(function($) {   $(".trigger-wrapper").click(function () {     $("#menu-wrapper-left").stop().animate({width: 'toggle'});     $('#hero-container').css('background-image','url(http://dummyimage.com/600x400/000/fff.jpg)');     return false;   }); }); 

but static image , selects 1st image, need run along side slider, ideas?

here's fiddle, slider doesn't work on fiddle moment can see i'm truing achieve. http://jsfiddle.net/h863x/4/

if i've forgotten , need little more info, let me know.

your selector wrong - image applied span jquery code changing background-image of #hero-container.

take image off of span (last line of css) , should see container changing beneath it.


Comments

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -

javascript - Ajax jqXHR.status==0 fix error -