Question 295768 in Javascript Question posted in
A very good W3school tutorial can be found here.

Newcomer to JavaScript – stuck on first assignment

I have this super easy html and CCS file, with 1 big frame (div id = image) and 3 smaller frames (img class = preview). The task I am trying to accomplish using JavaScript for the first time (part of an online class, first JavaScript homework) is to make the text and the background image of the big frame adjust according to what I am hovering over the mouse. If I am hovering over one of the 3 smaller frames, their background image and their alt should appear in the big frame.

Using the code below, I was able to make the alt text appear, so that works fine. But I just cannot figure out the background image. I believe the beginning of the code is correct (document.getElementById(‘image’).style.backgroundImage = ‘url()), but if I add one of the three src into the url, only that picture shows as I hardcoded it. The teacher mentioned that we should use a variable in the url(), but I just don’t know which one.

What is my next step for this assignment?

function upDate(element) {
  document.getElementById('image').innerHTML = element.alt;
  document.getElementById('image').style.backgroundImage = 'url()';

}

function unDo(element) {

}
body {
  margin: 2%;
  border: 1px solid black;
  background-color: #b3b3b3;
}

#image {
  line-height: 650px;
  width: 575px;
  text-align: center;
  height: 650px;
  border: 5px solid black;
  margin: 0 auto;
  margin-bottom: 25px;
  background-color: #8e68ff;
  background-image: url('');
  background-repeat: no-repeat;
  color: #FFFFFF;
  background-size: 100%;
  font-size: 150%;
}

.preview {
  width: 10%;
  margin-left: 17%;
  border: 10px solid black;
}

img {
  width: 95%;
}
<div id="image">
  Hover over an image to display the alt text.
</div>

<img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover="upDate(this)" onmouseleave="document.getElementById('image').innerHTML='Hover over an image';">

<img class="preview" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover="upDate(this)" onmouseleave="document.getElementById('image').innerHTML='Hover over an image';">

<img class="preview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy" onmouseover="upDate(this)" onmouseleave="document.getElementById('image').innerHTML='Hover over an image';">

I tried to use all the classes, divs, if statements (changing the classes names), searching internet, W3school and other resources … I could not find anything.

Tags:

4

Answers


  1. 0

    You can read the url using element.src. And, Template literals is how you can use a variable in a string in js.

    function upDate(element) {
  document.getElementById('image').innerHTML = element.alt;
  document.getElementById('image').style.backgroundImage = `url(${element.src})`;
}

function unDo(element) {

}
    body {
  margin: 2%;
  border: 1px solid black;
  background-color: #b3b3b3;
}

#image {
  line-height: 650px;
  width: 575px;
  text-align: center;
  height: 650px;
  border: 5px solid black;
  margin: 0 auto;
  margin-bottom: 25px;
  background-color: #8e68ff;
  background-image: url('');
  background-repeat: no-repeat;
  color: #FFFFFF;
  background-size: 100%;
  font-size: 150%;
}

.preview {
  width: 10%;
  margin-left: 17%;
  border: 10px solid black;
}

img {
  width: 95%;
}
    <div id="image">
  Hover over an image to display the alt text.
</div>

<img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover="upDate(this)" onmouseleave="document.getElementById('image').innerHTML='Hover over an image';">

<img class="preview" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover="upDate(this)" onmouseleave="document.getElementById('image').innerHTML='Hover over an image';">

<img class="preview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy" onmouseover="upDate(this)" onmouseleave="document.getElementById('image').innerHTML='Hover over an image';">
    Login or Signup to reply.
  2. 0

    You are on the right path, you just need to get the src of the image.

    function upDate(element) {
  const imgSrc = element.src; // get image src
  document.getElementById('image').innerHTML = element.alt;
  document.getElementById('image').style.backgroundImage = `url(${imgSrc})`;

}
    Login or Signup to reply.
  3. 0

    Others has solved your issue already. However it is considered bad practise to use inline event handlers. Your course might be outdated.

    Below I provided a working example how you can bind event handlers in javascript. This way you can attach more then 1 handler for each element event.

    document.querySelectorAll(".preview").forEach((element) => {
  element.addEventListener('mouseover', (event) => {
    let element = event.target;
    document.getElementById('image').innerHTML = element.alt;
    document.getElementById('image').style.backgroundImage = `url(${element.src})`;
  });
  
  element.addEventListener('mouseleave', () => {
    document.getElementById('image').innerHTML = 'Hover over an image to display the alt text.';
    document.getElementById('image').style.backgroundImage = '';
  });
});
    body {
  margin: 2%;
  border: 1px solid black;
  background-color: #b3b3b3;
}

#image {
  line-height: 650px;
  width: 575px;
  text-align: center;
  height: 650px;
  border: 5px solid black;
  margin: 0 auto;
  margin-bottom: 25px;
  background-color: #8e68ff;
  background-image: url('');
  background-repeat: no-repeat;
  color: #FFFFFF;
  background-size: 100%;
  font-size: 150%;
}

.preview {
  width: 10%;
  margin-left: 17%;
  border: 10px solid black;
}

img {
  width: 95%;
}
    <div id="image">
  Hover over an image to display the alt text.
</div>

<img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg">

<img class="preview" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG">

<img class="preview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy">
    Login or Signup to reply.
  4. 0

    You are attempting to set the background image URL to an empty string in the upDate function:

    document.getElementById('image').style.backgroundImage = 'url()';

    This line should have dynamically set the background image URL based on the src attribute of the hovered element. To achieve this, you need to concatenate the URL string with the element.src:

    document.getElementById('image').style.backgroundImage = 'url(' + element.src + ')';

    Here’s an updated version of your js code:

    function upDate(element) {
  document.getElementById('image').innerHTML = element.alt;
  document.getElementById('image').style.backgroundImage = 'url(' + element.src + ')';
}

function unDo() {
  document.getElementById('image').innerHTML = 'Hover over an image';
  document.getElementById('image').style.backgroundImage = 'url("")';
}

    upDate function takes the element and sets both the inner HTML and background image of the ‘image’ div. The element.src provides the URL of the hovered image.
    unDo function resets the inner HTML and background image when the mouse leaves.

    Also modify your HTML code as follow:

    <img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover="upDate(this)" onmouseleave="unDo()">

    The onmouseleave attribute in your HTML to use the unDo function.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search