SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Insert link to image

    Hi.

    I would like to know how is possible insert a link to an image, or edit the html or css code to get hypertext on the image?

    I paste some code of my template, I really need some help to set up this hyperlink.

    CSS:

    Code:
    #footer-upper-wrapper ul li input[type="submit"]:hover {
      float: left;
      background: url('../images/button.png') repeat-x;
      border: none;
      padding: 5px;
      margin-top: 5px;
      width: 73px;
      outline: none;
      margin-left: 7px;
      color: #fff;
      cursor: pointer;

    HTML:

    Code:
    </div>
           <!-- Footer Upper Wrapper Ends -->
           <!-- Footer Lower Wrapper Starts --> 
           <div id="footer-lower-wrapper">                             
            <img src="images/triangle.png" id="triangle" alt="trinagle from twitter bird" />
            <form method="post">
              <input type="text" placeholder="info@email.com" name="contact" />
              <input type="submit" value="write-us" name="contactus"/>
            </form>
    Regards

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi bingo105. Welcome to the forums.

    That CSS you posted doesn't relate to the image in the HTML, so not totally sure which image you mean. Anyhow, to make the image in the HTML clickable as a link, just do this:

    Code:
    <a href=""><img src="images/triangle.png" id="triangle" alt="trinagle from twitter bird"></a>
    You need to put the link path in there too (inside href="") but that's the basic idea.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am meaning the image button.png which is located in the css.
    On this image I would like to add a hyperlink , but I didn't see anywhere the path to do this.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You are kind of mixing things a bit here. It can't be a form submit input and a link at the same time. What are you actually trying to achieve with this code? It looks like a form is not the right element to be using here. Do you want someone to be able to click a button in order to email you? In that case, just style a link to look like a button, if you want a hover effect on the button, or if not, simply put the image into the HTML as I suggested before, and wrap a link around it. It would look something like this:

    Code:
    <a href="mailto:info@email.com" class="contact" >
      <img src="/images/button.png" alt="contact us">
    </a>
    We can help more if we know exactly what you need. If you want a hover effect, the image will need to stay in the CSS, and the link will just be given dimensions and a background image.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not a contact form. I would try to add a hyperlink to the image so it get reddirect to another website.
    As I see now in the css it's set to hover effect.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    OK, I see from the link you PMed me that the button says Contact Us (translated). So just to clarify:

    1) you want a link to another website?

    If so, you definitely don't want the form, but just a link, like this:

    Code:
    <a href="http://othersite.com" class="something"></a>
    You could style that link to look like the button now. You can do it with CSS and no image. We can help you with that.

    2) Out of interest, why do you want an external link for contact purposes?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •