Solved

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

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jquery datatables, asp.net MVC 9 41
Jquery 10 20
Older JQuery functionality is not in the newer JQuery 1.4.4 versions, 6 25
tiny glitch in my main slider 3 24
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
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…
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 …

803 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