align pictures horizontally without plugins

  • frederiki

    (@frederiki)


    12 years, 10 months ago

    Hello everybody.
    I am translating some greek comics into spanish and i want to paste them in my translation page. I achieved that if you move the mouse over the translated image you can see the original. I used this code:
    <img src=”normal.png” onmouseover=”this.src=’encima.png'” onmouseout=”this.src=’normal.png'” />
    Right now, the images are aligned vertically, so you have to move down each picture to go on and it’s very boring. So I would like to switch the pictures horizontally (like a slideshow or something like that).I know there are plugins for that, as nextgen gallery, but then i would loose the option to see the original while moving the mouse over the image.
    Somebody got an idea how to combine those effects? There is a code to execute in html without using plugins?
    In my page arkas.lachispita.org you can see some test images with the onmouseover effect (it may take some seconds).

Viewing 1 replies (of 1 total)
  • Rev. Voodoo

    (@rvoodoo)

    12 years, 10 months ago

    Well normally, you just float em all left, that causes them to align next to each other.

    The vast majority of themes should already have image positioning classes built in

    Take twentyten for example:

    .alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 24px;
	margin-top: 4px;
}

    So assigning 3 pictures the class of alignleft would cause them to line up next to each other horizontally (so long as the width of all 3 doesn’t exceed the width of the container element…..)

Viewing 1 replies (of 1 total)
  • The topic ‘align pictures horizontally without plugins’ is closed to new replies.