Solved

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

Posted on 2013-10-24
7
243 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
  • 3
  • 2
7 Comments
 
LVL 52

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 52

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 52

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

808 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