Question

I am trying to create/invent a new javascript slider object which will work by displaying a base line image:
https://i.stack.imgur.com/GMUk6.png

then I want to use these ‘knobs’ to layer on top depending on certain circumstances

https://i.stack.imgur.com/er7CE.png
These have already been ‘cut up’ and will be placed on one of the three black knobs. I have many different colors because I plan to run through them so that the color appears to transform from one, to the other.

So I need to be able to attach an image to the id I received from the user and then manipulate the image later.

My code:

<div id='option1'></div>

<script type="text/javascript">

var slide1 = new slider("option1");

My constructor will look something like this:

function slider(id) {

var obj = document.getElementById(id);
if (!obj) { 
var state = -1;
return -1;
}
var state = 0; //blank state

//alert("in");
//alert(document.getElementById(id).className);

//this.addClass("hSliderBack"); INCORRECT SYNTAX!!!
$("#"+id).addClass("hSliderBack"); //this works
}

I fixed the problem with the addClass above, though a little ugly.

My CSS script:

.hSliderBack
{
background-image: url('/Switches/switchLine.png');
background-repeat: no-repeat;
padding-left: 2px;  /* width of the image plus a little extra padding */
display: block;  /* may not need this, but I've found I do */
}

This is how I can add a picture to my constructor. Still a lot of work to do, but at least it’s a start. Any comments are still appreciated as I am very green!!

Answer 1

What you write here:

//obj.innerHTML = "<img src=' this doesn't seem right to me.

is in fact one perfectly reasonable and viable way. You enter into the DOM the <img> node referencing the image you want to display.

However, more common and perhaps more maintainable solution in many cases is to have a CSS style that references a background image, and you enter a <div> into the DOM using the style that causes your image to be displayed.

You should ask yourself, though, is it best to do this without any support from tools. Many of the most popular JavaScript libraries have tools like this built in, or at the very least, have methods that make building this type of code much, much easier.

Of course, if you are doing this to learn the basics of web development before using a framework so you understand what they are doing more thoroughly, more power to you 🙂