Images placed on elipse shape

[Lestatt]

Hello.
I tried to do this in a few ways, but it was too complicated, too messed up code or didn't worked at all.
I need 13 small images placed in elipse shaped around big logo, something like that:


Uploaded with ImageShack.us

Additionally i need to make simple onhover effect (on mouse over image get more saturated and back to normal when mouse is off image).

[djr33]

You could position PNG or GIF images with a transparent background using CSS. Then you could use normal rollover image methods to change it on hover.

Or you could just use a single image and use an image map to create the links. That wouldn't make a mouseover effect easy, though.

[Lestatt]

Do I have to create separate DIV for every image or id/class?

[djr33]

That's one option, but you don't need to do that. You could style the <img> tag itself to be positioned like that. It might include using display:block to make it behave like a div.
But using a <div> might also help, depending on exactly what you want to do, such as, for example, potentially including text labels near the images or as an alternative to the labels.

[Lestatt]

I did it before on DIVs, but the code was so messed up so i looked for another option.

[djr33]

However you do it, that code is going to be complex. Using proper tabs and adding in some comments would help to clean it up.

Personally, I'd generate it using PHP automatically, using a function that has three arguments: image URL, X-coordinate, Y-coordinate. Then I'd only need to design the code one time, and then the PHP code could generate all of them automatically. (Or another language like ASP, CGI, Perl, etc., could do the same thing.)
You could do something similar using Javascript, but that's not a reliable option because it isn't guaranteed to work in all browsers-- Javascript might be disabled.

[Lestatt]

Could you lend a PHP code like that? I'm actually lame with PHP.

Positioning like

<img style="position:absolute; display:block; top:50%; left:50%; height:46px; width:auto;" src="/index_files/images/loga/same-on.png" width="162" height="45" alt="Same" />

and so on will do the thing?

[djr33]

PHP wouldn't make the HTML code. It would just automate making 13 copies of it.

<?php
function imagecode($url,$x,$y) {
?>
<div style="position:absolute;left:<?php echo $x; ?>;top:<?php echo $y; ?>;">
<img src="<?php echo $url; ?>">
</div>
<?php
}

imagecode('myimg.jpg',10,50);
imagecode('myimg2.jpg',60,5);
imagecode('myimg3.jpg',100,150);
//...

?>

Adjust as needed.

Note that for a rollover you'd need a second image URL. There are two options:
1) Use the same URL with one change, so you could still use one function argument. (Then just add "2" to the end of the URL or something.)
2) Use a new URL, and add it as a new argument to the function, like ...($url,$rollover_url,...), and add <?php echo $rollover_url; ?> where you need it in the HTML code.

[Lestatt]

Thank you, I'll manage to do it myself from this point.

[djr33]

No problem. I just noticed a typo and fixed it-- I had reversed X and Y (X should be horizontal and Y vertical). Once adjusted, that should work. It may not be all of the HTML you need, but that's the format you'd use in PHP.