Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 250
  • Last Modified:

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

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
Lanmarkian
Asked:
Lanmarkian
  • 3
  • 2
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
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
 
LanmarkianAuthor Commented:
I appreciate that, but that doesn't help. How does it work? That's what I am looking for.
0
 
Scott Fell, EE MVEDeveloperCommented:
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
 
LanmarkianAuthor Commented:
Can you show me a working example of this with the code? jsfiddle perhaps?

Thanks
0
 
Scott Fell, EE MVEDeveloperCommented:
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now