Magic/More Magic

Discussion in 'CSS' started by MichaelJM, May 18, 2008.

0
  1. #1
    Hi, I'm new to this forum, and I have a rather odd question to ask.

    If by chance you are familiar with the obscure reference of the subject I think this will interest you.
    (If you don't have the slightest clue, this will explain all: http://catb.org/jargon/html/magic-story.html)

    On my profile I have created a nice little image of the infamous magic toggle switch, with the up and down positions labeled "magic" and "more magic" respectively. (it is of course set to "more magic")
    Currently I have the image linked to the same page as the story's explanation (same link as above), but I would like to be somewhat more devious than that.

    I wondered: how could this be set up in such a way that whenever someone clicks on the switch the entire profile goes white?

    Is there a way to do this? I thought maybe it could activate an entirely white layer, but could it cover Everything on the page?
    This is definitely far beyond my rudimentary CSS skills, but I'm hoping you can help.

    What do you think?
    [​IMG]
     
    MichaelJM, May 18, 2008 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What do you want so that when the button is clicked everything on the page turns to a white screen?

    I'm pretty new to Js but check out this example I quickly created:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
	background: black; 
	color: #fff;
}

a {
	font-size: 40px;
	text-decoration: none;
	color: #fff;
	letter-spacing: 10px;
}

#white a {
	color: #000
}

#white {
	position: absolute;
	top: 0; 
	left:0; 
	width: 100%; 
	height: 100%; 
	background: white; 
	visibility: hidden; 
}
</style>
<script type="text/javascript">
function magic() {
document.getElementById('white').style.visibility='visible'
}
function back() {
document.getElementById('white').style.visibility='hidden'
}
</script>
</head>

<body>
<div id="white">
<a href="#" onclick="back();">Take me Back :(</a>
</div>
<h1>Content</h1>
<a href="#" onclick="magic();">Click Here for Magic!</a>
</div>
</body>
</html>
    Code (markup):
     
    wd_2k6, May 18, 2008 IP
  3. MichaelJM

    MichaelJM Guest

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Oh D***! NOW I see the fine freaking print...
    "You may enter HTML/DHTML or CSS in any text field. Javascript is not allowed."
    Isn't that just dandy...:mad: Stinkin' MySpace...

    Okay, regroup. Round two.
    Is this even possible now?
    As I said, I know very little about CSS but from what I do know it doesn't seem to me that it's capable of overriding all the other CSS that's already on there. Can it? This is all heavy wisardry to me at this point...

    Not entirely sure what you mean by that question :confused:
    Do you mean a transition or something before it goes blank?
     
    MichaelJM, May 18, 2008 IP