Log in

View Full Version : adding rollover button to javascript code


Repatilian
12-02-2011, 08:02 AM
Hi, how do you add a rollover button to my javascript code? My javascript delays the page from loading until the intro animation finishes. The rollover button filenames are profile.gif and profileover.gif. I have tried to add the filenames to the preload part of the javascript but that didn't work. The rollover button is specified in the CSS under id myrollover1. My website is www.creationindex.com/indextest.html My code is:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.creationindex.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Creation Index</title>

<script type="text/javascript">

var preloads=[];
function preload(){
for(var c=0;c< arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}
preload('logospining.gif','backgroundgreen.gif','lineback.gif','lettering.gif','alien.gif','equalizer.gif','buttonbar.gif');

function init(){

var delay=4950;

setTimeout(
function(){
document.getElementById('backgroundgreen').className='';
document.getElementById('lineback').className='';
document.getElementById('lettering').className='';
document.getElementById('alien').className='';
document.getElementById('equalizer').className='';
document.getElementById('buttonbar').className='';

},delay
);
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>


<style type="text/css">
html,body {
margin:0;
background-color:#000;
}
#images img {
width:100%;
}
#images #lettering,#images #lettering1 {
width:80%; /* adjust this value to suit your requirements */
left:10%; /* this value=(100%-width value)/2 */
}
#images #alien,#images #alien1 {
width:12.8%; /* adjust this value to suit your requirements */
left:50%; /* this value=(100%-width value)/2 */
}
#images #equalizer,#images #equalizer1 {
width:60%; /* adjust this value to suit your requirements */
left:21%; /* this value=(100%-width value)/2 */
}
#images img {
position: absolute;
top: 0;
left: 0;
}
.hide {
display:none;
}
#myRollover1 {
background-image:url(profile.gif);
width:151px;
height:151px;
display:block;

}
#myRollover1:hover {
background-image:url(profileover.gif);
}
</style>
</head>
<body>

<div id="images">
<img id="backgroundgreen" class="hide" style="height:100%" src="backgroundgreen.gif" alt="">
<img style="height:100%" src="logospining.gif" alt="">
<img id="lineback" class="hide" style="height:100%" src="lineback.gif" alt="">
<img id="lettering" class="hide" style="height:100%" src="lettering.gif" alt="">
<img id="alien" class="hide" style="height:100%" src="alien.gif" alt="">
<img id="equalizer" class="hide" style="height:100%" src="equalizer.gif" alt="">
<img id="buttonbar" class="hide" style="height:100%" src="buttonbar.gif" alt="">

<noscript>
<div>
<img id="backgroundgreen1" style="height:100%" src="backgroundgreen.gif" alt="">
<img id="lineback1" style="height:100%" src="lineback.gif" alt="">
<img id="lettering1" style="height:100%" src="lettering.gif" alt="">
<img id="alien1" style="height:100%" src="alien.gif" alt="">
<img id="equalizer1" style="height:100%" src="equalizer.gif" alt="">
<img id="buttonbar1" style="height:100%" src="buttonbar.gif" alt="">

</div>
</noscript>
</div>

</body>
</html>








Thank you.
Repatilian
12-02-2011, 08:16 AM
i want the rollover button to be in CSS.
vwphillips
12-02-2011, 10:10 AM
there is no element with an id of myRollover1

but


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.creationindex.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Creation Index</title>

<script type="text/javascript">

var preloads=[];
function preload(){
for(var c=0;c< arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}
preload('http://www.creationindex.com/logospining.gif','http://www.creationindex.com/backgroundgreen.gif','http://www.creationindex.com/lineback.gif','http://www.creationindex.com/lettering.gif','http://www.creationindex.com/alien.gif','http://www.creationindex.com/equalizer.gif','http://www.creationindex.com/buttonbar.gif');

function init(){

var delay=4950;

setTimeout(
function(){
document.getElementById('backgroundgreen').className='';
document.getElementById('lineback').className='';
document.getElementById('lettering').className='';
document.getElementById('alien').className='';
document.getElementById('equalizer').className='';
document.getElementById('buttonbar').className='';

},delay
);
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>


<style type="text/css">
html,body {
margin:0;
background-color:#000;
}
#images img {
width:100%;
}
#images #lettering,#images #lettering1 {
width:80%; /* adjust this value to suit your requirements */
left:10%; /* this value=(100%-width value)/2 */
}
#images #alien,#images #alien1 {
width:12.8%; /* adjust this value to suit your requirements */
left:50%; /* this value=(100%-width value)/2 */
}
#images #equalizer,#images #equalizer1 {
width:60%; /* adjust this value to suit your requirements */
left:21%; /* this value=(100%-width value)/2 */
}
#images img {
position: absolute;
top: 0;
left: 0;
}
.hide {
display:none;
}
#myRollover1 {
position:absolute;
top:300px;
background-image:url(http://www.creationindex.com/profile.gif);
width:151px;
height:151px;
display:block;
border:solid red 1px;

}
#myRollover1:hover {
background-image:url(http://www.creationindex.com/profileover.gif);
}
</style>
</head>
<body>

<div id="images">
<img id="backgroundgreen" class="hide" style="height:100%" src="http://www.creationindex.com/http://www.creationindex.com/backgroundgreen.gif" alt="">
<img style="height:100%" src="http://www.creationindex.com/logospining.gif" alt="">
<img id="lineback" class="hide" style="height:100%" src="http://www.creationindex.com/lineback.gif" alt="">
<img id="lettering" class="hide" style="height:100%" src="http://www.creationindex.com/lettering.gif" alt="">
<img id="alien" class="hide" style="height:100%" src="http://www.creationindex.com/alien.gif" alt="">
<img id="equalizer" class="hide" style="height:100%" src="http://www.creationindex.com/equalizer.gif" alt="">
<img id="buttonbar" class="hide" style="height:100%" src="http://www.creationindex.com/buttonbar.gif" alt="">

<noscript>
<div>
<img id="backgroundgreen1" style="height:100%" src="http://www.creationindex.com/backgroundgreen.gif" alt="">
<img id="lineback1" style="height:100%" src="http://www.creationindex.com/lineback.gif" alt="">
<img id="lettering1" style="height:100%" src="http://www.creationindex.com/lettering.gif" alt="">
<img id="alien1" style="height:100%" src="http://www.creationindex.com/alien.gif" alt="">
<img id="equalizer1" style="height:100%" src="http://www.creationindex.com/equalizer.gif" alt="">
<img id="buttonbar1" style="height:100%" src="http://www.creationindex.com/buttonbar.gif" alt="">

</div>
</noscript>
</div>
<div id="myRollover1" ></div>

</body>
</html>
Repatilian
12-03-2011, 06:29 AM
i tried your code but it didn't do anything. here's a page where i added your code www.creationindex.com/indextest13.html
vwphillips
12-03-2011, 10:42 AM
I tested your page with IE and FF and it works for me
Repatilian
12-04-2011, 12:43 AM
thank you
Repatilian
12-04-2011, 10:28 AM
i got it fixed i added this code:
<a href="index.html"
><img src="profile.gif" class="hide" border="0"
onmouseover="this.src='profileani.gif';" onmouseout="this.src='profile.gif';"
></a> and added an id.