Instruction
1
If the banner is in one of graphic formats (gif, jpg, png, bmp) that will be enough to put the image tag inside the link tag.First, build the image tag. Markup language web pages (HTML - HyperText Markup Language "hypertext markup language") is the simplest variant looks like this:<img src="banner.gif" />Here the src attribute to "relative address" of the image. In this variant, the browser will assume that the picture is in the same folder on your server where the page into which you inserted the banner. But it is better to specify the "absolute address":<img src="http://kakprosto.ru/banner.gif" />
2
In this tag you should add some more attributes. Two attributes will specify the size of banner (height and width). It is not mandatory attributes, the image will appear without them, if the page is loaded from the server to the browser all goes well. But if the picture for some reason will not load, the lack of size can lead to the fact that all the other design elements will be not in their places. Tag with dimensions would look like this:<img src="http://kakprosto.ru/banner.gif" width="468" height="60" />
3
By default, the browser draws a blue border around images with links. To avoid this you should add the tag for the bannerand the border attribute with a value of zero:<img src="http://kakprosto.ru/banner.gif" width="468" height="60" border="0" />
4
Add another attribute (title), which will contain the tooltip text when you hover the mouse cursor over the banner:<img src="http://kakprosto.ru/banner.gif" width="468" height="60" border="0" title="This is banner!" />
5
The image tag with the most important attributes you have prepared, now we need to get him inside the link tag. Each hyperlink consists of two tags - an opening and a closing:<a href="https://eng.kakprosto.ru/"> </a>In the opening tag placed the href attribute, which contains the address to send the request. Between these two tags, insert links and tag bannera:<a href="https://eng.kakprosto.ru/"><img src="http://kakprosto.ru/banner.gif" width="468" height="60" border="0" title="This is banner!" /></a>HTML code of the bannerand the link is ready, do not forget to replace:- in the href attribute: "http://kakprosto.ru" to your link for the banner;- in the src attribute: "http://kakprosto.ru/banner.gif" the image url for the banner;- in the attribute width: "468" width of your banner;- in the attribute height: "60" in the height of your banner;- in the title attribute: "This banner!"on the pop-up text for your bannerand;
6
All of the above belonged to the bannerof am-pictures, but there are banneryou designed by flash technology. To insert a link in a flash movie in a standard way it is necessary to have not only the bannerbut also its source code. Besides, to edit the source code and then compile the flash movie, it is possible only in a specialized editor - plain text editor for this purpose is not suitable. However, there is a way to overcome all these difficulties, limiting only to edit HTML and CSS (Cascading Style Sheets — "cascading style sheets"). The CSS language is used for more detailed (compared to HTML) of the description of the appearance of page elements. With it on the pages you can build quite a complex multilayered structure. This is what we use, by placing a flashbanner in the bottom layer, and placing over it a layer with a link.The HTML code of the bannerand will look like this:<div class="linkedFlashContainer">
<a target="_top" class="flashLink" href="https://eng.kakprosto.ru/"></a>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="468" height="60" align="middle">
<param name="movie" value="banner.swf" />
<param name="wmode" value="opaque">
<embed src="banner.swf" quality="high" wmode="opaque" width="468" height="60" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>don't forget to change the width and height attributes (in two places), the name bannerand banner.swf (in two places) and the address of the link http://kakprosto.ru (in one place).And the code in the SCC that corresponds to that HTML code should be:<style>
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;}
</style>Here we have used a transparent image (any size) with the name spacer.gif. And here, too, do not forget to change the dimensions width and height (in two places).
<a target="_top" class="flashLink" href="https://eng.kakprosto.ru/"></a>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="468" height="60" align="middle">
<param name="movie" value="banner.swf" />
<param name="wmode" value="opaque">
<embed src="banner.swf" quality="high" wmode="opaque" width="468" height="60" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>don't forget to change the width and height attributes (in two places), the name bannerand banner.swf (in two places) and the address of the link http://kakprosto.ru (in one place).And the code in the SCC that corresponds to that HTML code should be:<style>
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;}
</style>Here we have used a transparent image (any size) with the name spacer.gif. And here, too, do not forget to change the dimensions width and height (in two places).