How To Insert A Link Into A Banner

Table of contents:

How To Insert A Link Into A Banner
How To Insert A Link Into A Banner

Video: How To Insert A Link Into A Banner

Video: How To Insert A Link Into A Banner
Video: PHOTOSHOP: EP 1 - Adding A Link In Photoshop 2024, April
Anonim

If you have a banner, but there is no ready-made html-code to insert it into the page, then adding the link you need is not so difficult. Even if the banner is made using flash technology. Possible options for organizing links to banners in graphic and flash formats in the source code are described below.

How to insert a link into a banner
How to insert a link into a banner

Instructions

Step 1

If the banner is in one of the graphic formats (gif, jpg, png, bmp), then it will be enough to put the image tag inside the link tag. First, form the image tag. In the markup language of web pages (HTML - HyperText Markup Language - "hypertext markup language"), its simplest version looks like this: Here the "relative address" of the image is specified in the src attribute. In this version, the browser will assume that the picture is in the same folder on your server where the page itself is where the banner is inserted. But it is better to specify an "absolute address":

Step 2

There are a few more attributes to add to this tag. Two attributes will indicate the banner dimensions (height and width). These are optional attributes - the image will be displayed without them if everything goes well when the page is loaded from the server to the browser. But if the picture for some reason is not loaded, then the lack of dimensions can lead to the fact that all other design elements will be out of place. The size tag will look like this:

Step 3

By default, the browser draws a blue border around link images. To avoid this, add a border attribute with a null value to the banner tag:

Step 4

Add one more attribute (title), which will contain the text for the tooltip when you hover the mouse over the banner:

Step 5

You have prepared the image tag with the most important attributes, now you need to place it inside the link tag. Each hyperlink is formed by two tags - opening and closing: The opening tag contains the href attribute, which contains the address for sending the request. Between these two link tags and insert the banner tag: The HTML code of the banner with the link is ready, do not forget to replace: - in the href attribute: "https://kakprosto.ru" with the address of your link for the banner; - in the src attribute: " https://kakprosto.ru/banner

Step 6

All of the above referred to image banners, but there are also banners made using flash technology. To insert a link into a flash movie in a standard way, you need to have not only the banner itself, but also its source code. In addition, you can edit the source code and then compile the Flash movie only in a specialized editor - a regular text editor is not suitable for this. However, there is a way to get around all these difficulties, limiting yourself to editing only HTML and CSS (Cascading Style Sheets - "cascading style sheets"). The CSS language is used for a more detailed (in comparison with HTML) description of the appearance of page elements. With its help, rather complex multilayer structures can be built on the pages. We will use this by placing the Flash banner in the bottom layer, and placing the layer with the link above it. The HTML code of the banner will look like this:

Do not forget to replace the width and height attributes in it (in two places), the banner name banner.swf (in two places) and the link address https://kakprosto.ru (in one place). And the SCC code corresponding to this HTML code should be like this:

div.linkedFlashContainer {position: relative; z-index: 1; border: 0px; width: 468px; height: 60px}

a.flashLink {position: absolute; z-index: 2; width: 468px; height: 60px; background: url (spacer.gif) no-repeat;}

A transparent image (of any size) called spacer

Recommended: