Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: Images placed on elipse shape

  1. #1
    Join Date
    May 2012
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default Images placed on elipse shape

    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).

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    May 2012
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. #5
    Join Date
    May 2012
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

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

  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  7. #7
    Join Date
    May 2012
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

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

    Positioning like
    Code:
    <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?

  8. #8
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

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

    PHP Code:
    <?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.
    Last edited by djr33; 06-05-2012 at 01:06 PM.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  9. The Following User Says Thank You to djr33 For This Useful Post:

    Lestatt (06-05-2012)

  10. #9
    Join Date
    May 2012
    Posts
    29
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

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

  11. #10
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •