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:
http://img593.imageshack.us/img593/4650/clipboard011y.jpg (http://imageshack.us/photo/my-images/593/clipboard011y.jpg/)

Uploaded with ImageShack.us (http://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.

[Lestatt]

Oh, one more thing - I'm styling images like

<img src="<?php echo $url; ?>" style="height:46px;width:auto;">
but few of them should be bigger, than this height. How to do that?

[djr33]

Just add another argument to the function for width (and/or height), I guess. Or let it be determined automatically. There are also some functions in PHP for automatically generating image tags including the dimensions, so you could use that if you want.

[Lestatt]

Now it looks like

<?php
function imagecode($url,$x,$y,$h) {
?>
<div style="display:block;position:absolute;left:<?php echo $x; ?>;top:<?php echo $y; ?>;">
<img src="<?php echo $url; ?>" style="height:<?php echo $h; ?>;">
</div>
and it works, but I'm getting error: Notice: Undefined variable: h when one of pictures is missing height value, when value is present it's all ok. Is it correct behaviour?

[djr33]

It isn't optional. If you want it to be optional, you could try this, by setting a default value:
function imagecode($url,$x,$y,$h='auto') {

That will use the value of "auto" unless $h is specified in the function.

So now you can do either of the following:
imagecode('myimg.jpg',10,50,35); //35px height
imagecode('myimg.jpg',10,50); //default 'auto' height


One note: the way it's designed (and due to the flexibility of PHP) you can use either numbers (eg, 30) or strings (eg, '30px') for this. Your choice, based on what you want the HTML to look like in the end.

[Lestatt]

Thanks again. I was close :P

[Lestatt]

I'm trying to make that $rollover_url working, but in best case rollover image is placed to the right of the main image. How exactly should it be written?


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

imagecode('/index_files/images/loga/same-off.png','/index_files/images/loga/same-on.png',110,-140,36);
?>

I think I should use IF mouseover or something? Additionally every image in imagecode should be a link to website.

[Lestatt]

Ok, now my code looks like this:


<?php
function imagecode($url,$hover_url='', $x,$y,$h='auto') {
?>
<div style="display:block;position:absolute;left:<?php echo $x; ?>;top:<?php echo $y; ?>;">
<img src="<?php echo $url; ?>" style="height:<?php echo $h; ?>;"
onmouseover="this.src='<?php echo $hover_url ?>'" onmouseout="this.src='<?php echo $url ?>'">
</div>
<?php
}
imagecode('/index_files/images/loga/same-off.png','/index_files/images/loga/same-on.png',120,-140,36);
imagecode('/index_files/images/loga/deutz-off.png','/index_files/images/loga/deutz-on.png',300,-80,36);
imagecode('/index_files/images/loga/kuhn-off.png','/index_files/images/loga/kuhn-on.png',450,-10,66);
imagecode('/index_files/images/loga/rauch-off.png','/index_files/images/loga/rauch-on.png',520,100,76);
imagecode('/index_files/images/loga/weidemann-off.png','/index_files/images/loga/weidemann-on.png',360,180,46);
imagecode('/index_files/images/loga/mx-off.png','/index_files/images/loga/mx-on.png',350,270,36);
imagecode('/index_files/images/loga/joskin-off.png','/index_files/images/loga/joskin-on.png',110,340,36);
imagecode('/index_files/images/loga/feraboli-off.png','/index_files/images/loga/feraboli-on.png',-110,250,66);
imagecode('/index_files/images/loga/krone-off.png','/index_files/images/loga/krone-on.png',-200,180,36);
imagecode('/index_files/images/loga/trioliet-off.png','/index_files/images/loga/trioliet-on.png',-260,90,36);
imagecode('/index_files/images/loga/dondi-off.png','/index_files/images/loga/dondi-on.png',-200,0,36);
imagecode('/index_files/images/loga/agromec-off.png','/index_files/images/loga/agromec-on.png',-120,-80,36);
imagecode('/index_files/images/loga/orsi-off.png','/index_files/images/loga/orsi-on.png',150,200,86);

?>
and everything works. The only problem is to make every image a clickable link. A can't figure out solution.

[djr33]

Add an <a> tag around the image and again add a new argument to the function, call it $link or whatever you want. Now that you've got this base, there's no reason you can't change what you need. (And this is why I like PHP-- in the end, even if it's a little hard to set up, it saves time.)

Something like this:

<?php
function imagecode($url,$hover_url='',$link, $x,$y,$h='auto') {
?>
<div style="display:block;position:absolute;left:<?php echo $x; ?>;top:<?php echo $y; ?>;">
<a href="<?php echo $link; ?>">
<img src="<?php echo $url; ?>" style="height:<?php echo $h; ?>;"
onmouseover="this.src='<?php echo $hover_url ?>'" onmouseout="this.src='<?php echo $url ?>'">
</a>
</div>
<?php
}

imagecode('/index_files/images/loga/same-off.png','/index_files/images/loga/same-on.png','http://google.com',120,-140,36);
//...

?>

[Lestatt]

Hah, I was so close to the solution, just forgot to add <?php echo $link; ?>"> and instead of that I tried to do something like closing entire "imagecode..." line in <a href> tag.
Thanks, you are helpful as always. It works like a charm.

Just tell me one more thing. On another forum people said it's "Bad" to make onhover effect in PHP and i should do that with css/jQuery. Is it right? May I have any problems with PHP onhover?

[djr33]

The PHP is irrelevant. PHP (and other serverside languages) generate HTML. They don't "do" anything on the page.
If you go to your page and click view>source, you'll see the real source code.
PHP operates on the server and then prints out plain text-- HTML. This HTML is designed (in what we've done) to include the onmouseover stuff and whatever. But the PHP doesn't do anything at all to it. It's just like an extra hand writing the code for you. That's why I suggested using PHP here-- it automates the processing of generating the same code 13 times, or whatever you need. You could completely remove the PHP from this if you'd like-- view>source, then copy all of that into a new document. It would work perfectly. But then you'd lose the ability to edit all 13 images by editing one bit of code. Personally, I think leaving the PHP there is more organized. It'll save you time if you ever need to update it.

And you are using Javascript. onmouseover and onmouseout are Javascript events. You do not need jQuery for this. jQuery is a library of shortcuts and extensions for Javascript, but if you aren't doing anything fancy, it will just be an extra thing to load.

[Lestatt]

Thank you once more, you can close the thread (:

[keyboard]

Please set this thread to resolved.
You can do this by editing the first post within the thread - Pressing go advanced - Then where it says no prefix, selecting resolved then save.

There's the instructions for how to do it...