dynamically modify image and place a text using javascript/jquery

Question

I have the above image. My task is to dynamically change the values where L, A and B appears; I have to remove/hide the L,A and B and replace it using a numerical value. I used fireworks to make slices of the region where L, A and B are located and exported it as HTML file. My idea was to define ids to all the three slices/regions, using jquery get the ids hide the region and then display the required value over the existing region. I am able to hide the values L, A and B but I am not able to display the value over those defined regions ( each region is a table). I do not know if I am doing in a round about way, since I am not a web developer. If there are easier ways I would be happy to know.

Answer 1

Ok, if every region is a table cell, so what you need to do is to create an empty cell at the points you want to change content, them you declare an id for this (cell), and use pure JS or jquery (easier), to change its content. Like:

<td id="was_L">

...

$("#was_L").val('15')

....

Maybe you also have to set size of this cell using style to keep the table looking fine. Like:

<td id="was_L" style="width:100px; height:100px">

Answer 2

You can't very easily modify an image in javascript. You can solve your problem though by separating your image into multiple images with all but one being transparently on top of a base image and you can then change/hide/show the top images to accomplish what you want.

It's probably better to use transparent overlaid PNG images rather than replacing individual slices. And, it's a a lot more flexible because the base image only has to be present in one image and the others can contain only what they are supposed to represent.

You would use absolute positioning inside a relative container in order to position overlaid images or overlaid text objects.

For example, this will create a background with two overlaid images on one overlaid piece of text:

<div id="container>
    <img id="overlay1" src="xxx.png">
    <img id="overlay2" src="yyy.png">
    <div id="text1">Some Text</div>
</div>

And, then some CSS like this:

#container {
    position: relative;
    height: 400px;
    width: 300px;
    background-image: url(bbb.jpg);
}

#overlay1 {
    position: absolute;
    top: 20px;
    left: 50px;
    z-index: 1;
}

#overlay2 {
    position: absolute;
    top: 150px;
    left: 150px;
    z-index: 1;
}

#text1 {
    position: absolute;
    top: 300px;
    left: 150px;
    z-index: 2;
}

At, any time you can then just hide or show an of the individual components or change the text. For example to hide the text element, you would just use:

$("#text1").hide();

To change the text, you should just use:

$("#text1").html("Different Text");