|
|
Posted by Ben C on 10/22/06 14:17
On 2006-10-21, Leszek <leszekt80@poczta.onet.pl> wrote:
> Hi.
> I have a problem with <div> tag. I have two different types of images that
> need to be loaded into <div>
> First kind of image has height 640px and width 480px. Second has height
> 480px and width 680px. Image should have border 1px and color #999999. I did
> something like this:
>
> //css
>
> DIV.two{
> border-color: #999999;
> border-style: solid;
> border-width: 1px;
> width: 640px;
> height: 480px;
> }
>
> DIV.one{
> border-color: #999999;
> border-style: solid;
> border-width: 1px;
> width: 480px;
> height: 640px;
> }
>
> //css
>
> and in html document i have:
>
><div class="one"></div>
><div class="two"></div>
>
>
> Now i need to use only one <div> at the time, not both. Is it possible to
> turn off displaying one <div> while user is clicking on the link to image?
Yes, you can toggle between display: block and display: none, or between
visibility: hidden and visibility: visible using either JavaScript/DOM
or the :active pseudoselector.
> Or maybe there is way to use only one css rule for div and just change
> height and width when user click on the link to image?
You can do that too.
var img = document.getElementById("imageOne");
img.style.width = "640px";
....
etc.
Navigation:
[Reply to this message]
|