Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    The Netherlands
    Posts
    252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    splash screen (centered)

    Hi guys,

    I'm looking for a way to create the following effect:

    When someone moves the mouse over a button a 'splash-screen' should appear exactly in the center of the window. The splash screen is a gif image of which the width and height are not always the same.

    What would be a good way to achieve this effect?

    Thanx for your help!

    Cheers, Michiel

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The "x" position of the image ought to be half of the width of the browser screen minus the width of the image, and the "y" position of the image ought to be half of the height of the browser screen minus the height of the image.

    Hope that helps!

    Happy coding!

    Edit: Whoops....that wouldn't work, I think "x" would be half the width of browser screen minus half width of image, and "y" would be half the height of browser screen minus half height of image.

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    The Netherlands
    Posts
    252
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is quite logical and I already reached that point

    The problem is: how do I get to know the width and height of the image? And how then do I display the image?

    A code snippet would be very much appreciated!

    Cheers -Michiel

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, if you have explicitly defined the width and the height of the image through CSS, you can get it like this:

    Code:
    var width = document.getElementById("myImage").style.width;
    var height = document.getElementById("myImage").style.height;
    ...of course, I think you said you didn't specify with CSS. If that's the case, I think the only solution is to specify it...heh...*looks around* I sure hope someone has a better solution that that.

    Happy coding!

  • #5
    New Coder
    Join Date
    Jul 2003
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this.

    <img src="splash.gif" id="splash" alt=""
    style="position:absolute;left:50%;top:50%;margin:-150px 0px 0px -250px;height:300px;width:500px;display:none">

    <form>
    <input type="button" value="Splash Screen" onmouseover="document.getElementById('splash').style.display='block';">
    </form>

  • #6
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I know text-align: center will center the stuff it affects, that means it's possible to do so...
    Shawn


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •