...

View Full Version : help a girl with some javascript stuff



code4
07-26-2009, 11:55 PM
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

Zangeel
07-27-2009, 03:56 AM
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.



<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum