9 posts in this topic

-Wasn't sure if I was suppose to post this in Webdesign section because I need help with Java.

I made it so when you hover over an image, it plays a sequence of images in a cycle, making a .png figure dance around until you remove your mouse.

I created the effect pretty easy (or found off the net i should say) and this is my first time using java.

My problem is now is when i create more than one. It only works on the last one i posted even if i change the id tags. So if I hover hover image 1 it makes image 2 and 3 cycle. 

Example can be seen here: http://miningmojo.com/Admins/Admins.html Although my hosting is apparently experiencing a DDOS attack so I hope you can reach it.


Another main concern is pre-loading the images so they dont lag. Is this possible? How would I achieve it>?

 

 

I also seem to be having problems with my Bottom buttons doing something similar. All the buttons are activating the first one.

 

JAVA:

// Disco -------------------------------------------------------------------------------
 var myImages = [2, 3, 4, 5, 1]
var img_index = 0;
var timer;
var imgId = "myImg";

// Start animation
function animate() {
    me = document.getElementById(imgId);

    me.src = "disco." + myImages[img_index] + ".png"
	
	

    img_index++;

    if (img_index == myImages.length){
        img_index = 0;
		
    }

    timer = setTimeout(animate, 150);
}

function stopAnimation() {
    clearTimeout(timer);
}

// Portal -------------------------------------------------------------------------------
 var myImages = [2, 3, 4, 5, 1]
var img_index = 0;
var timer;
var imgId = "myImg2";

// Start animation
function animate() {
    me = document.getElementById(imgId);

    me.src = "portal." + myImages[img_index] + ".png"
	
	

    img_index++;

    if (img_index == myImages.length){
        img_index = 0;
		
    }

    timer = setTimeout(animate, 150);
}

function stopAnimation() {
    clearTimeout(timer);
}


// zitrexzion -------------------------------------------------------------------------------
 var myImages = [2, 3, 4, 5, 1]
var img_index = 0;
var timer;
var imgId = "myImg3";

// Start animation
function animate() {
    me = document.getElementById(imgId);

    me.src = "zitrexzion." + myImages[img_index] + ".png"
	
	

    img_index++;

    if (img_index == myImages.length){
        img_index = 0;
		
    }

    timer = setTimeout(animate, 150);
}

function stopAnimation() {
    clearTimeout(timer);
}

HTML:

<div class="col4">
				
				<!-- discoball --------------------------------------------------------------------------------->				
				
				<center><h2>
					<span><span></span>discoball</span>
				</h2></center>
				
				<div class="content">
					<span class="corners_top"></span>
				  <img class="adminadmin" id="myImg3" onmouseover="imgId = this.id; timer = setTimeout(animate, 150);" onmouseout="stopAnimation();" src="disco.1.png" />
					<span class="corners_bottom"></span>
				</div>
                
                
                
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/contactme2.png',1)"><img src="images/contactme1.png" alt="Contact Me" width="296" height="45" id="Image4" /></a> 
                
                </div>
                
                <div class="col4">
				</-- Portal_Zii --------------------------------------------------------------------------------->				
				
				<center><h2>
					<span><span></span>Portal_Zii</span>
				</h2></center>
				
				<div class="content">
					<span class="corners_top"></span>
				  <img class="adminadmin" id="myImg2" onmouseover="imgId = this.id; timer = setTimeout(animate, 150);" onmouseout="stopAnimation();" src="portal.1.png" />
					<span class="corners_bottom"></span>
				</div>
                
                
                
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/contactme2.png',1)"><img src="images/contactme1.png" alt="Contact Me" width="296" height="45" id="Image4" /></a> 
                
                </div>
                
                <div class="col4">
				
				<!-- Zirexzion --------------------------------------------------------------------------------->				
				
				<center><h2>
					<span><span></span>Zitrexzion</span>
				</h2></center>
				
				<div class="content">
					<span class="corners_top"></span>
				  <img class="adminadmin" id="myImg" onmouseover="imgId = this.id; timer = setTimeout(animate, 150);" onmouseout="stopAnimation();" src="zitrexzion.1.png" />
					<span class="corners_bottom"></span>
				</div>
                
                
                
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/contactme2.png',1)"><img src="images/contactme1.png" alt="Contact Me" width="296" height="45" id="Image4" /></a> 
                
                </div>
                

Any help would be much appreciated. A bit over my head here but am trying! Lol

Share this post


Link to post
Share on other sites

Just make it a gif file in this case.

 

Send me each animation sequence in a zip and I'll send you a jsfiddle back ;)

 

 

Oh and this is the wrong section, javascript is absolutely not java so thread can be moved to web design.

Share this post


Link to post
Share on other sites

Just make it a gif file in this case.

 

Send me each animation sequence in a zip and I'll send you a jsfiddle back ;)

 

 

Oh and this is the wrong section, javascript is absolutely not java so thread can be moved to web design.

I made the first one/try an animated GIF. My problem is the lack of quality animated GIFS are. The background is too complex and without it there, it adds white pixels around the character. I was thinking maybe if each one had their own JS and html file than i could load individual html files.. But than I still have the issue with pre-loading. I plan to run all the PNG files through a compressor too so it loads faster just haven't gotten that far yet. 

Not sure what jsfiddle is.. Here is the zip file: http://portalpacific.net/screens.rar

Thanks so much!

 

 

Edit- Each set of images is 1-5.. But i removed image 4 from ever set. Just skip that one

 

Edit again- I accidentally left disco.4.png. Just delete that one. 

Edit- another reason I like the JS is because It stops on the last "pose" hovered on. 

Share this post


Link to post
Share on other sites

So now I am having problems with my CSS.. I cant seem to get 2 rows of 3 like I had before.

 

This is what it looks like now: http://miningmojo.com/Admins/Admins.html

Also when you hover over the image, it goes blank for a moment while loading the GIF. Is there a way to preload the gifs in the background? I am also having the same problem with the buttons under the admin photos.

 

I uploaded the page in a zip file if anyone can help!

Zip: http://miningmojo.com/admins.rar

Thank you!!

 

Share this post


Link to post
Share on other sites

I'll post a new index.htm with appropriate CSS tomorrow.

Share this post


Link to post
Share on other sites

I did it! Well, with the help of a friend.

Final product looking good: http://miningmojo.com/contact/

Thanks for all the help!! 

Inspected your code, did you use :hover in css to show the .hide element?

 

And more important use the class blockheadz and not the id blockheadz since a id should only be used once!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.