Add link to image by *.CSS file

Asked

Viewed 6,123 times

1

I have a file *.css that I determined the position and size of the image I have in my header, it is possible to add a hyperlink to that image in the file itself *.css and then when I assign that file id to that image *.css she already catch the link too?

  • No, it doesn’t even make sense to do that. What would be the purpose?

  • I am programming in a tool where I can select my file *.css I just can’t put the tag <img src=""> to select the image I want to place as a point to access the link

1 answer

4


In CSS there is no property that can manipulate the element’s image file img. If that’s really the need I suggest you trade for the element div and specify the image in CSS

Example:

CSS:

#div_img {
  background-image:url('http://www.sitedaimagem.com/img/header.png'); /* url */
  width:396px; /* largura */
  height:153px; /* altura */
}

HTML:

<div id="div_img"></div>

1# Edited:

Via CSS it is not possible to manipulate the link, or you set it directly on HTML or in the Javascript

2# Edited:

New example using Jquery: CSS:

#div_img {
  background-image:url('http://www.sitedaimagem.com/img/header.png'); /* url */
  width:396px; /* largura */
  height:153px; /* altura */
}

HTML:

<a id="div_link" href="http://www.uol.com.br"><div id="div_img"></div></a>

Jquery:

$(document).ready(function() {
  $('#div_link').attr('href','http://www.google.com');
})
  • Hence you can assign various properties on CSS to leave the element div more or less equal to img

  • Thanks for the reply @Carlos Andrade, I tested this and could not, added the line: background-image:url('http://www.google.com'); and then called in HTML my div but when clicking on the image I was not redirected

  • In background-image:url('url_completo_da_imagem'); you must specify the full address of the image.

  • Ah, excuse me, I misinterpreted the question. I’ll make the edit and you can undo your vote.

  • I await your updated answer then +1

  • Apologies once again, I had understood the url of the image and not the hyperlink

  • you could put an example in Javascript for me to see if it doesn’t solve my problem?

  • Yes, I’ll do the editing again.

  • Great. I just have to add that if you’d rather not background-image you can also do by content in a ::before.

Show 4 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.