how to dynamically replace css?
- by photographer
I've got an image on the page (class='image') within the div (class='galleria_wrapper') and want to place a caption (class='caption') at the lower right corner under that image.
The image could be vertical or horizontal, and making a fixed padding-right value let's say
.caption<{float:right;padding-top:5px;padding-right:90px;}
is not working for one or another. I need to switch on the fly padding-right value depending on horizontal or vertical image is currently on the page. I can theoretically access image's width through document.getElementByName('image').width although don't understand where to put that code. So, I probably need something like that:
document.getElementByClass('caption').padding-right =
(document.getElementByName('galleria_wrapper').width -
document.getElementByName('image').width)/2
Where do I put this code?
I do have that in my css file:
.caption{float:right;padding-top:5px;}
which places the caption below the image, but to far to the right (div 'galleria_wrapper' is wider than most of the images supposed to be displayed within that area).
I have an img tag in the html:
<img src=image title='this is caption' /></li>
...and some JavaScript which makes title displayed styled by the "caption" css definition.
How do I assign variable value for the padding-right without in-advance knowledge of particular image's width?
