Changing background of div in JavaScript - javascript

my code have one div and three picture
my main task is to show the same image in div when I hover over any picture what I am not able to understand is how can I do it with variables so that if in future if add more pictures it does not make any problem for me
note:: I want to do it by using variables I don't want to hard code image source.
I am also attaching the image for reference only.
function showproperties(element) {
var x = document.getElementById("box001");
x.innerHTML = element.alt;
var y = element.src;
document.getElementById("printsrc").innerHTML = y;
x.style.backgroundImage = y;
}
<body>
<div id="box001">main hover box
</div>
<div class="row">
<div class="image001 imgresize">
<img src="img01.jpg" alt="Image 001" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
</div>
<div class="image002 imgresize">
<img src="img02.jpg" alt="image 002" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
</div>
</div>
</body>
image

I tried to reproduce your issue and made some changes in it. I Hope that's how you wanted it to work. I have used some gif images url for demo purpose.
HTML:
<div id="box001" style="width: 100px;height: 100px; margin:7px">main hover box
</div>
<div class="row">
<div class="image001 imgresize">
<img src="https://c.tenor.com/Lvhj4QVL8-4AAAAS/server-is-for-javascript.gif" alt="Image 001" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
</div>
<div class="image002 imgresize">
<img src="https://c.tenor.com/FIcvxhgc1sgAAAAS/dit-is-een-code-blok-code.gif" alt="image 002" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
</div>
</div>
JS:
var x = document.getElementById("box001");
function showproperties(element) {
var y = element.src;
x.innerText = "";
x.style.backgroundImage = `url(${y})`;
}
function defaulttext(element) {
x.innerText = "main hover box";
x.style.backgroundImage = "none";
}
Full working code is available on this fiddle - https://jsfiddle.net/0h1urctn/

Related

How can I show and hide text and image in an onclick function?

I am using bootstrap 4.3.1 and would like to have a clickable icon in my list of thumbnails for a text.
I have a function where I click on the thumbnails and these images are displayed in large size next to them.
Now I want to have the same thing for my text.
Here is the code:
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
//imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
<!--START Thumbnaill Navbar-->
<div style="overflow-y: auto; height: auto; width: 170px;">
<img src="../image" alt="###" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
<!--Here the icon for text -->
</div>
<!--END Thumbnaill Navbar-->
<!--Main Content-->
<div class="container expandedImgSize d-flex justify-content-center ">
<span onclick="this.parentElement.style.display='none'"></span>
<img class="img-fluid" id="expandedImg" src="../PlaceholderImage">
</div>
Is there a elegant solution to show just the text?
I'll try my best but i will probably need help from you guys ( 〃 ω〃)
Thanks you guys in advance!

Onclick event problems

