How to appear an Image in specific location through hover on link? (HTML/CSS3)
Question
How can I make an image appear in a specific place (ex. customized image box) through hovering a link. Here is my code, but it is not working the way I want.
<!DOCTYPE html>
<html>
<style>
a {
display: block;
padding-bottom: 20px;
}
a #link1:hover{
content: url("winter.jpg");
}
a #link2:hover{
content: url("sunset.jpg");
}
a #link3:hover{
content: url("Blue hills.jpg");
}
</style>
<body>
<a href=""><div id="link1">Link1</div></a>
<a href=""><div id="link2">Link2</div></a>
<a href=""><div id="link3">Link3</div></a>
</body>
</html>
Here is an illustration for easy realization of my idea:
3 answers
solution1
0 2016-10-17 14:35:49
Try to google this first. Should be able to find pretty easy. But it should be something like this.
HTML
<img class="1" src="winter.jpg">
<img class="2" src="sunset.jpg">
<img class="3" src="Blue Hills.jpg">
CSS
.1 .2 .3{
-code the position here-
display: none;
}
jQuery
$(document).ready(function(){
$("#link1").mouseenter(function(){
$("1").show();
});
$("#link2").mouseenter(function(){
$("2").show();
});
$("#link3").mouseenter(function(){
$("3").show();
});
});
solution2
0 2016-10-17 14:56:21
Ok there are several approaches to this but the first one that comes to mind is create an array of your image paths. Then (a little longwinded but) if you just want something to work straight away you could try just putting a function on each links hover state to change the image path of the current image in that custom div you show. Something like this:
<style>
.customBox{
height: 300px;
width: 300px;
}
.customBox img{
max-height: 300px;
max-width: 300px;
}
</style>
<a href=""><div id="link1">Link1</div></a>
<a href=""><div id="link2">Link2</div></a>
<a href=""><div id="link3">Link3</div></a>
<div class="customBox"><img src=""></div>
<script>
var images = ['https://newevolutiondesigns.com/images/freebies/winter-wallpaper-12.jpg','https://upload.wikimedia.org/wikipedia/commons/a/a4/Anatomy_of_a_Sunset-2.jpg','http://www.hotel-r.net/im/hotel/asia/in/blue-hills-0.jpg'];
$('#link1').hover(function(){
$('.customBox img').attr('src', images[0]);
});
$('#link2').hover(function(){
$('.customBox img').attr('src', images[1]);
})
$('#link3').hover(function(){
$('.customBox img').attr('src', images[2]);
})
</script>
http://codepen.io/tomdreamevil/pen/XjPoVp?editors=1111
solution3
0 2016-10-17 14:58:33
You can do it with JavaScript ...
window.addEventListener("load", hoverChangeImageEffect); function hoverChangeImageEffect() { var imageHolder = document.getElementById("imageHolder"); var links = document.getElementsByClassName("setImage"); for(var i=0; i<links.length; i++) hoverChangeImage(links[i]); function hoverChangeImage(link) { link.onmouseover = function linkHover() { imageHolder.src = link.getAttribute("image"); } } }
img.imageHolder { width: 30%; vertical-align: middle; border: 1px solid black; margin-left: 2em; } ul.links { float: left; display: inline-block; }
<p>Hover the mouse over the links:</p> <ul class="links"> <li><a href="" class="setImage" image="http://cdn.sstatic.net/clc/img/jobs/ico-dismiss.svg">Anchor text1</a></li> <li><a href="" class="setImage" image="http://cdn.sstatic.net/clc/img/jobs/ico-location-gray.svg">Anchor text2</a></li> <li><a href="" class="setImage" image="http://cdn.sstatic.net/clc/img/jobs/ico-visa-pink.svg">Anchor text3</a></li> </ul> <img id="imageHolder" class="imageHolder" src="" height="100">
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.