having trouble with a couple of link elements on my webpage once they've been clicked on the images move position. Here's the HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Tue, 03 May 2022 16:04:53 GMT">
<meta name="designer" content="P Marshall">
<meta name="description" content=
"Domestic & Commercial Electrical Contractor based on Somerset/Devon border in the Southwest of England. Installations, rewires, fault finding and testing">
<meta name="keywords" content="Electrics, Electrician, Rewire, PAT, testing, Heating controls, Home automation">
<title>All Phase Electrical</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico"><!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
.header {
padding: 2px 10px;
text-align: center;
font-size: 30px;
background-color: black;
background-image: url('images/blackdown.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
max-width: 100%;
height: 200px;
}
.htext {
font-weight: 700;
color: #ffffff;
text-shadow: 1px 1px 1px #919191,
1px 2px 1px #919191,
1px 3px 1px #919191,
1px 4px 1px #919191,
1px 5px 1px #919191,
1px 6px 1px #919191,
1px 7px 1px #919191,
1px 8px 1px #919191,
1px 9px 1px #919191,
1px 10px 1px #919191,
1px 18px 6px rgba(255,255,0,.4),
1px 22px 10px rgba(255,255,0,.2),
1px 25px 35px rgba(255,255,0,.2),
1px 30px 60px rgba(255,255,0,.4);
}
.nmark
{
position: relative;
text-decoration: none;
top: -90px;
right: 420px;
-webkit-box-shadow: 2px 2px 15px 5px rgba(140,140,140,0.92);
box-shadow: 2px 2px 15px 5px rgba(140,140,140,0.92);
}
.nmark :hover{
-webkit-box-shadow: 2px 2px 15px 5px rgba(0,0,0,.92);
box-shadow: 2px 2px 15px 5px rgba(0,0,0,.92); }
.tmark
{
position: relative;
text-decoration: none;
top: -115px;
left: 470px;
-webkit-box-shadow: 2px 2px 15px 5px rgba(140,140,140,0.92);
box-shadow: 2px 2px 15px 5px rgba(140,140,140,0.92);
}
.tmark :hover{
-webkit-box-shadow: 2px 2px 15px 5px rgba(0,0,0,.92);
box-shadow: 2px 2px 15px 5px rgba(0,0,0,.92);
}
.topnav {
position: relative;
overflow: hidden;
background-color: transparent;
top: -50px;
}
.topnav a {
float: left;
display: block;
font-size: 24px;
color: #00ffff;
text-align: center;
padding: 2px 16px;
text-decoration: none;
text-shadow: 2px 2px #008040;
}
.topnav a:hover {
text-decoration: none;
color: #800040;
text-shadow: 1px 1px #ff0000;
}
.topnav a:active {
text-decoration: none;
color: #ffff00;
}
.topnav-right {float: right;
}
@media screen and (max-width: 600px) {
.topnav a, .topnav-right {
float: left;
display: inline-flex;
overflow: auto;
}}
#navigation{background-color:transparent;
}
.item { list-style-type:none;
}
a.selected { background:transparent; color:#00ff40;
}
body {
overflow-y:auto;
overflow-x:hidden;
font-family: Arial, sans-serif;
background-color: black;
}
iframe {
min-height:100%;
position: absolute;
width: 100%;
height: 73%;
border: 0;
z-index:-1;
}
</style>
</head>
<body>
<div class="header">
<h1 class="htext">All Phase Electrical</h1>
<a class="nmark" href="https://www.napit.org.uk/" target="_blank"><img src="images/napit.jpg" alt=""></a>
<a class="tmark" href="https://www.trustmark.org.uk/" target="_blank"><img src="images/trustmark.jpg" alt=""></a>
<div class="topnav">
<div id="navigation">
<div class="topnav-right">
<a href="pages/locate.html" target="iframe_a">About Us</a> <a href="pages/contact.html" target="iframe_a">Contact</a> <a href=
"pages/support.html" target="iframe_a">Support</a>
</div><a href="pages/default.html" target="iframe_a">Home</a> <a href="pages/services.html" target="iframe_a">Services</a> <a href=
"pages/solutions.html" target="iframe_a">Solutions</a>
</div>
</div>
</div>
<script>
var anchorArr=document.getElementsByTagName("a");
var prevA="";
for(var i=0;i<anchorArr.length;i++)
{
anchorArr[i].onclick = function(){
if(prevA!="" && prevA!=this)
{
prevA.className="item";
}
this.className="item selected";
prevA=this;
}
}
</script>
<div>
<iframe src="pages/default.html" name="iframe_a" title="Main window" id="iframe_a"></iframe>
</div>
</body>
</html>
Images move when clicked on
P Marshall
Registered User
1 post
Frank Cook
Registered User
1,558 posts
Others may have better solutions, but I think the position jumping on click can be cured by putting each of the anchor elements in <div> tags, and transferring the <a> tag classes to the <div> tags as follows.
The above seems to sort the position jumping, but some CSS adjustments may then be needed regarding any changes in the appearance.
Frank
<div class="nmark">
<a href="https://www.napit.org.uk/" target="_blank"><img src="images/napit.jpg" alt=""></a>
</div>
<div class="tmark">
<a href="https://www.trustmark.org.uk/" target="_blank"><img src="images/trustmark.jpg" alt=""></a>
</div>
<a href="https://www.napit.org.uk/" target="_blank"><img src="images/napit.jpg" alt=""></a>
</div>
<div class="tmark">
<a href="https://www.trustmark.org.uk/" target="_blank"><img src="images/trustmark.jpg" alt=""></a>
</div>
The above seems to sort the position jumping, but some CSS adjustments may then be needed regarding any changes in the appearance.
Frank
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