I have an issue with my onclick event. I want to have a sub-menu within my page. I have 5 icons on my page. when I click on one icon, the other 4 icons disappear. when the 4 icons disappear, there will show up an couple of buttons to go to other pages.
my problem with this event is that the other buttons, don't show up. and i do not know what the problem is...
I made a video to show the problem;
https://youtu.be/F2NUj3KVIIk
my code;
<div id="column">
<p id="afbeelding-spiraal">
<img width="150" id="spiraal" src="https://www.spiralex.nl/wp-content/uploads/2020/12/spiraal-correct.png">
</p>
</div>
<div id="column">
<p id="afbeelding-plaat">
<img width="150" id="plaat" src="https://www.spiralex.nl/wp-content/uploads/2020/12/platenwisselaar-correct.png">
</p>
</div>
<div id="column">
<p id="afbeelding-lucht">
<img width="150" id="lucht" src="https://www.spiralex.nl/wp-content/uploads/2020/12/lucht-1.png">
</p>
</div>
<div id="column">
<p id="afbeelding-skids">
<img width="150" id="skids" src="https://www.spiralex.nl/wp-content/uploads/2020/12/skids-correct.png">
</p>
</div>
</div>
<div id="text">
<div id="text-buis">
<button id="zwembadwarmtewisselaar">Zwembadwarmtewisselaar</button>
</div>
<script type="text/javascript">
var buis = document.getElementById("buis")
var spiraal = document.getElementById("spiraal")
var plaat = document.getElementById("plaat")
var lucht = document.getElementById("lucht")
var skids = document.getElementById("skids")
buis.onclick = function(){
if(spiraal.className ==""){
spiraal.className = "hide";
plaat.className = "hide";
lucht.className = "hide";
skids.className = "hide";
zwembadwarmtewisselaar.className = "show";
You need to make a reference to zwembadwarmtewisselaar also. var zwembadwarmtewisselaar = document.getElementById("zwembadwarmtewisselaar");

JavaScript Image container without src error

I'm validating my website and I have small gallery and when people click on picture there it opens in container. I have used javaScript for this but w3 validator gives error on my container because it has no src. My question is there any way to remove this error ?
<img src="img/1203138907710_o.jpg" alt="one" onclick="myFunction(this);">
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img src="" alt="a" id="expandedImg" style="width:100%">
</div>
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
expandImg.parentElement.style.display = "block";
}
Also extra question I have 32 errors and 600 warning from bootstrap.min.css what do you think I should do ?
Solution:
You can place a hash ( # ) to avoid the src error. It is not recommended for href attributes because it may cause side-effects, but for a src attribute of an image it is sufficient.
<img src="#" ...>
Alternative:
You may also use a data URI as a placeholder. The smallest png image, as far as I'm aware, is a 1x1 square. (the actual encoding is in the code snippet below)
<img src= "data:image/png;base64, ...encoding" ...>
Code Example
<img src="img/1203138907710_o.jpg" alt="one" onclick="myFunction(this);">
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img src="#" alt="a" id="expandedImg" style="width:50%">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="a" id="expandedImg2" style="width:50%">
</div>
Proof of Passing:
You can't. The easiest approach is to use a placeholder image in the src. You can also remove the <img> and create it dynamically inside the container.
<img src="img/1203138907710_o.jpg" alt="one" onclick="myFunction(this);">
<div class="container" id="expandedImgContainer">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
</div>
<script>
function myFunction(imgs) {
var div = document.getElementById("expandedImgContainer");
var expandImg = div.querySelector('img') || document.createElement("img");
expandImg.alt = "a";
expandImg.style.width = "100%";
expandImg.src = imgs.src;
div.appendChild(expandImg);
div.style.display = "block";
}
</script>

Event Delegation - event trigger with wrong class

I'm trying to create a slider with html- vanilla javascript. I'm able to open a modal, show a wide slider image and small images (thumbnails). Everything looks fine but when I click the thumbnails (which have "small_image" class) they trigger events, change image and add the same images to the thumbnails section again.
I checked the console with console.log(e.target.className) when I clicked any of the thumbnails and it shows "slider" class not "small_image" class.. Why is this happening and how can I fix this ?
Html section
<div id="photos" class="tabcontent">
<div class="tabslider">
<div>
<img src="{{image_path("posts/5-1537128615.jpg")}}" class="slider">
</div>
<div>
<img src="{{image_path("posts/6-1537128615.jpg")}}" class="slider">
</div>
<div>
<img src="{{image_path("posts/7-1537128615.jpg")}}" class="slider">
</div>
<div>
<img src="{{image_path("posts/8-1537128615.jpg")}}" class="slider">
</div>
<div id="myModal" class="modal">
<span class="close cursor">×</span>
<div class="modal-content">
<!-- wide image -->
<div class="mySlides">
<img class="show_slider" src="">
</div>
<!-- small images -->
<div class="small_images"></div>
</div>
</div>
</div>
</div>
Javascript section
document.querySelector(".tabslider").addEventListener("click", function (e) {
if (e.target.className = "slider") {
let smallImages = document.querySelector(".small_images"),
images = document.querySelectorAll(".slider"),
slider = document.querySelector(".show_slider"),
sliderDiv = document.querySelector(".mySlides"),
model = document.querySelector("#myModal");
model.style.display = "block";
images.forEach(function (image) {
let img = Elementor.create("img", {"src": image.src, "class": "small_image"}),
div = Elementor.create("div", {"class": "columnlightbox"},);
div.appendChild(img);
smallImages.appendChild(div);
});
slider.setAttribute("src", e.target.src);
sliderDiv.style.display = "block";
}
})
e.target.className = "slider"
You are setting the value here, not comparing :D

Image appear when hover the text (html bootstrap)

I'm coding my website with bootstrap (to make it responsive, and it's easier to update for me) and I'd like image to display when I over a text.
here's the code:
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>
I would like the ihp_poster01.JPG image to appear when I hover "INSTITUT HENRI POINCARRE, POSTER — 2017". I've tried multiple things which didn't worked because the img and the text are not in the same <div>.
I guess I'll have to use Javascript, but I didn't found any JS for that :/
Can someone help me?
thanks
You can use mouseenter & mouseleave events (using JavaScript of course) on text and toggle the display style of image accordingly...
window.onload = function() {
var name = document.getElementById("name");
var image = document.getElementById("img");
name.addEventListener("mouseenter", function( event ) {
image.style.display = "block";
});
name.addEventListener("mouseleave", function( event ) {
image.style.display = "none";
});
}
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img style="display:none;" id="img" src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>
Update: To make this dynamic and handle different text with different images one can use onmouseenter & onmouseleave with common JS function, have a look at the snippet below:
function toggleShow(elementId) {
let el = document.getElementById(elementId);
el.style.display = "block";
}
function toggleHide(elementId) {
let el = document.getElementById(elementId);
el.style.display = "none";
}
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img style="display:none;" id="image1" src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img style="display:none;" id="image2" src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>

Categories