<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Change</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div class="container">
<ul class="thumb">
<li> <a href="ant1.jpg" targer="imgBox"><img src="ant.jpg"/></a></li>
<li> <a href="apple1.jpg" targer="imgBox"><img src="apple.jpg"/></a></li>
<li> <a href="arrow1.jpg" targer="imgBox"><img src="arrow.jpg"/></a></li>
<li> <a href="aunt1.jpg" targer="imgBox"><img src="aunt.png"/></a></li>
</ul>
<div class="imgBox"><img src="ant1.jpg"/></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.thumb a').mouseover(function(e)
{
e.preventDefault();
$('.imgBox img').attr("src",$(this).attr("href"));
})
})
</script>
</body>
</html>
margin: 0;
padding:0;
}
.container
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
ul. thumb
{
margin: 0 auto;
padding:0;
float:left;
}
ul.thumb li
{
list-style: none;
margin:5px;
width:100px;
height: 100px;
border:1px solid rgba(134, 74, 74, 0.2);
overflow:hidden;
}
ul.thumb li img{
width:100%;
}
.imgBox{
float:left;
width:500px;
height:500px;
border:1px solid rgba(124, 78, 78, 0.2);
overflow:hidden;
}
In this post, I have created a Navigation Bar of a website using simple HTML and internal CSS. Source Code are following
