HTML Атрибут target

Атрибут target (от англ. «target» — «цель, мишень») указывает место (фрейм или окно браузера) в которое должен быть загружен, указанный ресурс.

Для элемента определяет имя фрейма, в котором будут открываться все ссылки.
Действие target в качестве атрибута элемента распространяется на все ссылки документа, кроме ссылок в которых это действие переопределяется собственными атрибутами target .

Для элемента определяет указывает место (фрейм или окно браузера) в которое должен быть загружен ответ сервера (результат отправки данных формы).

Синтаксис

Значения

_blank Загружает страницу в новую вкладку браузера. _self Загружает страницу в текущую вкладку. _parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .

Значение по умолчанию

Применяется к тегам

Отличия HTML 4.01 от HTML 5

В HTML 4.01 атрибут считался устаревшим и не рекомендован к использованию, в HTML 5 он полностью поддерживается.

Примеры использования:

Атрибут target (Элемент )

Пример HTML:

Открыть пример в фрейме
 

Атрибут target (Элемент )

Пример HTML:

Источник

How to Set img src using CSS

Sometimes, you want to change the src attribute of an img without using HTML.

For example, going from this:

A solution

You can simulate having a src attribute by using the content attribute in CSS, and passing in the image path url() .

For example, if you want to simulate changing the src attribute of an img to /path/here/to/image.png , you can do this:

This can work in some cases, but it’s not recommended, especially because there is a better solution.

A better solution

A better way to add a src attribute to an img is to use CSS targeting to add a background-image . The caveat here is that you need to know and provide the image’s dimensions.

Here’s how to target the img and add a background-image , with an image of dimensions 20rem by 10rem :

Once you do that, you should see the image in the browser, all without changing the src attribute.

Conclusion

If you don’t want to change the src attribute of an img to a different image using HTML, you have two solutions to get the image to display in the browser using CSS.

Hopefully, this post has given you a solution that works for your needs. Happy coding!

If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!

Give feedback on this page , tweet at us, or join our Discord !

Источник

How to Set img src using CSS

I needed a way to set the src attribute of my img tags using CSS.

I didn’t want to define the path in HTML.

1. Using content: url

A quick, not very cross-compatible solution is to drop the src attribute and use content:url() in CSS.

img < content: url("/path/to/image.png"); > 

This is known to have issues in FireFox and IE, but it is much cleaner than this next solution.

2. Using background-image and padding

Instead of dropping the src tag, we can use it to target that img element in our styles (we can also target the img using a class or id ).

Let’s say our newimage.png has width x height dimensions of 200px x 100px .

We can set the background-image to be the new image and push the inline image out of the way using padding.

img[src*="/path/to/image.png"] < background: url("/path/to/newimage.png") no-repeat; width: 200px; /* Width of new image */ height: 0px !important; height /**/: 100px; /* Height of new image */ padding: 100px 0 0 0; /* Height of new image */ > 

Here, we’ll need to manually specify width and height .

Additionally, we accomodate for IE versions that mishandle the box model ( height /**/ ). Some code formatters will remove the space between height and /**/ , which is needed, so ensure that the space is there after reformatting.

It may also be helpful to include box-sizing: border-box; in order to force padding and borders into the total width.

Источник

Hyperlinking an image using CSS

I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks! Edit: Just to make it clear, I’m sourcing my image from CSS, the CSS code for the header div is as follows:-

I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.

10 Answers 10

You control design and styles with CSS, not the behavior of your content.

If you don’t want that, you’re going to have to use JavaScript to make your clickable:

Document.getElementById("header").onclick = function()

As of HTML5 you are allowed(html5doctor.com/block-level-links-in-html-5) to put block level elements inside tags.

To link a css-sourced background-image:

The key thing here is to turn the anchor tag into a block element, so height and width work. Otherwise it’s an inline element and will ignore height.

thanks, I had the same problem and I like your clarifying the main problem which is display: block; usage.

That’s really not a CSS thing. You still need your A tag to make that work. (But use CSS to make sure the image border is either removed, or designed to your required spec.)

EDIT: Taking original intent (updated question) into account, a new code sample is below:

You’re still in an HTML world for links, as described by other answers on this question.

kronoz, we know what you mean, no clarification is necessary. This is still an HTML matter, not a CSS matter. If you want a link, then use an element. That’s what links are. A element is not a link. You can emulate it with JavaScript, but that is a bad idea, and still not CSS.

sorry to spoil your fun ladies and gentlemen, it is possible.

Write in your header: [link](http://"link here") then in your css: #header a[href="https://link here"] < display: inline-block; width: 75px; height: 75px; font-size: 0; >.side .md a[href="link here"]

You still create links in HTML with ‘a’ (anchor) tags just like normal. CSS does not have anything that can specify if something is a link to somewhere or not.

Edit The comments of mine and others still apply. To clarify, you can use JavaScript to make a div act as a link:

That isn’t really great for usability however as people without JavaScript enabled will be unable to click that and have it act as a link.

Also, you may want to add a cursor: pointer; line to your CSS to give the header div the correct mouse cursor for a link.

CSS is for presentation only, not content. A link is content and should be put into the HTML of the site using a standard tag. You can then style this link (or add an image to the link) using CSS.

You have to use an anchor element, wrapped in a container. On your homepage, your title would normally be an h1, but then on content pages it would probably change to a div. You should also always have text in the anchor element for people without CSS support and/or screen readers. The easiest way to hide that is through CSS. Here are both examples:

My Title
 
  
 
 
 
 
)" data-controller="se-share-sheet" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f2.5%2f" data-se-share-sheet-license-name="CC BY-SA 2.5" data-s-popover-placement="bottom-start">Share 
 
 Follow 
 
 
 
 
 
 
answered Sep 23, 2008 at 20:09 
 
 
 
 
roryfroryf 
29.6k 1616 gold badges 8080 silver badges 103103 bronze badges