WordPress.org

1. frederiki
   Member
   Posted 1 year 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).

2. Rev. Voodoo
   Volunteer Moderator
   Posted 1 year 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.....)

Topic Closed

This topic has been closed to new replies.