ryanforprez
Coder
Hello, I am having trouble getting my onmousehover to work for this new site I have been working on and would like some help.
I need some help with making the hover images appear where the cursor is or just simply above the rules and on the right side of the page in the center.
Also, adjusting the spacing between the rules to make it tighter.
[CODE lang="html" title="HTML"] <div class="sidebar-two">
<a href="lookat.html" id = "Silo" onmouseover="mouseOver()" onmouseout="mouseOut()"><p>Silo<br></p></a> <hr>
<a href="cassette.html" id = "ryan" onmouseover="mouseOver8()" onmouseout="mouseOut8()"><p>Slide Charger</p></a> <hr>
<a href="alyx.html" id = "ryan" onmouseover="mouseOver1()" onmouseout="mouseOut1()"><p>Goby<br></p></a> <hr>
<a href="beansans.html" id = "ryan" onmouseover="mouseOver3()" onmouseout="mouseOut3()"><p>Clean up Kit<br></p></a> <hr>
<a href="canyon.html" id = "ryan" onmouseover="mouseOver4()" onmouseout="mouseOut4()"><p>Puff The Squeaky Chicken<br></p></a> <hr>
<a href="tendencies.html" id = "ryan" onmouseover="mouseOver2()" onmouseout="mouseOut2()"><p>Cuss Collar<br></p></a> <hr>
<a href="mutiny.html" id = "ryan" onmouseover="mouseOver5()" onmouseout="mouseOut5()"><p>Dish Soap<br></p></a> <hr>
<a href="popper.html" id = "ryan" onmouseover="mouseOver6()" onmouseout="mouseOut6()"><p>Blur</p></a> <hr>
</div>
<div class="images">
<img id="silo" class="lookat" src="Images/SILO.jpeg">
<img id="alyx" class="alyx" src="Images/thumbalyx.png">
<img id="tend" class="tend" src="Images/thumbtend.png">
<img id="bean" class="bean" src="Images/thumbbean.png">
<img id="daze" class="daze" src="Images/thumbdaze.png">
<img id="mutiny" class="mutiny" src="Images/ring-01.png">
<img id="pill" class="pill" src="Images/blur.png">
<img id="clock" class="clock" src="Images/blur.png">
</div>
</body>
<script>
function mouseOver() {
document.getElementById("look").style.display = "block";
}
function mouseOut() {
document.getElementById("look").style.display = "none";
}
function mouseOver1() {
document.getElementById("alyx").style.display = "block";
}
function mouseOut1() {
document.getElementById("alyx").style.display = "none";
}
function mouseOver2() {
document.getElementById("tend").style.display = "block";
}
function mouseOut2() {
document.getElementById("tend").style.display = "none";
}
function mouseOver3() {
document.getElementById("bean").style.display = "block";
}
function mouseOut3() {
document.getElementById("bean").style.display = "none";
}
function mouseOver4() {
document.getElementById("daze").style.display = "block";
}
function mouseOut4() {
document.getElementById("daze").style.display = "none";
}
function mouseOver5() {
document.getElementById("mutiny").style.display = "block";
}
function mouseOut5() {
document.getElementById("mutiny").style.display = "none";
}
function mouseOver6() {
document.getElementById("pill").style.display = "block";
}
function mouseOut6() {
document.getElementById("pill").style.display = "none";
}
function mouseOver8() {
document.getElementById("clock").style.display = "block";
}
function mouseOut8() {
document.getElementById("clock").style.display = "none";
}
</script>
[/CODE]
[CODE lang="css" title="CSS"].sidebar-two {
display: block;
padding-top: 5%;
padding-bottom: 0%;
z-index: -1;
}
.images{
width: 20%;
position: relative;
justify-content: left;
z-index: 999;
}
.lookat{
width:100%;
display: none;
}
.alyx{
width:100%;
display: none;
}
.tend{
width:100%;
display: none;
}
.bean{
width:100%;
display: none;
}
.daze{
width:100%;
display: none;
}
.mutiny{
width:100%;
display: none;
}
.pill{
width:100%;
display: none;
}
.cass{
width:100%;
display: none;
}[/CODE]
I need some help with making the hover images appear where the cursor is or just simply above the rules and on the right side of the page in the center.
Also, adjusting the spacing between the rules to make it tighter.
[CODE lang="html" title="HTML"] <div class="sidebar-two">
<a href="lookat.html" id = "Silo" onmouseover="mouseOver()" onmouseout="mouseOut()"><p>Silo<br></p></a> <hr>
<a href="cassette.html" id = "ryan" onmouseover="mouseOver8()" onmouseout="mouseOut8()"><p>Slide Charger</p></a> <hr>
<a href="alyx.html" id = "ryan" onmouseover="mouseOver1()" onmouseout="mouseOut1()"><p>Goby<br></p></a> <hr>
<a href="beansans.html" id = "ryan" onmouseover="mouseOver3()" onmouseout="mouseOut3()"><p>Clean up Kit<br></p></a> <hr>
<a href="canyon.html" id = "ryan" onmouseover="mouseOver4()" onmouseout="mouseOut4()"><p>Puff The Squeaky Chicken<br></p></a> <hr>
<a href="tendencies.html" id = "ryan" onmouseover="mouseOver2()" onmouseout="mouseOut2()"><p>Cuss Collar<br></p></a> <hr>
<a href="mutiny.html" id = "ryan" onmouseover="mouseOver5()" onmouseout="mouseOut5()"><p>Dish Soap<br></p></a> <hr>
<a href="popper.html" id = "ryan" onmouseover="mouseOver6()" onmouseout="mouseOut6()"><p>Blur</p></a> <hr>
</div>
<div class="images">
<img id="silo" class="lookat" src="Images/SILO.jpeg">
<img id="alyx" class="alyx" src="Images/thumbalyx.png">
<img id="tend" class="tend" src="Images/thumbtend.png">
<img id="bean" class="bean" src="Images/thumbbean.png">
<img id="daze" class="daze" src="Images/thumbdaze.png">
<img id="mutiny" class="mutiny" src="Images/ring-01.png">
<img id="pill" class="pill" src="Images/blur.png">
<img id="clock" class="clock" src="Images/blur.png">
</div>
</body>
<script>
function mouseOver() {
document.getElementById("look").style.display = "block";
}
function mouseOut() {
document.getElementById("look").style.display = "none";
}
function mouseOver1() {
document.getElementById("alyx").style.display = "block";
}
function mouseOut1() {
document.getElementById("alyx").style.display = "none";
}
function mouseOver2() {
document.getElementById("tend").style.display = "block";
}
function mouseOut2() {
document.getElementById("tend").style.display = "none";
}
function mouseOver3() {
document.getElementById("bean").style.display = "block";
}
function mouseOut3() {
document.getElementById("bean").style.display = "none";
}
function mouseOver4() {
document.getElementById("daze").style.display = "block";
}
function mouseOut4() {
document.getElementById("daze").style.display = "none";
}
function mouseOver5() {
document.getElementById("mutiny").style.display = "block";
}
function mouseOut5() {
document.getElementById("mutiny").style.display = "none";
}
function mouseOver6() {
document.getElementById("pill").style.display = "block";
}
function mouseOut6() {
document.getElementById("pill").style.display = "none";
}
function mouseOver8() {
document.getElementById("clock").style.display = "block";
}
function mouseOut8() {
document.getElementById("clock").style.display = "none";
}
</script>
[/CODE]
[CODE lang="css" title="CSS"].sidebar-two {
display: block;
padding-top: 5%;
padding-bottom: 0%;
z-index: -1;
}
.images{
width: 20%;
position: relative;
justify-content: left;
z-index: 999;
}
.lookat{
width:100%;
display: none;
}
.alyx{
width:100%;
display: none;
}
.tend{
width:100%;
display: none;
}
.bean{
width:100%;
display: none;
}
.daze{
width:100%;
display: none;
}
.mutiny{
width:100%;
display: none;
}
.pill{
width:100%;
display: none;
}
.cass{
width:100%;
display: none;
}[/CODE]