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
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!
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");
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>
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
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>