10-12-2003, 12:33 PM
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!
10-12-2003, 04:14 PM
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! :)
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.
10-12-2003, 05:06 PM
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!
10-12-2003, 06:11 PM
Well, if you have explicitly defined the width and the height of the image through CSS, you can get it like this:
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. :o
Happy coding! :)
10-13-2003, 12:15 AM
<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">
<input type="button" value="Splash Screen" onmouseover="document.getElementById('splash').style.display='block';">
10-13-2003, 01:46 AM
I know text-align: center will center the stuff it affects, that means it's possible to do so...