Positioning of image is not working

Question

I am trying to make a website for my niece, kind of like a homepage for her. I have a little experience coding and I got stuck positioning an image. I don't know whats wrong with it.

Here's my HTML code:

<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:

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;}
/**/

Even though I did everything the same I still cant make the "Facebook Link" work! I made every other option works perfectly fine except that one. I tried using Margin-Top:163px; and Margin-Right:275px; in CSS but that just moved everything down... I want it to change picture when you hover over it and also for it to grow in size...

Usually a good idea to pay attention to case. See [this](http://stackoverflow.com/questions/12533926/are-class-names-in-css-selectors-case-sensitive). — vch, Sep 27 '14 at 16:41
``C:\...`` on your ``href``/``src`` won't work when you'll put it online. Use relative URIs instead. — Xenos, Sep 27 '14 at 16:46
Try not to use spaces in you class names. For example, instead of: class="border size" try class="borderSize". This will not fix your problems, but is much better practice. — Edward, Sep 27 '14 at 17:40

score 4 · Answer 1 · answered Sep 27 '14 at 16:52

4

You dont need to use JavaScript at all.
Of what I understand, you only want the picture to change on hover. So this is what you'll need to do.

HTML

<a href ="http://www.facebook.com" id="fbimage"></a>

CSS

#fbimage{
    background-image:url('fbimage.png');
}

    #fbimage:hover{
        background-image:url('fbhoverimage.png');
    }

answered Sep 27 '14 at 16:52

Ferdin

362
3
12

1

Don't forget to set both ``width`` and ``height`` to the ```` tag. Thus, you should not leave any ```` tag empty: put ``My Facebook`` (for instance) in it and hide it if needed through CSS using ``#fbimage span { display: none; }``. – Xenos Sep 27 '14 at 19:55

score 1 · Answer 2 · answered Sep 27 '14 at 16:49

1

You forget a > after the Youtube link:

<!--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>
<!-- Right up ^ here-->

<!--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>

answered Sep 27 '14 at 16:49

Xenos

3,351
2
27
50

Yes, the closing anchor tag is missing it. To catch errors like this before asking for advice, you can run your HTML through http://validator.w3.org. This will help you find many errors, including the one here. – Edward Sep 27 '14 at 17:45
@Edward Using an IDE or any software (even N++) with syntax color would make it even faster to find out such errors. – Xenos Sep 27 '14 at 19:52
Good point. I always just assume that everyone already does that. – Edward Sep 28 '14 at 04:15
@Xenos Im sorry, on my actual document i have it maybe i didnt copy it right or i accidently deleted it here in S.O. – Holy Man Sep 28 '14 at 17:18

score 0 · Answer 3 · answered Sep 27 '14 at 17:35

<html>
    <head>
        <title>MWM</title>
        <style>
            .container{
                background-color: lime;
                width:100%;
                height:100%;
                top:0;
                bottom:0;
                left:0;
                right:0;
                margin:auto;
                position:absolute;

            }
            h1 {text-align: center;color: black;font-size:3em;}

            ul{
                list-style-type:none;
            }
            a{
                display:block;
                border-style: inset;
                border-width: 10px;
                border-bottom-color: #454545;
                border-right-color: #454545; 
                border-top-color: #DEDEDE; 
                border-left-color: #DEDEDE;
                height:100px;
                width:200px;
                position:absolute;
                background:red;
                float:left;
                text-align: center;
                vertical-align: middle;
                color:white;
                font-size:2em;
                line-height:100px;
            }
            a.cartoon{
                top:0;
                left:0;
                background:url(C:\C1.png) blue;
            } 
            a.cartoon:hover{
                background:url(C:\C2.png)aqua;
            }
            a.google{
                top:200;
                left:200;
                background:url(C:\G1.png) yellow;
            } 
            a.google:hover{
                background:url(C:\G2.png)gold;
            }
            a.youtube{
                top:400;
                left:400;
                background:url(C:\Y1.png) red;
            } 
            a.youtube:hover{
                background:url(C:\Y2.png)darkred;
            }
            a.facebook{
                top:600;
                left:600;
                background:url(C:\F1.png) green;
            } 
            a.facebook:hover{
                background:url(C:\F2.png)lawngreen;
            }
        </style>
    </head>
<body>
    <div class="container">
    <h1>Welcome to ---- HomePage!</h1>
        <a href="#" class="cartoon link">Cartoon</a>
        <a href="#" class="google link">Google</a>
        <a href="#" class="youtube link">Youtube</a>
        <a href="#" class="facebook link">Facebook</a>
    </div>
</body>
</html>

Positioning of image is not working

3 Answers3