Connecting Tech Pros Worldwide Forums | Help | Site Map

<IMG> with other images over it

johanvdv
Guest
 
Posts: n/a
#1: Aug 17 '06
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
Guest
 
Posts: n/a
#2: Aug 17 '06

re: <IMG> with other images over it


johanvdv wrote:
Quote:
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,

--
Bart

Yanick
Guest
 
Posts: n/a
#3: Aug 17 '06

re: <IMG> with other images over it


johanvdv wrote :
Quote:
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
Guest
 
Posts: n/a
#4: Aug 18 '06

re: <IMG> with other images over it


"johanvdv" <johan.vandevenne@gmail.comwrote in message
news:1155811081.362234.125320@i42g2000cwa.googlegr oups.com...
Quote:
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@gmail.com
Guest
 
Posts: n/a
#5: Aug 19 '06

re: <IMG> with other images over it



Yanick wrote:
Quote:
johanvdv wrote :
>
Quote:
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.
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.

Closed Thread