• 0

Cycling through images on hover - making more than one?


Go to solution Solved by Seahorsepip,

Question

PortalPacific

-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

Link to post
Share on other sites

8 answers to this question

Recommended Posts

  • 0
Seahorsepip

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.

Link to post
Share on other sites
  • 0
PortalPacific

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. 

Link to post
Share on other sites
  • 0
PortalPacific

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

 

Link to post
Share on other sites
  • 0
Seahorsepip

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

Link to post
Share on other sites
  • 0
Seahorsepip

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!

Link to post
Share on other sites
This topic is now closed to further replies.
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By zikalify
      U.S. Supreme Court sides with Google in Java dispute
      by Paul Hill



      The United States Supreme Court has sided with Google over its use of a Java API which Oracle argued it owned the copyright to. The long-running battle has been going on for nearly 11 years now after Oracle opened fire by suing Google. Over the years, the dispute has been through a range of courts with various judges ruling for this side and that but today’s decision should be more final.

      According to the document published by the Supreme Court, Google copied 11,500 lines of code from a Java API (Application Programming Interface). The court decided that this was allowed under fair use because it was needed to allow programmers to “put their accrued talents to work in a new and transformative program”.

      On the 44th page of the document, Justice Clarence Thomas dissenting in favour of Oracle said that Google initially sought to license the code for use in Android but after the two couldn’t agree on terms Google simply copied the 11,500 lines of code “verbatim”. He said that this wiped out 97.5% of the value of Oracle’s partnership with Amazon and helped Google establish itself as the owner of the biggest mobile operating system in the world.

      Despite the win today for Google, the firm has been very busy for the last several years actively promoting Kotlin for use in building Android apps. The company has also been building a new operating system called Fuchsia OS which could ultimately replace Android and put the whole argument over Java to bed once and for all.

    • By News Staff
      Pay What You Want for this Complete Learn to Code Certification Bundle
      by Steven Parker

      Today's highlighted offer comes via our Online Courses section of the Neowin Deals store, where you can Pay What You Want for the Complete Learn to Code Certification Bundle. A price you pick gets you 156 hours of premium coding instruction, from Python to Ruby and everything in between.



      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the unlocked course:

      JavaScript Programming Complete
      Work Towards a Lucrative Career in Web Development by Building Real-World JavaScript Projects Or beat the the average price to get these as well:

      Learn How To Code: Google's Go Programming Language
      Go is an open source programming language developed by Google that makes it easy to build simple, reliable, and efficient software. The Complete Python Course: Beginner to Advanced!
      Get the Complete A to Z Story on Python & Start Building Advanced Programs Fast

      Learn By Example: Scala
      Master This Highly Scalable General-Purpose Language with 65 Examples

      Projects in Programming Languages: Ruby, Python, Java
      Learn 3 of the Most Financially Viable Programming Languages by Solving Real-World Problems

      Learn Angular 2 from Beginner to Advanced
      Use the Newest Version of this Powerful Google Framework to Build Complex Apps

      How to Make a Freaking iPhone App: iOS 10 and Swift 3
      Nail Down the Development Fundamentals of the Hottest New OS

      The Complete Web Developer Masterclass: Beginner To Advanced
      Become an Employable Web Developer by Learning HTML, JavaScript, Angular, NodeJS, & Much More

      Git Complete Mastery & GitHub: 100% Hands-on Git Guide
      Develop a Rock Solid Foundation in Git & Start Building Programs More Efficiently

      Professional Rails Code Along
      Develop a Real World Rails Project Through a Step-by-Step Process

      Good to know:
      The bundle represents an overall retail value of $1,573 But you can Pay What You Want for the two unlocked courses (as little as $1) Beat the average price and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway. Pay What You Want for the Complete Learn to Code Certification Bundle
      See other Pay What You Want deals. This is a time limited deal.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other deals on offer you can check out here.



      Giveaways: Home Arcade Polycade | Complete Home Gym | $10K in Crypto currency Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Pay What You Want for this Java Master Class Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where for only a limited time you can Pay What You Want for this Java Master Class Bundle. Kickstart your coding career with 50+ hours of training in the world's most popular programming language.



      How does it work?
      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the unlocked item:

      Java Game Development: Create a Flappy Bird Clone
      Use the World's Most Popular Programming Language to Create Your First Game

      Or beat the average price to also get the following items:

      Oracle Java SE 8 Certification Course
      Get Your Java Skills Online in This 14-Hour Primer

      Java Web Services and XML: ORACLE Exam Preparation
      Enhance Your Java Toolkit with an Introduction to XML

      JavaFX: Building Client Applications
      Walk Through Building Your First JavaFX App in 3 Hours

      Mastering Java Swing & GUI Applications
      Learn How to Write GUI Applications in Java

      Java Web Technologies Course
      Get Java-Savvy & Prep for an Oracle Certification Exam

      Professional Web Scraping with Java
      Collect Mounds of Valuable Data by Web Scraping

      Java Hibernate Object/Relational Mapping (ORM) Course
      Come to Grips with Java's Hibernate Tool

      Java Spring MVC Quickstart Course
      Create Web Apps Using the Java Spring Framework

      Learn Java From Scratch
      Go From Beginner to Expert in the Web's Most Popular Language - Over 9 Hours of Training

      Here's the deal:
      The bundle represents an overall retail value of $960 But you can Pay What You Want for the unlocked course (as little as $1) Beat the average price and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway. Pay What You Want for this Java Master Class Bundle
      See other Pay What You Want deals This is a time-limited deal.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other deals on offer you can check out here.



      Giveaways: Home Arcade Polycade | Complete Home Gym | $10K in Crypto currency Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Pay What You Want for this Learn to Web Design Bundle
      by Steven Parker

      Today's highlighted offer comes via our Online Courses section of the Neowin Deals store, where for only a limited time you can Pay What You Want for the Learn to Web Design Bundle. Break into the lucrative world of professional web design with up to 75 hours of content.



      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the unlocked course:

      Design a Website From Scratch: HTML, CSS, Responsive Design
      Create Responsive Websites Using the Foundational Blocks of Web Design

      and unlock the following courses with a minimum of the average price:

      Learn Photoshop, Web Design & Profitable Freelancing 2017
      Discover the Photoshop Workflow & Establish a Lucrative Freelancing Career

      Adobe Photoshop CC: Your Complete Beginner's Guide
      The World's Most Popular Photo Editing Software Taught to You From A to Z

      Responsive Web Design: Made Easy
      Learn the Basics of HTML5 & CSS3 & Start Designing Dynamic Websites

      The Complete Bootstrap Masterclass Course: Build 4 Projects
      Discover the Scalability of Bootstrap by Building 4 Real, Responsive Projects

      jQuery UI Ultimate: Design Amazing Interfaces Using jQuery UI
      Implement A Wide Range of Interactivity Into Websites & Make Your Resume Stand Out

      UI Design in Photoshop: Start Designing Web & Mobile Apps
      Optimize Adobe Photoshop for Web & Mobile Design

      Building Websites: Learn Bootstrap for Rapid Web Development
      Enhance Your Development Workflow by Learning this Efficient Scaling Framework

      Web Design: Make a Single Page Website Carousel Controls
      Build a Completely Dynamic Webpage as the First Step Towards Web Design Mastery

      What's the benefit?
      The bundle represents an overall retail value of $1,048. But you can Pay What You Want for the unlocked courses (as little as $1). Beat the average price and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway. Pay What You Want for the Learn to Web Design Bundle
      See other Pay What You Want deals. This is a time-limited deal that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other deals on offer you can check out here.



      Giveaways: Home Arcade Polycade | Complete Home Gym | $10K in Crypto currency Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Pay What You Want for this Java Master Class Certification Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where for only a limited time you can Pay What You Want for this Java Master Class Bundle. Kickstart your coding career with 50+ hours of training in the world's most popular programming language.



      How does it work?
      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the unlocked item:

      Java Game Development: Create a Flappy Bird Clone
      Use the World's Most Popular Programming Language to Create Your First Game

      Or beat the average price to also get the following items:

      Oracle Java SE 8 Certification Course
      Get Your Java Skills Online in This 14-Hour Primer

      Java Web Services and XML: ORACLE Exam Preparation
      Enhance Your Java Toolkit with an Introduction to XML

      JavaFX: Building Client Applications
      Walk Through Building Your First JavaFX App in 3 Hours

      Mastering Java Swing & GUI Applications
      Learn How to Write GUI Applications in Java

      Java Web Technologies Course
      Get Java-Savvy & Prep for an Oracle Certification Exam

      Professional Web Scraping with Java
      Collect Mounds of Valuable Data by Web Scraping

      Java Hibernate Object/Relational Mapping (ORM) Course
      Come to Grips with Java's Hibernate Tool

      Java Spring MVC Quickstart Course
      Create Web Apps Using the Java Spring Framework

      Learn Java From Scratch
      Go From Beginner to Expert in the Web's Most Popular Language - Over 9 Hours of Training

      Here's the deal:
      The bundle represents an overall retail value of $960 But you can Pay What You Want for the unlocked course (as little as $1) Beat the average price and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway. Pay What You Want for this Java Master Class Bundle
      See other Pay What You Want deals This is a time-limited deal.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other free eBooks on offer you can check out here.



      Home Gym Giveaway | Bitcoin (BTC) Investment Giveaway Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: A valid email address is required to fulfill your request. Complete and verifiable information is required in order to receive this offer. By submitting a request, your information is subject to TradePub.com's Privacy Policy.