0

I have a svg image on the left and want to align input fields vertically on the right corresponding to areas of the image. eg the mouth input field should be at the same level of it's mouth (see jsfiddle)

https://jsfiddle.net/om0wr6zL/

The problem is the vertical location of the input fields move relative to the image when the window is resized.

How do I make those input fields move in relation to the image?

HTML:

<div id="container">
    <div id="penguin"> 
            <img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg" >

    </div>

    <div id="mouth" >
       Mouth: <input type="text"  >     
    </div>
</div>

CSS:

#container {
width: 100%;
height: auto;
position: ;
top: 0px;
left: 0px;
}
#penguin img {
width: 100%;
height: auto;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
honky123
  • 1
  • 1
  • please read this [What should I do when someone answers my question?](http://stackoverflow.com/help/someone-answers) – Stickers Mar 26 '15 at 15:01
  • I've decided to build it into the svg using something like this: http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript – honky123 Mar 28 '15 at 01:02

0 Answers0