Insert link to image

HTML & CSS
1

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:

#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:

</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

Hi bingo105. Welcome to the forums. :slight_smile:

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:

[COLOR="#FF0000"]<a href="">[/COLOR]<img src="images/triangle.png" id="triangle" alt="trinagle from twitter bird">[COLOR="#FF0000"]</a>[/COLOR]

You need to put the link path in there too (inside href=“”) but that’s the basic idea. :slight_smile:

3

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

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:

<a href="[COLOR="#FF0000"]mailto:info@email.com[/COLOR]" 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.

5

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

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:

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

  1. Out of interest, why do you want an external link for contact purposes?
7

  1. Yes, I would like, when you push the button or text in the button to get to another website.

  2. Because this is a landing page.

So which code I must use and where (css or html) to work properly?

8

OK, the first thing you need to consider is your design. You have a big form across the bottom of your page which you don’t need. All you need is the link, so you might want to change the design a bit. Anyhow, the link can be something like this:

Replace the whole form with this:


<a href="http://othersite.com">Contact Us</a>

CSS:

#footer-lower-wrapper a {
  background: url('../images/button_hover.png') repeat-x;
  padding: 5px 20px;
  color: white;
  text-shadow: #D2D1D0 0px 1px 0px;
  font-weight: bold;
  cursor: pointer;
}

#footer-lower-wrapper a:hover, #footer-lower-wrapper a:focus {
  background: url('../images/button.png') repeat-x;
}
9

It’s not working…I have removed the code, but, the footer with graphic dissapear, and the button remain, but without any reddirection (link).
Some other solution?

10

Your page looks the same to me. I can’t see any changes. Like I said, though, you will need to make some design changes if you remove the form. Maybe a full width div container?