Sure, now obviously this is going to look a little different to the screen shot I posted above but that’s because this is simply a template which I'm using to actually build each page plus it's missing some images but otherwise the html and the css is the same.
To account for the missing images I added a few extra lines of css to fix the display issues you can find that at the bottom of the style section under /* testing */
If you decide to use place holder images the background for the #left box should be 513px by 513px and the icons should be 30px by 30px you will also need to remove the css under /* testing */ but it shouldn't matter if there are images or not since the alt text will just show in place of the icon and then allow you to see if the script is working.
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Sector Map - sector name</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
*
{
box-sizing: border-box;
}
html, body
{
margin:0;
padding:0;
}
body
{
background-color:#172331;
}
#flex_container
{
display:flex;
justify-content: center;
align-items:center;
min-height:100vh;
}
div#outer
{
white-space:nowrap;
}
#left,
#right
{
height:540px;
}
#left p,
#right p
{
background-image: url("../images/bordertop.jpg");
height:25px;
margin:0;
padding-left: 10px;
color: #fff;
font-weight:bold;
border-left:1px solid #9aabc5;
border-right:1px solid #9aabc5;
line-height:21px;
}
#left
{
display:inline-block;
vertical-align: top;
margin: 20px 7px 20px 18px
}
#left img
{
color:white;
}
#left img#map
{
border-left:1px solid #9aabc5;
border-right:1px solid #9aabc5;
border-bottom:1px solid #9aabc5;
}
#right
{
display:inline-block;
vertical-align: top;
margin: 20px 18px 20px 7px
}
#right #inner
{
overflow-y:auto;
height:calc(100% - 26px);
padding-right:32px;
border-left:1px solid #9aabc5;
border-right:1px solid #9aabc5;
border-bottom:1px solid #9aabc5;
}
#right #inner table
{
border-spacing: 0;
width:100%;
white-space:nowrap;
margin:16px;
padding-top:3px;
padding-bottom:3px;
color:#bfc6e5;
background-color:#0b111a;
border:2px solid #000001;
border-radius: 6px;
font-family: Arial;
font-size:0.90em;
}
#right #inner table tr th,
#right #inner table tr td
{
text-align:left;
padding: 3px 6px;
}
#right #inner table tr:hover:not(:nth-of-type(1))
{
background-color:#4f5d84;
}
/* Position Icons */
#left
{
position:relative;
}
img.icon
{
position:absolute;
z-index:10;
}
img#icon1
{
top:40px;
left:20px;
}
/* testing */
#left img#map
{
display:block;
height:513px;
width:513px;
}
#left,
#right
{
border-top:1px solid #9aabc5;
}
#left p,
#right p
{
border-bottom:1px solid #9aabc5;
}
</style>
<script>
function hoveron(id)
{
var id = document.getElementById(id);
id.style.cssText = "border:1px dashed red;";
}
function hoveroff(id)
{
var id = document.getElementById(id);
id.style.cssText = "border:none;";
}
</script>
</head>
<body>
<div id="flex_container">
<div id="outer">
<div id="left">
<p>Sectormap - Sector Name</p>
<img src="path to image" id="map">
<img class="icon" id="icon1" src="path to image" alt="icon name">
</div>
<div id="right">
<p>Information</p>
<div id="inner">
<table>
<tr>
<th>Station</th>
<th colspan="3">Coordinates (x, y, z)</th>
</tr>
<tr onmouseover="hoveron('icon1')" onmouseout="hoveroff('icon1')">
<td>Station</td>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
<table>
<tr>
<th>Type</th>
<th>Yield</th>
<th colspan="3">Coordinates (x, y, z)</th>
</tr>
<tr onmouseover="hoveron('icon1')" onmouseout="hoveroff('icon1')">
<td>Type</td>
<td>Yield</td>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
<table>
<tr>
<th>Gates</th>
<th>Destination</th>
<th colspan="3">Coordinates (x, y, z)</th>
</tr>
<tr onmouseover="hoveron('icon1')" onmouseout="hoveroff('icon1')">
<td>Gate</td>
<td>Destination</td>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
now as you will see when you copy and past this and create a new html document, stuff works correctly when i do
Code: Select all
function hoveron(id)
{
var id = document.getElementById(id);
id.style.cssText = "border:1px dashed red;";
}
function hoveroff(id)
{
var id = document.getElementById(id);
id.style.cssText = "border:none;";
}
<table>
<tr>
<th>Station</th>
<th colspan="3">Coordinates (x, y, z)</th>
</tr>
<tr onmouseover="hoveron('icon1')" onmouseout="hoveroff('icon1')">
<td>Station</td>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
but as i already mentioned I'd much rather not have to put
onmouseover="hoveron('icon1')" onmouseout="hoveroff('icon1')"
onmouseover="hoveron('icon2')" onmouseout="hoveroff('icon2')"
onmouseover="hoveron('icon3')" onmouseout="hoveroff('icon3')"
etc on every row I'd much prefair to just write the onmouseover="" onmouseout="" once put that in a function and then just attach that function to each row dynamically, which is why i tried rewriting the function to
Code: Select all
function highlight(id)
{
var id = document.getElementById(id);
id.onmouseover = function(id)
{
id.style.cssText = "border:1px dashed red";
};
id.onmouseout = function(id)
{
id.style.cssText = "border:none;";
};
}
trouble is I'm a bit of a rookie when it comes to JavaScript so I'm not really sure how to get this working i tried a number of things to try and pass the id to the function so that it will know which row in the list I'm hovering over and which icon to find and highlight as this should work by matching pairs so i pass an id as a parameter to the function it then gets the image with the same id and highlights it but nothing i have tried works and i have no idea why.
Now I had assumed that it would be as simple as doing
Code: Select all
<table>
<tr>
<th>Station</th>
<th colspan="3">Coordinates (x, y, z)</th>
</tr>
<tr highlight('icon1')>
<td>Station</td>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
to call the function and pass it the id of the row I'm hovering over so that it knows which icon to find and highlight but clearly this is not the case as this simply doesn't work.