Jump to content



Photo

Cycling through images on hover - making more than one?

Answered Go to the full post java html css cycle images

  • Please log in to reply
8 replies to this topic

#1 +Veggie1232

Veggie1232

    Neowinian

  • Tech Issues Solved: 1
  • Joined: 21-April 06
  • Location: Seattle, Washington

Posted 17 February 2014 - 15:36

-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.co...ins/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





#2 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 27
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 17 February 2014 - 15:59

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.



#3 OP +Veggie1232

Veggie1232

    Neowinian

  • Tech Issues Solved: 1
  • Joined: 21-April 06
  • Location: Seattle, Washington

Posted 17 February 2014 - 16:21

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. 



#4 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 27
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 17 February 2014 - 17:14   Best Answer

Here you go: http://www.filedropper.com/blockheads



#5 OP +Veggie1232

Veggie1232

    Neowinian

  • Tech Issues Solved: 1
  • Joined: 21-April 06
  • Location: Seattle, Washington

Posted 17 February 2014 - 17:32

OMG that is perfect! Thank you so much Seahorsepip!! I really really appreciate this!

 



#6 OP +Veggie1232

Veggie1232

    Neowinian

  • Tech Issues Solved: 1
  • Joined: 21-April 06
  • Location: Seattle, Washington

Posted 17 February 2014 - 20:28

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.co...ins/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!!

 



#7 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 27
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 17 February 2014 - 21:40

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

#8 OP +Veggie1232

Veggie1232

    Neowinian

  • Tech Issues Solved: 1
  • Joined: 21-April 06
  • Location: Seattle, Washington

Posted 18 February 2014 - 00:43

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

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

Thanks for all the help!! 



#9 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 27
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 18 February 2014 - 16:21

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!