CODEWITHSUNDEEP
jquery
Michael Harmon
Michael Harmon

Reputation: 43

Change background-image when image clicked

I'll try to make this as specific as possible. I have a set of 9 portfolio icons on my web site. When clicking one -- I would like the "background-image" of a div to change above them. I would preferably like it to fade-in.

This is the code for the portfolio icons:

<ul class="gallery">
    <li><a href="#" class="thumb"><span><img src="images/work-icon-1.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-2.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-3.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-4.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-5.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-6.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-7.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-8.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-9.jpg" alt="" /></span></a></li>
</ul>

This is the div that I need changed depending on which icon they click:

<div class="work-header"></div>

Any help would be greatly appreciated.

Upvotes: 0

Views: 1504

Answers (2)

uɥƃnɐʌuop
uɥƃnɐʌuop

Reputation: 15103

Fading in backgrounds can indeed be much more complex, but it seems that in your situation you can use a little different approach by simply fading in an absolute positioned div behind the elements in question. This fiddle demonstrates this. Essentially, the necessary jquery is:

$("#btn1").click(function() {
    $("#img1").fadeIn(1000);
    return false;
});

But of course you'd want to expand that to better handle a list of buttons and fade out previously clicked "backgrounds". You could store the id of the div to fade in a data-bgElementId attribute (or whatever) of the <a> tag, then use that in the click handler:

$(".thumb").click(function() {
    var bgElementId = $(this).attr("data-bgElementId"),
        bgElement = $("#" + bgElementId);

    bgElement.fadeIn(1000);
    $(".allBGs").not(bgElement).fadeOut(1000);
    return false;
});

Upvotes: 1

bricker
bricker

Reputation: 8941

What do you want the background-image to change to?

$('.thumb').click(function() {
  $('#word-header').css('background-image', 'url("img.jpg")');
});

Is the basic syntax. Elaborate a little more and I'll update this.

edit You can store the background-image as an HTML5 'data-' attribute on each icon, like so:

<img src="images/work-icon-1.jpg" alt="" data-header-img="images/header-1.jpg" />

And then do the jQuery like this:

$('.thumb').click(function() {
  $('#word-header').css('background-image', "url("+$(this).attr('data-header-img')+")");
});

Fading the images is more complex. You can find a lot of solutions on Google, or hopefully someone will take the time here to show you how.

Upvotes: 1

Related Questions