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 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help a girl with some javascript stuff

    hi
    i love the little boxes that appear on the bing page
    so i wanted to have something similar
    i saved the bing page and was able to get the effect with firefox
    but when i opened the downloaded page with explorer i didn't get the effects

    i guess the javascripts are downloaded according to the browser

    but can anyone help me make it work for explorer and firefox
    plzzzzzzzzzz

    thanks , rachel

  • #2
    Regular Coder Zangeel's Avatar
    Join Date
    Oct 2007
    Location
    public_html/
    Posts
    638
    Thanks
    17
    Thanked 79 Times in 79 Posts
    This isn't so easy because it involves many effects, and it's not so simple to just rip code from some site. I wrote up a little script to get you started, all you need to do is add some fancy effects and it'll be somewhat similar, it's just an example.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<meta name="author" content="Me" />
    
    	<title>Bingathon</title>
    </head>
    
    <body>
    
    <style>
    body{font-family:trebuchet ms;}
    div.bg {background:url('http://www.bing.com/fd/hpk2/BaliRiceField_EN-US1521783801.jpg'); width:958px; height:512px;}
    div.box 
    {
      
      width:100px;
      height:100px;
      margin:30px 50px;
      background-color:#ffffff;
      border:1px solid black;
      filter:alpha(opacity=60);
      opacity:0.6;
      
    }
    
    div.box2
    {
      width:100px;
      height:100px;
      margin:30px 50px;
      border:2px solid white;
      float:left;
    }
    
    div.info
    {
    	float:left;
    	display:none;
    	margin-left:10px;
    	
    }
    
    div.info2
    {
    	float:left;
        margin:30px 0px;
    	border:1px solid black;
    	width:150px;
    	padding:4px;
    	height:75px;
    	background-color:white;
        filter:alpha(opacity=40);
        opacity:0.4;
    }
    </style>
    
    <div class="bg">
    
    <div id="box" class="box" onmouseover="bing();" onmouseout="bingout();"></div><div class="info" id="information">This area is pretty. Come visit Bali.</div>
    
    </div>
    
    
    <script>
    function bing()
    {
    	document.getElementById('box').className = 'box2';
    	document.getElementById('information').className = 'info2'
    }
    
    function bingout()
    {
    	document.getElementById('box').className = 'box';
    	document.getElementById('information').className = 'info'
    }
    </script>
    
    </body>
    </html>


  •  

    Posting Permissions

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