Alter the background image of a DIV based on the selected menu item

Question

Alter the background image of a DIV based on the selected menu item

I am working on a project that involves a div element with the class "jumbotron" which currently has a background image applied to it.

Additionally, I have a menu consisting of 6 items that I would like to interact with.

My goal is to dynamically change the background image of the jumbotron based on which menu item is clicked. Each menu item corresponds to a unique image that should replace the current background of the .jumbotron element.

Here is the basic structure of my HTML:

<div class="jumbotron">
    
</div>

    <ul class="nav nav-tabs">
        <li><a href="#" data-toggle="tab">Item 1</a></li>
        <li><a href="#" data-toggle="tab">Item 2</a></li>
        <li><a href="#" data-toggle="tab">Item 3</a></li>
        <li><a href="#" data-toggle="tab">Item 4</a></li>
        <li><a href="#" data-toggle="tab">Item 5</a></li>
        <li><a href="#" data-toggle="tab">Item 6</a></li>
    </ul>

In the CSS file, you can find the styling for the .jumbotron class:

.jumbotron {
  background-image: url(../images/item1.jpg);
}

javascript jquery css

Answer 1

Answer №1

Incorporate the use of css and :target to manipulate <img> elements on your website.

.jumbotron {
  width: 100%;
  height: 100%;
  display: block;
}

.jumbotron img {
  width: calc(100vw);
  height: calc(100vh);
}

.jumbotron :not(:target) {
  display: none;
}

img:target {
  display: block;
}

.nav,
.jumbotron {
  position: absolute;
}

<div class="jumbotron">
  <img src="https://lorempixel.com/400/400/cats" id="cats">
  <img src="https://lorempixel.com/400/400/sports" id="sports">
  <img src="https://lorempixel.com/400/400/animals" id="animals">
  <img src="https://lorempixel.com/400/400/nature" id="nature">
  <img src="https://lorempixel.com/400/400/abstract" id="abstract">
  <img src="https://lorempixel.com/400/400/city" id="city">
</div>

<ul class="nav nav-tabs">
  <li><a href="#cats" data-toggle="tab">Item 1</a></li>
  <li><a href="#sports" data-toggle="tab">Item 2</a></li>
  <li><a href="#animals" data-toggle="tab">Item 3</a></li>
  <li><a href="#nature" data-toggle="tab">Item 4</a></li>
  <li><a href="#abstract" data-toggle="tab">Item 5</a></li>
  <li><a href="#city" data-toggle="tab">Item 6</a></li>
</ul>

Answer 2

Incorporate the use of css and :target to manipulate <img> elements on your website.

.jumbotron {
  width: 100%;
  height: 100%;
  display: block;
}

.jumbotron img {
  width: calc(100vw);
  height: calc(100vh);
}

.jumbotron :not(:target) {
  display: none;
}

img:target {
  display: block;
}

.nav,
.jumbotron {
  position: absolute;
}

<div class="jumbotron">
  <img src="https://lorempixel.com/400/400/cats" id="cats">
  <img src="https://lorempixel.com/400/400/sports" id="sports">
  <img src="https://lorempixel.com/400/400/animals" id="animals">
  <img src="https://lorempixel.com/400/400/nature" id="nature">
  <img src="https://lorempixel.com/400/400/abstract" id="abstract">
  <img src="https://lorempixel.com/400/400/city" id="city">
</div>

<ul class="nav nav-tabs">
  <li><a href="#cats" data-toggle="tab">Item 1</a></li>
  <li><a href="#sports" data-toggle="tab">Item 2</a></li>
  <li><a href="#animals" data-toggle="tab">Item 3</a></li>
  <li><a href="#nature" data-toggle="tab">Item 4</a></li>
  <li><a href="#abstract" data-toggle="tab">Item 5</a></li>
  <li><a href="#city" data-toggle="tab">Item 6</a></li>
</ul>

Answer 3

Answer №2

To display different background images on click, I suggest storing the image path in a data attribute and then accessing it when the element is clicked.

$('.nav-tabs a').on('click',function(e) {
  var bg = $(this).attr('data-bg');
  $('.jumbotron').css('background-image','url('+bg+')');
})

