adding two rollover images to pausing javascript code

Page 1 of 1

8 Replies - 557 Views - Last Post: 04 December 2011 - 12:02 PM

#1 Repatilian  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-September 11

adding two rollover images to pausing javascript code

Posted 26 November 2011 - 11:03 PM

Hi i have two images which are part of a rollover button that i want to have paused until the intro animation finishes. I have the javascript code but the rollover images are specified in the css. I just have the id to them in the html. I was wondering if anyone knew how to include the rollover files with the pausing javascript code. the files are profile.gif and profileover.gif. I tried to add the files to the preload part of the javascript but that didn't work. The website is www.creationindex.com/indextest.html thank you


I've tried to code on www.creationindex.com/indextest2.html

My linkMy link

Is This A Good Question/Topic? 0
  • +

Replies To: adding two rollover images to pausing javascript code

#2 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 934
  • View blog
  • Posts: 2,329
  • Joined: 15-February 11

Re: adding two rollover images to pausing javascript code

Posted 27 November 2011 - 08:04 PM

Hey,
Use Javascript to perform the rollover so you'll have full control over it. I'm not sure what you mean by pausing the button but please explain your problem a bit clearer and also provide some code so we can have an idea what's going on.
Was This Post Helpful? 0
  • +
  • -

#3 Repatilian  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-September 11

Re: adding two rollover images to pausing javascript code

Posted 27 November 2011 - 10:54 PM

i tried to use this code to do the rollover but when i tried to add another button neither one of them would display.
<a href="page.html" onmouseover="example.src='images/bt_rollover.jpg'" onmouseout="example.src='images/bt_normal.jpg'" onmousedown="example.src='images/bt_action.jpg'"><img src="images/bt_normal.jpg" alt="Image Alt text" name="example" width="100" height="100" border="0" /></a>



My entire site loads after the beginning animation completes. Here is the code of my site. The rollover button is included in the css. And has an id in the html. 
<!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(){

/* this value is 4 seconds, which is the time that logospintest.gif takes to run it's course */

   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>
<a href="index.html" id="myRollover1">
 </a>


</body>
</html>






you can see the site at www.creationindex.com/indextest.html
Was This Post Helpful? 0
  • +
  • -

#4 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 934
  • View blog
  • Posts: 2,329
  • Joined: 15-February 11

Re: adding two rollover images to pausing javascript code

Posted 28 November 2011 - 06:03 AM

Javascript doesn't know what example is.

I'm guessing example is referring to the image element. In this case since it's just one element you should use the ID attribute to identify it instead of NAME.

Run through this example and you'll see how all the events are assigned and how they work
<html>
<head>
	<script type="text/javascript">
		window.addEventListener('load', function(){
			//this is our text element
			var input = document.getElementById('num');
			
			//Add a mouseover event handler to our button
			document.getElementById('button').addEventListener('mouseover', function(){
				input.value = 'Over'; //change the text element's value to Over
			}, false);
			
			//Add a mousedown event handler to our button
			document.getElementById('button').addEventListener('mousedown', function(){
				input.value = 'Down'; //change the text element's value to Down
			}, false);
			
			//Add a mouseup event handler to our button
			document.getElementById('button').addEventListener('mouseup', function(){
				input.value = 'Up'; //change the text element's value to Up
			}, false);
			
			//Add a mouseout event handler to our button
			document.getElementById('button').addEventListener('mouseout', function(){
				input.value = 'Out'; //change the text element's value to Out
			}, false);
		}, false);
	</script>
</head>
<body>
    <input type="text" id="num">
    <button id="button">Check this out</button>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#5 Repatilian  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-September 11

Re: adding two rollover images to pausing javascript code

Posted 28 November 2011 - 07:30 PM

this didn't work but is this closer to what it should be? 

<!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','profile.gif','profileover.gif');

function init(){

/* this value is 4 seconds, which is the time that logospintest.gif takes to run it's course */

   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='';
   document.getElementById('button').className=''; 
  
},delay 
   );
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
</script>

<script type="text/javascript">

   window.addEventListener('load', function(){

     //this is our text element

   var input = document.getElementById('num');

     //Add a mouseover event handler to our button

   document.getElementById('button').addEventListener('mouseover', function(){
   input.value = 'Over'; //change the text element's value to Over
   }, false);

     //Add a mousedown event handler to our button

   document.getElementById('button').addEventListener('mousedown', function(){
   input.value = 'Down'; //change the text element's value to Down
   }, false);

     //Add a mouseup event handler to our button

   document.getElementById('button').addEventListener('mouseup', function(){
   input.value = 'Up'; //change the text element's value to Up
   }, false);

     //Add a mouseout event handler to our button

   document.getElementById('button').addEventListener('mouseout', function(){
   input.value = 'Out'; //change the text element's value to Out
   }, false);
   }, false);
</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; 
}
#button {
background-image:url(profile.gif);
width:151px;
height:151px;
display:block;

}

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


</head>
<body>

<input type="text" id="num">
<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="">
 <a href="index.html"><img id="button" height="151" width="151" class="hide">
 </a>

<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="">
 <a href="index.html"><img id="button1" height="151" width="151">
 </a>


</div>
</noscript>

</div>



</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#6 Repatilian  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-September 11

Re: adding two rollover images to pausing javascript code

Posted 28 November 2011 - 07:56 PM

someone told me javascript doesn't handle animated gifs. My button is animated.
Was This Post Helpful? 0
  • +
  • -

#7 Repatilian  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-September 11

Re: adding two rollover images to pausing javascript code

Posted 29 November 2011 - 01:42 AM

i added this code and it did what i want but it didn't display the onmouseover file. 

<a href="index.html" onmouseover="button1.src='profileover.gif'" onmouseout="button1.src='profile.gif'" 
 onmousedown="button1.src='profile.gif'"><img id="profilebut" class="hide" src="profile.gif" alt="Image Alt text" id="button1" width="151" height="151" border="0" /></a>

Was This Post Helpful? 0
  • +
  • -

#8 Repatilian  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-September 11

Re: adding two rollover images to pausing javascript code

Posted 04 December 2011 - 03:16 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 i added an id.
Was This Post Helpful? 0
  • +
  • -

#9 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 934
  • View blog
  • Posts: 2,329
  • Joined: 15-February 11

Re: adding two rollover images to pausing javascript code

Posted 04 December 2011 - 12:02 PM

Read up on these links also so in the future this will be a lot easier and clearer to you:
Javascript: Introduction to Events
Understanding "event handlers" in Javascript
attachEvent & addEventListener
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1