Connecting Tech Pros Worldwide Help | Site Map

<IMG> with other images over it

  #1  
Old August 17th, 2006, 11:25 AM
johanvdv
Guest
 
Posts: n/a
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

  #2  
Old August 17th, 2006, 11:35 AM
Bart Van der Donck
Guest
 
Posts: n/a

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

  #3  
Old August 17th, 2006, 01:25 PM
Yanick
Guest
 
Posts: n/a

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.

  #4  
Old August 18th, 2006, 02:15 PM
Michel Firholz
Guest
 
Posts: n/a

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


  #5  
Old August 19th, 2006, 08:25 PM
pegasusflightresources@gmail.com
Guest
 
Posts: n/a

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


Similar Threads
Thread Thread Starter Forum Replies Last Post
<img width="100px" ...> valid (X)HTML? Christian Hackl answers 7 December 18th, 2007 11:55 PM
Width attribute for <img> versus <img style="width:..." Gérard Talbot answers 15 August 19th, 2005 12:05 AM
Variable passing to script to fill html <img src="MyScript.Php?ImageName=KnownGoodData" > Gregory answers 14 July 17th, 2005 01:52 AM