PDA

View Full Version : CSS position and padding problem



TinyScript
Mar 20th, 2009, 08:57 PM
I made a new discovery yesterday thanks to a script someone posted. I had never known I could get an image to swap using an onclick by just using a this.src="", so I decide to experiment with it and I'm working on an image based drop down menu. I'm going to use image mapping to do links from the image that opens up if I can get the poitioning and padding correct.

I want the image that opens up to 100px to do so downwards like a drop down menu. It does this if I set them to position: fixed; but the end images vanish when the first ones are clicked.

I hope you get what I mean.


<style>
#menu{
display:inline;

height:30px;

}
</style>
<body>
<div id="menu">
<img src="google.png" width="100px" height="30px"
onclick="this.src='image.jpg';this.style.height='100px';this.style.position='relative';this.style.padding='0p x 0px 70px 0px'"
onDblclick="this.src='google.png';this.style.height='30px';this.style.position='relative';this.style.padding='0p x 0px 0px 0px'">
<img src="google.png" width="100px" height="30px"
onclick="this.src='image.jpg';this.style.height='100px';this.style.position='relative';this.style.padding='0p x 0px 70px 0px'"
onDblclick="this.src='google.png';this.style.height='30px';this.style.position='relative';this.style.padding='0p x 0px 0px 0px'">
<img src="google.png" width="100px" height="30px"
onclick="this.src='image.jpg';this.style.height='100px';this.style.position='relative';this.style.padding='0p x 0px 70px 0px'"
onDblclick="this.src='google.png';this.style.height='30px';this.style.position='relative';this.style.padding='0p x 0px 0px 0px'">

</div>
</body>

TinyScript
Mar 20th, 2009, 09:16 PM
I figured it out.

I dropped the positioning and just added padding to the smaller images



<style>
#menu{
display:inline;

height:30px;

}
</style>
<body>
<div id="menu">
<img src="google.png" width="100px" height="30px" style="padding:0px 0px 70px 0px"
onclick="this.src='image.jpg';this.style.height='100px';this.style.padding='0px 0px 0px 0px'"
onDblclick="this.src='google.png';this.style.height='30px';this.style.padding='0px 0px 70px 0px'">
<img src="google.png" width="100px" height="30px" style="padding:0px 0px 70px 0px"
onclick="this.src='image.jpg';this.style.height='100px';this.style.padding='0px 0px 0px 0px'"
onDblclick="this.src='google.png';this.style.height='30px';this.style.padding='0px 0px 70px 0px'">
<img src="google.png" width="100px" height="30px" style="padding:0px 0px 70px 0px"
onclick="this.src='image.jpg';this.style.height='100px';this.style.padding='0px 0px 0px 0px'"
onDblclick="this.src='google.png';this.style.height='30px';this.style.padding='0px 0px 70px 0px'">

</div>
</body>