Making a web badge

Discussion in 'Web Design and Development' started by MacPanda, Jun 13, 2007.

  1. MacPanda macrumors regular

    Joined:
    Oct 15, 2006
    #1
    hey folks just making a page and wanted to make a web badge basically an image that points the person to my web page and my friends can put on their site but i am not sure how to do that i really just want to supply the image as a link integrated inside it so they can simply embedd it in . thanks here is the image below. all help appreciated. :apple:

    [​IMG]
     
  2. Dimwhit macrumors 68000

    Dimwhit

    Joined:
    Apr 10, 2007
  3. MacPanda thread starter macrumors regular

    Joined:
    Oct 15, 2006
  4. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #4
    what i dont understand what you want?

    HTML:
    <a href="http://yoursite.com" target="_blank"><img src="http://yoursite.com/yourimage.jpg" border="0"></a>
    
    thats the code to have a linked image in HTMl, is that what you where after?
     
  5. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #5
    You might try creating a Flash movie with the URL embedded in it.
    Maybe one the Flash experts here could talk you through the process.
     
  6. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #6
    no need for flash here, the simple code above is sufficient. if you want basic animation in the 'badge' i would reccomend just using an animated gif format.
     
  7. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #7
    Even better :
    css
    Code:
    #badge {
       display: block;
       width: [B]widthinpixels[/B]px;
       height: [B]heightinpixels[/B]px;
       background: url(path/to/image.png);
    }
    html
    Code:
    <a href="[B]yourlink[/B]" id="badge" rel="external" title="[B]pagename[/B]"></a>
     
  8. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #8
    sorry but how is this better in any way? he wants to distribute it to friends for links on their site, so the shortest amount of code is the BEST solution surely. your method adds nothing
     
  9. MacPanda thread starter macrumors regular

    Joined:
    Oct 15, 2006
    #9
    hey folks thanks for your replies and help - what i am trying to do is give people an image that they can put on their website and when a person clicks on that image it takes them to my little page. Thanks for the html code but i don't know how to link it to the image - when i wanted to make a link on something i would just use a hot selection in dreamweaver to put over the image and that would do it - do i supply the code and the image separately? i am a little bit lost. thanks once again for your help guys.
     
  10. Dimwhit macrumors 68000

    Dimwhit

    Joined:
    Apr 10, 2007
    #10
    MacPanda, linking to an image is basically the same, regardless. The code in Dreamweaver to link to an image will be:

    Code:
    <img src="image path here">
    That's all we're doing. The path will depend on where your image is. Currently, it's:

    Code:
    <img src="http://farm2.static.flickr.com/1215/544280569_d2b001b9d2_o.gif">
    Ideally, you want to upload the image and make the link something like:

    Code:
    <img src="http://www.flowoflava.com/images/imagename.gif">
    Then, all you need is the code so that when you click on it, it takes people to your site. It works like any other link you make in Dreamweaver. The final code is like yagran posted:

    Code:
    <a href="http://www.flowoflava.com" target="_blank"><img src="http://www.flowoflava.com/images/imagename.gif" border="0"></a>
    Not sure that helps, but there you go.
     
  11. dcv macrumors G3

    Joined:
    May 24, 2005
  12. MacPanda thread starter macrumors regular

    Joined:
    Oct 15, 2006
    #12
    thanks folks i think i worked it out - what i will do is put the image on my webspace and send people the line of code to add to their page - thanks so much for your help - i am not great a coding stuff :( wish i was. thanks once again tho ...
     

Share This Page