Solved

Customize an item - how to? - similar to color switcher.

Posted on 2013-10-24
7
245 Views
Last Modified: 2013-11-26
Take a look at this site: http://www.gamermodz.com/xbox-360-create-a-controller-modded-controller.asp

Is there a script out there that can handle this whole operation? I don't mind paying for one. I can't seem to find one anywhere, or I just don't know what it's called to do the right research.

Hope this is an easy 500 points.

Thank you.
0
Comment
Question by:Lanmarkian
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
7 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39598668
There is no magic.  Just smoke and mirrors like most websites. If you hunt around the site you can see there are just a lot of images that get loaded.  Click on the the color squares on the right that customize the controller are just switching out different images.

cc2bb2
0
 

Author Comment

by:Lanmarkian
ID: 39598925
I appreciate that, but that doesn't help. How does it work? That's what I am looking for.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39599325
It is just layers.  This is just like mister potato head.  You just switch out parts to get a different look.  You can see from the code below, each image is interchangeable based one what was selected.

Scripts that do this will all be custom.

<div id="app-viewer" style="width: 1px; height: 1px;">
	<img id="xbox_load_img" src="/cac/res/loading.png" style="position: absolute; left: 0px; top: 0px; z-index: 4; display: none;">
	<img id="xbox_shell0" class="app-layer-image" src="/cac/consoles/xbox/shell/05-012.png" alt="" style="visibility: visible; position: absolute; z-index: 1;">
	<img id="xbox_trim0" class="app-layer-image" src="/cac/consoles/xbox/trim/02-001.png" alt="" style="visibility: visible; position: absolute; z-index: 2;">
	<img id="xbox_bumper0" class="app-layer-image" src="/cac/consoles/xbox/bumper/04-012.png" alt="" style="visibility: visible; position: absolute; z-index: 2;">
	<img id="xbox_thumb0" class="app-layer-image" src="/cac/consoles/xbox/thumb/00-001.png" alt="" style="visibility: visible; position: absolute; z-index: 2;">
	<img id="xbox_dpad0" class="app-layer-image" src="/cac/consoles/xbox/dpad/01-001.png" alt="" style="visibility: visible; position: absolute; z-index: 2;">
	<img id="xbox_abxy0" class="app-layer-image" src="/cac/consoles/xbox/abxy/06-024.png" alt="" style="visibility: visible; position: absolute; z-index: 2;">
	<img id="xbox_led0" class="app-layer-image" src="/cac/consoles/xbox/led/08-000.png" alt="" style="visibility: visible; position: absolute; z-index: 2;">
	<img id="app-wmark" src="/cac/skin/gamermodz/watermark.png" alt="XBOX 360 Custom Modded Controller" title="XBOX 360 Custom Modded Controller" class="app-layer-image" style="position: absolute; z-index: 3;">
</div>

Open in new window

0
 

Author Comment

by:Lanmarkian
ID: 39601465
Can you show me a working example of this with the code? jsfiddle perhaps?

Thanks
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39601791
Here is a basic working sample http://jsbin.com/iGEkUcO/1/
This is a simple example. There are many ways to get the same visual outcome.  You will see the images are in layers using absolute positioning and the z-index sets the layer where the higher the number is on top.

When you hover over the main div, the image with class control_main will have it's image src changed from the default to the gold.  When the mouse moves away (mouseout), it goes back to red.  You can do the same thing with buttons or icons or color div's using the click function http://api.jquery.com/click/.

Before going too deep in this, I encourage you to at least get a solid understanding of html and css if you don't already. Code Academy http://www.codecademy.com/tracks/web is a good soure. Once you have that down, then go on to jquery http://www.codecademy.com/learn and even spend a little time with javascript since that is what jquery is built on.  If you don't have a good understanding of html/css first, this will be confusing.  Plan on spending at least 5 to 10 hrs on codecademy or something similar to practice and learn.  You will save 100 fold in the long run.

Next, play with adding buttons or icons instead of the hover. From there add more layers.  Take it one step at a time and make sure you undersand each step.

If you get stuck, create a new question and remember to post your sample code.

Good luck on your project.


<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset="UTF-8">
  <title>Padas:Hover Me</title>
<style>

</style>
</head>

<body>
  <h1>Hover Me Test</h1>
 <div class="gamecontroler">
  <img class="control_main" src="http://filedb.experts-exchange.com/incoming/2013/10_w43/t684534/controler.png">

    <img class="control_buttons" src="http://filedb.experts-exchange.com/incoming/2013/10_w43/684537/06-024.png">
    
  </div>
</body>
</html>

Open in new window

.gamecontroler{margin-top:50px;}
.control_main{
	position: absolute; 
	top: 80px;
	width:100%;
	 z-index:10;}
.control_buttons{
	position: absolute;
	top: 80px;
	z-index:20;
	width:100%;
}

Open in new window


$(function () {
    var gold = 'http://filedb.experts-exchange.com/incoming/2013/10_w43/684535/controler2.png';
    var red = 'http://filedb.experts-exchange.com/incoming/2013/10_w43/t684534/controler.png';
    $('.gamecontroler').mouseover(function () {
        $('img.control_main').attr('src', gold);

    });
    $('.gamecontroler').mouseout(function () {
        $('img.control_main').attr('src', red);

    });

});

Open in new window

0

Featured Post

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to dynamically set the form action using jQuery.

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question