Solved

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

Posted on 2013-10-24
7
246 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

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

This article discusses how to implement server side field validation and display customized error messages to the client.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

632 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