Signature Code Help

Discussion in 'Empire Help & Support' started by Daxxus, May 18, 2015.

  1. Allright, What I am trying to accomplish is to have an image map signature, similar to NathanRP or AwesomeBuilder33.

    The image I am trying to use is:
    Sig.png

    The Code I put in is:
    Code:
    <body>
    <img src="sig.png" usemap="#sig" border="0">
    <map name="sig">
    <area shape="rect" coords="12,188,182,135" href="http://empireminecraft.com/threads/established-smp3-kaas-city-official-thread.52557/">
    <area shape="rect" coords="190,188,320,128" href="http://pm.emc.gs/ChugsGaming">
    <area shape="rect" coords="325,188,489,135" href="http://empireminecraft.com/threads/auction-dc-of-water-breathing-pots-8-00-d.52605/">
    </map>
    </body>
    Can anyone tell me where I went wrong or even an easier way?
  2. So you would like to have users to be able to click on the links in your signature?
  3. EMC (Xenforo) uses BBCode and not HTML. What you're trying to do is HTML which Xenforo just replaces with the unicode version of for safe viewing. Aka, <> turns into the unicode equivalent.

    You'd need to break your image into 3 parts and then make the BBCode around them 3 images.
    PenguinDJ likes this.
  4. Yes, I would like the 3 buttons to be clickable links to their respective pages.
    I am not familiar with bbcode, do you know of a template I could use?
    I tried the Image Split method too. The problem there was I couldnt get the 3 images to mesh seamlessly, they always had a space in between.


  5. I split it in 3. Feel free to use it in your signature.
    ShelLuser likes this.
  6. Using SkyDragon's images:


    Code:
    [URL=http://google.co.uk][IMG]https://i.imgur.com/9Jc7S6a.png?1[/IMG][/URL][URL=http://google.co.uk][IMG]https://i.imgur.com/IxaqyP9.png?2[/IMG][/URL][URL=http://google.co.uk][IMG]https://i.imgur.com/YrXh0kI.png?1[/IMG][/URL]
    ShelLuser likes this.
  7. Ok, how do i create the 3 seperate links and apply it to the sections? Then how do I put the whole completed image into code for the sig? Having the image is great but nothing can be done without proper code >.>\

    EDIT: Yall are too fast for me >.>
  8. Success! Thanks Guys! I owe ya!
    *makes sure to save code*
  9. One last tip.
    1. Highlight all 3 images
    2. Align Center
    607 likes this.
  10. That Didnt work, made the 3rd image go a line down. (yes all 3 were highlighted and i clicked the right button)
  11. What appears on the forums and what appears in the signature editor are two different things. Here is my signature editor. :)
    607 likes this.
  12. i did check that, It just removed the 3rd image. I will do it again to show.

    EDIT: You see?
  13. Oh well.
  14. Code:
    [CENTER][URL=http://google.co.uk][IMG]https://i.imgur.com/9Jc7S6a.png?1[/IMG][/URL][URL=http://google.co.uk][IMG]https://i.imgur.com/IxaqyP9.png?2[/IMG][/URL][URL=http://google.co.uk][IMG]https://i.imgur.com/YrXh0kI.png?1[/IMG][/URL][/CENTER]
    607 likes this.
  15. Chugs, if you go to Awesome's signature, right click on the link and click on "Inspect Element" (If you are using Google Chrome). Then look at the code. That should help you out :)
  16. Ta-Da!
    georgeashington and 607 like this.