Home/ Questions/Q 7539251
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T07:19:58+00:00

I have a 800×500 image. The bottom two quadrants have edits to the graphics

  • 0

I have a 800×500 image. The bottom two quadrants have edits to the graphics that I want to fade in.

If the whole image consisted of
AB
CD

C & D are what will be covered up after 10 seconds with two images that fit in the bottom quadrants. I started of with display:none; thinking that the fadein() takes care of that, but I’ve messed something up.

The fiddle is here I used different images but the sizes are correct.

style.css

*{
    margin:0;
    padding:0;
    background-color: #000;
}

#container {
    position: absolute;
    bottom: 0px;
    top: 0px;
    display:inline;             
}

.bottom-left {
    position:absolute;  
    top:250px;
    left: 0px;
    display: none;
}

.bottom-right {
    position:absolute; 
    top:250px;
    left:400px; 
    display: inline;

}

The page:

<!DOCTYPE html>
<html>
<head>

<!-- STYLE SHEETS -->
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

<!-- JQuery * QTip Plugin at the bottom --> 
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>


<script type="text/javascript">
    $(document).ready(function(){   
        $('#bottom-left').fadeIn(10000);
    });
</script>

</head>
<body>
<div id="container">

<image src="images/NoAlertFull.png">
        <span class="bottom-right">
                <image src="images/Alert-red.png">
        </span>
        <span class="bottom-left">
                <image src="images/Alert-yellow.png">
        </span>     
</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you are adressing the span by id, instead of by class: change the selector to

    $('.bottom-left').fadeIn('slow');
    • 0