<IMG> with other images over it

[johanvdv]

Hello,

I'm building a website which contains a floor plan of my house. I want
to indicate if some lights in my house are on or off. I thought I found
a good way to do it with filter.lights.addPoint (IE only) but this has
a limit of 10, which is not enough.

Has anyone has an idea how to archive this ? How can I add images to an
existing image on a certain position ?

Some sample code would be highly appreciated because I'm not really a
web developer...

thnx
johanvdv

 

[Bart Van der Donck]

Hello,

I'm building a website which contains a floor plan of my house. I want
to indicate if some lights in my house are on or off. I thought I found
a good way to do it with filter.lights.addPoint (IE only) but this has
a limit of 10, which is not enough.

Has anyone has an idea how to archive this ? How can I add images to an
existing image on a certain position ?

Something like this should get you started:

<img src="http://www.google.com/images/hp0.gif"
width="400" height="250" border="1"
style="position: absolute; top: 50px; left: 40px; z-index: 0">

<img src="http://www.google.com/images/hp1.gif"
width="100" height="40" border="1"
style="position: absolute; top: 100px; left: 80px; z-index: 1">

<img src="http://www.google.com/images/hp2.gif"
width="50" height="30" border="1"
style="position: absolute; top: 250px; left: 150px; z-index: 2">

Hope this helps,

 

[Yanick]

johanvdv wrote :

Hello,

I'm building a website which contains a floor plan of my house. I want
to indicate if some lights in my house are on or off. I thought I found
a good way to do it with filter.lights.addPoint (IE only) but this has
a limit of 10, which is not enough.

Has anyone has an idea how to archive this ? How can I add images to an
existing image on a certain position ?

Some sample code would be highly appreciated because I'm not really a
web developer...

thnx
johanvdv

In this type of UI design, Bart is right, the "position:absolute;" CSS
property is what you need. Play around with DIV's and IMG's to build
your interface the way you want it, then use Javascript to change
color, or replace the "src" attribute for any images that would
represent a changing state element of you interface.

 

[Michel Firholz]

Hello,

I'm building a website which contains a floor plan of my house. I want
to indicate if some lights in my house are on or off.

You should also include the plan of your intrusion detection devices, and a
button to switch them off.
scnr ;-)

Michel

 

[pegasusflightresources]

johanvdv wrote :


In this type of UI design, Bart is right, the "position:absolute;" CSS
property is what you need. Play around with DIV's and IMG's to build
your interface the way you want it, then use Javascript to change
color, or replace the "src" attribute for any images that would
represent a changing state element of you interface.

And you will have to change the visibility attribute to the divs
containing each image to show or hide them, all the while figuring out
the z-level numbers to see what images should go on top of which other
images, and in what order.