I'm currently in the process of creating a personalized website for my niece, designed to be akin to a homepage just for her. While I have some experience with coding, I've hit a roadblock when it comes to positioning an image on the page. Something seems off, but I can't quite pinpoint what the issue is.
Below is the HTML code I'm working with:
<html>
<head>
<title>MWM</title>
<h1>Welcome to ---- HomePage!</h1>
<link rel="stylesheet" type="text/css" href="C:\Style.css">
<script language="javascript">
function MouseRollover(MyImage)
{MyImage.src = "C:\N2.png";}
function MouseOut(MyImage)
{MyImage.src = "C:\N1.png";}
function MouseRollover2(MyImage)
{MyImage.src = "C:\C2.png";}
function MouseOut2(MyImage)
{MyImage.src = "C:\C1.png";}
function MouseRollover3(MyImage)
{MyImage.src = "C:\Y2.png";}
function MouseOut3(MyImage)
{MyImage.src = "C:\Y1.png";}
function MouseRollover4(MyImage)
{MyImage.src = "C:\H2.png";}
function MouseOut4(MyImage)
{MyImage.src = "C:\H1.png";}
</script>
</head>
<body>
<!--Cartoons-->
<a class="Dec" href="C:\Cartoons.html">
<img class="border size" src="C:\C1.png" onMouseOver="MouseRollover2(this)" onMouseOut="MouseOut2(this)">
</a>
<!--Google-->
<a Class="Dec" href="http://www.Google.com">
<img id="N" class="border size" src="C:\N1.png" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)">
</a>
<!--Youtube-->
<a Class="Dec" href="C:\W\Youtube.html">
<img Id="y" class="border SY" src="C:\Y1.png" onMouseOver="MouseRollover3(this)" onMouseOut="MouseOut3(this)">
</a
<!--Facebook-->
<a Class="Dec" href="http://Facebook.com">
<img id="H" class="border size" src="C:\H1.png" onMouseOver="MouseRollover4(this)" onMouseOut="MouseOut4(this)">
</a>
<!---->
</body>
</html>
And here's my CSS setup:
body {Background-color: lime;}
h1 {text-align: center;Color: Black;}
/**/
.Border {border-style: inset;border-width: 10px;border-bottom-color: #454545;border-right-color: #454545; border-top-color: #DEDEDE; border-left-color: #DEDEDE;}
.Dec {text-decoration: None;}
.Size {height: 57px;width: 227px;}
.SY {height:77px;Width: 227px}
/*
Postion Equation: (Height+20Border+IconLeft+20Image growth)="Height"
(Width+20Border+IconLeft+20Image growth)="Width"
*/
#C {position:absolute;}
#N {position:absolute; TOP:163px; LEFT:275px;}
#Y {position:absolute; TOP:260px; LEFT:542px;}
#H {position:absolute; TOP:163px; RIGHT:275px;}
/**/
img:link {}
img:visited {}
img:hover {height: 77px;width: 247px;}
img:hover.SY {height: 97px;Width: 247px;}
/**/
Despite all attempts, I still haven't been able to get the "Facebook Link" to function correctly.
I've managed to make every other option work perfectly, except for that particular one. I tried using Margin-Top:163px; and Margin-Right:275px; in the CSS, but that only resulted in everything shifting downwards. I aim to achieve a hover effect that changes the picture upon interaction, as well as causing it to grow in size...