.jumbotron {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background: 0 0 no-repeat / cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron"></div>
<ul class="nav nav-tabs">
  <li><a href="#" data-toggle="tab" data-bg="http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg">Item 1</a></li>
  <li><a href="#" data-toggle="tab" data-bg="http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg">Item 2</a></li>
  <li><a href="#" data-toggle="tab" data-bg="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg">Item 3</a></li>
</ul>

Answer 4

To display different background images on click, I suggest storing the image path in a data attribute and then accessing it when the element is clicked.

$('.nav-tabs a').on('click',function(e) {
  var bg = $(this).attr('data-bg');
  $('.jumbotron').css('background-image','url('+bg+')');
})

.jumbotron {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background: 0 0 no-repeat / cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron"></div>
<ul class="nav nav-tabs">
  <li><a href="#" data-toggle="tab" data-bg="http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg">Item 1</a></li>
  <li><a href="#" data-toggle="tab" data-bg="http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg">Item 2</a></li>
  <li><a href="#" data-toggle="tab" data-bg="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg">Item 3</a></li>
</ul>

Answer 5

Answer №3

To change the background image when elements are clicked, simply create a click handler for each element.

If you need to access additional information about the tabs, consider using data attributes that can be easily referenced (such as for URLs).

$(".nav.nav-tabs li a").click(function(){
  $(".jumbotron").css("background-image", "url('"+$(this).data("url")+"')");
});

.jumbotron {
  background-image: url(../images/item1.jpg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron">    

</div>

           <ul class="nav nav-tabs"> 
                <li><a href="#" data-toggle="tab" data-url="../images/item1.jpg">Item 1</a></li>   
                <li><a href="#" data-toggle="tab" data-url="../images/item2.jpg">Item 2</a></li>
                <li><a href="#" data-toggle="tab" data-url="../images/item3.jpg">Item 3</a></li>     
                <li><a href="#" data-toggle="tab" data-url="../images/item4.jpg">Item 4</a></li>
                <li><a href="#" data-toggle="tab" data-url="../images/item5.jpg">Item 5</a></li>
                <li><a href="#" data-toggle="tab" data-url="../images/item6.jpg">Item 6</a></li>
            </ul>

Answer 6

To change the background image when elements are clicked, simply create a click handler for each element.

If you need to access additional information about the tabs, consider using data attributes that can be easily referenced (such as for URLs).

$(".nav.nav-tabs li a").click(function(){
  $(".jumbotron").css("background-image", "url('"+$(this).data("url")+"')");
});

.jumbotron {
  background-image: url(../images/item1.jpg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron">    

</div>

           <ul class="nav nav-tabs"> 
                <li><a href="#" data-toggle="tab" data-url="../images/item1.jpg">Item 1</a></li>   
                <li><a href="#" data-toggle="tab" data-url="../images/item2.jpg">Item 2</a></li>
                <li><a href="#" data-toggle="tab" data-url="../images/item3.jpg">Item 3</a></li>     
                <li><a href="#" data-toggle="tab" data-url="../images/item4.jpg">Item 4</a></li>
                <li><a href="#" data-toggle="tab" data-url="../images/item5.jpg">Item 5</a></li>
                <li><a href="#" data-toggle="tab" data-url="../images/item6.jpg">Item 6</a></li>
            </ul>

Answer 7

Answer №4

To handle the click event for the navigation container using jQuery, I would determine which specific element was clicked and then set the background-image property for the .jumbotron element accordingly.

In simpler terms:

$('.jumbotron').click(function() {
  var target = $(this).attr('id');
  var background;
  
  switch (target) {
    case 'someId-1':
      background = 'some-url';
      break;
    case 'someId-2':
      background = 'some-url';
      break;
    case 'someId-3':
      background = 'some-url';
      break;
    case 'someId-4':
      background = 'some-url';
      break;
    case 'someId-5':
      background = 'some-url';
      break;
    case 'someId-6':
      background = 'some-url';
      break;
  }
  
  $('.jumbotron').css('background-image', 'url(' + background + ')')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="jumbotron">    

</div>

  <ul class="nav nav-tabs"> 
    <li><a href="#" id="someId-1" data-toggle="tab">Item 1</a></li>   
    <li><a href="#" id="someId-2" data-toggle="tab">Item 2</a></li>
    <li><a href="#" id="someId-3" data-toggle="tab">Item 3</a></li>     
    <li><a href="#" id="someId-4" data-toggle="tab">Item 4</a></li>
    <li><a href="#" id="someId-5" data-toggle="tab">Item 5</a></li>
    <li><a href="#" id="someId-6" data-toggle="tab">Item 6</a></li>
  </ul>

Alternatively, you could create different CSS classes for each image and toggle between them based on the clicked link.

Answer 8

To handle the click event for the navigation container using jQuery, I would determine which specific element was clicked and then set the background-image property for the .jumbotron element accordingly.

In simpler terms:

$('.jumbotron').click(function() {
  var target = $(this).attr('id');
  var background;
  
  switch (target) {
    case 'someId-1':
      background = 'some-url';
      break;
    case 'someId-2':
      background = 'some-url';
      break;
    case 'someId-3':
      background = 'some-url';
      break;
    case 'someId-4':
      background = 'some-url';
      break;
    case 'someId-5':
      background = 'some-url';
      break;
    case 'someId-6':
      background = 'some-url';
      break;
  }
  
  $('.jumbotron').css('background-image', 'url(' + background + ')')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="jumbotron">    

</div>

  <ul class="nav nav-tabs"> 
    <li><a href="#" id="someId-1" data-toggle="tab">Item 1</a></li>   
    <li><a href="#" id="someId-2" data-toggle="tab">Item 2</a></li>
    <li><a href="#" id="someId-3" data-toggle="tab">Item 3</a></li>     
    <li><a href="#" id="someId-4" data-toggle="tab">Item 4</a></li>
    <li><a href="#" id="someId-5" data-toggle="tab">Item 5</a></li>
    <li><a href="#" id="someId-6" data-toggle="tab">Item 6</a></li>
  </ul>

Alternatively, you could create different CSS classes for each image and toggle between them based on the clicked link.

Answer 9

Answer №5

Super simple. Just switch out a CSS class. You can customize the css later to adjust picture size, location, actual image, without having to modify the code.

<html>
<head>

<style>
.btnOne {
     background-image: url('obi.jpg');
}
.btnTwo {
     background-image: url('luke.jpg');
}
.picStyle {
     width: 75px;
     height: 75px;
}

</style>
</head>
<body>

<div id="btn1" onclick="changeIt ( this )">Button 1</div>
<div id="btn2" onclick="changeIt ( this )">Button 2</div>
<div id="pic" class="btnOne picStyle"></div>

<script>

function changeIt ( elem ) {
    let pic = document.getElementById ( 'pic' );
    if ( elem.id === 'btn1' ) {
        pic.classList = [ 'btnOne', 'picStyle' ];
    } else {
        pic.classList = [ 'btnTwo', 'picStyle' ];
    }
}
</script>

</body>
</html>

Answer 10

Super simple. Just switch out a CSS class. You can customize the css later to adjust picture size, location, actual image, without having to modify the code.

<html>
<head>

<style>
.btnOne {
     background-image: url('obi.jpg');
}
.btnTwo {
     background-image: url('luke.jpg');
}
.picStyle {
     width: 75px;
     height: 75px;
}

</style>
</head>
<body>

<div id="btn1" onclick="changeIt ( this )">Button 1</div>
<div id="btn2" onclick="changeIt ( this )">Button 2</div>
<div id="pic" class="btnOne picStyle"></div>

<script>

function changeIt ( elem ) {
    let pic = document.getElementById ( 'pic' );
    if ( elem.id === 'btn1' ) {
        pic.classList = [ 'btnOne', 'picStyle' ];
    } else {
        pic.classList = [ 'btnTwo', 'picStyle' ];
    }
}
</script>

</body>
</html>

Answer 11

Answer №6

By naming your images as item1, item2, and so forth, you can execute the following code successfully:

$(document).on("click", "a[data-toggle]", function() {
  var selectedImage = $(this).text().replace(" ", "").toLowerCase();
  alert(selectedImage);
  $(".jumbotron").css("background-image", 'url(../images/' + selectedImage + '.jpg)');
})

Answer 12

By naming your images as item1, item2, and so forth, you can execute the following code successfully:

$(document).on("click", "a[data-toggle]", function() {
  var selectedImage = $(this).text().replace(" ", "").toLowerCase();
  alert(selectedImage);
  $(".jumbotron").css("background-image", 'url(../images/' + selectedImage + '.jpg)');
})

Alter the background image of a DIV based on the selected menu item

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Utilize Custom Field to incorporate background videos from websites like Youtube or Vimeo into your content

Could somebody provide clarification on the functions being called in the Angular Test Code, specifically evaluate() and dragAndDrop()?

Error encountered: The use of 'import' and 'export' is limited to 'sourceType: module' when attempting to install Tweakpane

How can one create custom JavaScript UI controls for a UWP application?

What is the best way to integrate an AJAX callback into the stop condition of a `do while` loop?

The body's width is more compact compared to one of my containers in HTML/CSS

Error: The AJAX request encountered an unexpected token in the JSON response

What value does a variable have by default when assigned to the ko.observable() function?

Transition effortlessly between web pages with subtle fading effects

Utilizing ReactJS: Expanding my knowledge of updating array object indexes dynamically when removing elements

Getting the full referrer URL can be achieved by using various methods depending

The trim() method in Vue.JS does not properly handle trimming a passed string

What is the best way to distinguish elements in the same HTML using Angular Material?

The REST API endpoint links for Timestamp are displaying a 404 error message indicating they cannot be

Express server experiencing a conflict with authentication sessions

The Bootstrap carousel comes with a brilliant feature! Conceal those 'previous' and 'next' buttons when you reach the first and last slide. However, it seems like the 'slide' event is not functioning as

Error encountered when running the production build server for android in Meteor: TypeError - Unable to access property 'slice' of null

Avoid matching the regular expression

Hover over the image with some padding placed around it to see

Launching a URL in a pop-up window with customized title and address bar