Change Text when hovering over image, text is in a different location then image
Question
I have some images in a grid-like area and when one is hovered over I would like it so the text on the left-hand side of the screen changes to a predefined description of that image, for every image it will do this and display the text in the same area. Any help would be much appreciated I've been trying to get it for hours now.
The text needs to be displayed in the same area. so if I hover over a lake, the lakes desc will be displayed in another box (let's call it desc box). then if I hover over a duck the desc of that duck will be displayed in that same desc box.
Is there any way using onmouseover to set
to show text depending whats being hovered over. so if A duck image is being hovered over the predefined text lets say var DuckImage="A duck is an animal"; is displayed in HoverOverDesc when that duck image is hovered over.3 answers
solution1
3 2019-05-19 04:57:18
If I understand your question, you want a grid of images to the right on the screen, where each image has predefined text that is displayed on the left side of the screen if the user hovers that image.
This can be achieved via CSS and HTML, without any JavaScript as shown below. Please see the comments in the snippet for further explanation:
.grid { /* Put 50% white space to the left of the image grid which provides the space for descriptions to appear */ padding-left:50%; /* Specify a basic grid layout for images in the grid */ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; } .grid img { /* Cause each image to not exceed the grid cell's width */ max-width:100%; } .grid ap { /* With width of description cannot exceed half page width. If text description is too long, this causes it to wrap onto multiple lines at the 50% point */ width:50%; /* Fixed position ensures the description is placed at top left of screen (by default) regardless of scroll position */ position:fixed; top:0; left:0; /* Do not show description by default */ display:none; } .grid a:hover p { /* When hovering the a around an image, cause it's description to be shown */ display:block; }
<div class="wrapper"> <div class="grid"> <a href="#"> <p>Pre defined text for blue image</p> <img src="https://via.placeholder.com/350/00f.png" alt="blue" /> </a> <a href="#"> <p>Pre defined text for red image</p> <img src="https://via.placeholder.com/350/f00.png" alt="red" /> </a> <a href="#"> <p>Pre defined text for green image</p> <img src="https://via.placeholder.com/350/0f0.png" alt="green" /> </a> <a href="#"> <p>Pre defined text for yellow image. Lots of text can be specified, which will wrap on to a new line.</p> <img src="https://via.placeholder.com/350/ff0.png" alt="green" /> </a> </div> </div>
solution2
1 2019-05-19 04:56:59
one way of get this done could be have the grid and the message container in a parent container and use the general sibling selector, the sample I put bellow do that is not perfect but it work, other way that you could use is with javascript using onmouse over on the grid cells and maybe a dataattribute in order to make it more dynamic. :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.grid-area{
width:800px;
height: 600px;/* theses values are only for test define your as you wish*/
position: relative;
top:50px;
left:100px;
background:#444;
display: inline-flex;
justify-content: space-around;
flex-wrap: wrap;
}
.grid-area >.img{
width: 150px;
height:150px;
background:blue;
margin:20px;
border:2px solid rebeccapurple;
}
.text-artifact{
position: absolute;
bottom:10px;
left: -20px;
width: 100%;
height: 100px;
background:#4354FF;
}
.text-artifact *{
display: none;
text-align: center;
color:white;
font-weight: bolder;
text-shadow: 1px 2px 3px #434343;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size:2em;
}
.img:hover{
background: yellow;
}
.img:hover ~ .text-artifact{
background: white;
}
.img1:hover ~ .text-artifact .text1{
display:block;
}
.img2:hover ~ .text-artifact .text2{
display:block;
}
.img3:hover ~ .text-artifact .text3{
display:block;
}
.img4:hover ~ .text-artifact .text4{
display:block;
}
.img5:hover ~ .text-artifact .text5{
display:block;
}
</style>
</head>
<body>
<div class="grid-area">
<div class="img1"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="img2"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="img3"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="img4"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="img5"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="text-artifact">
<div class="text1">This should be a description for 1</div>
<div class="text2">This should be a description for 2</div>
<div class="text3">This should be a description for 3</div>
<div class="text4">This should be a description for 4</div>
<div class="text5">This should be a description for 5</div>
</div>
</div>
</body>
</html>
the example bellow contains javascript, this is one of the approach that you could use, I decide to use data attribute that let customize with values and customize, css should work with it and you could query( as in the example and create too with . setAttribute ('data', "your attribute name",...; but there are other way.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.center{
width:500px;
height: 400px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
border:3px solid #434343;
}
.nested-box-bottom{
width: 100%;
height: 60px;
position: fixed;
display: inline-block;
bottom:0;
left:0px;
background: #323232;
}
#text-in-nested-box {
margin-top:10px;
width: 90%;
position: relative;
left:5%;
height: 32px;
color:white;
font-weight: bolder;
text-align: center;
}
#outside-box{
margin-top:10px;
width: 100%;
position: absolute;
top:-10px;
left:0%;
height: 49px;
color:white;
font-weight: bolder;
text-align: center;
background:#323232;
margin-bottom:20px;
}
</style>
</head>
<body>
<div class="center">
<img class="img" data-columns="1" src="https://via.placeholder.com/150"alt="">
<img class="img" data-columns="2" src="https://via.placeholder.com/150"alt="">
<img class="img" data-columns="4"src="https://via.placeholder.com/150"alt="">
<div class="nested-box-bottom">
<div id="text-in-nested-box"></div>
</div>
</div>
<div id="outside-box"></div>
<script>
const img = document.querySelectorAll('.img');
const outside = document.getElementById('outside-box');
const inside = document.getElementById('text-in-nested-box');
function display(){
const value = this.dataset.columns;
inside.innerHTML =`you are hover element with ${value}`;
outside.innerHTML =`you are hover element with ${value}`;
}
function out( ){
outside.innerHTML = "";
inside.innerHTML="";
}
for(i=0;i<img.length;i++)
{
///console.log(`setting event src ${img[i].dataset.columns }`);
img[i].addEventListener("mouseover", display, false);
img[i].addEventListener("mouseout", out, false);
}
</script>
</body>
</html>
solution3
1 2019-05-22 00:18:44
<img src="Images/duck.png" width="450" height="auto" onmouseover="document.getElementsByName('HoverOverInfo2')[0].innerHTML = 'A Duck'" onmouseout="document.getElementsByName('HoverOverInfo2')[0].innerHTML = ' '" />
<img src="Images/car.png" width="450" height="auto" onmouseover="document.getElementsByName('HoverOverInfo2')[0].innerHTML = 'A Car'" onmouseout="document.getElementsByName('HoverOverInfo2')[0].innerHTML = ' '" />
Some where else
<h4 class="w3-bar-item"><b>Description</b></h4>
<div style="margin-left:8px">
<p id="HoverOverInfo" name=></p>
This worked perfectly for me!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.